/* ==========================================================================
   TEKNOLOGISTEN — teamet
   ==========================================================================
   Profilkortet och medlemslistan. Bygger ovanpå sajtens token i style.css
   och guide.css. Sidorna som använder filen är team.html,
   elcykelprofessorn.html, claudio.html, bonusfarsan.html och
   dronardoktorn.html. */

/* ── Sidhuvudet utan linje ─────────────────────────────────────────────
   Bonusfarsans sida har ingen ingress (den texten ligger i kortet och i
   prosan i stället), och då hamnar husets hårlinje under sidhuvudet tätt
   under metaraden och skär genom sidan på ett sätt som ser trasigt ut.
   Modifieraren gäller bara den sidan. */
.page-head--utan-linje { border-bottom: 0; }

/* ── Profilen ──────────────────────────────────────────────────────────
   Sidoraden: kortet med citat och intressen till vänster, prosan till
   höger. */
.profil {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 54px;
}

@media (min-width: 860px) {
  .profil { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.profil__kort {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}

.profil__kort::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--signal) 0%, var(--viz-3) 100%);
  opacity: 0.75;
}

.profil__bild {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 2px auto 6px;
}

.profil__namn {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 4px;
}

.profil__roll {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  line-height: 1.7;
  color: var(--muted);
  text-transform: uppercase;
}

.profil__citat {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--signal);
  background: var(--signal-wash);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.profil__citatkalla {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.profil__prosa { margin-top: 0; }
.profil__prosa + .profil__prosa { margin-top: 0.9em; }

/* Citatlistorna är innehåll, inte vy. De ligger kvar i markupen på alla
   profiler och får vara hur långa som helst, men de visas aldrig: det som
   syns i kortet är mottorutan, och den drar en rad i taget ur motto.js — en
   lista som visades skulle visa flera rader samtidigt och upprepa den
   dragna. Skulle listan en dag visas igen behöver den sina egna regler
   tillbaka: etiketten i mono, citatet i brödtext och en hårlinje över. */
.citatlista { display: none; }

.fz-log {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 179, 71, 0.4);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--amber);
}

/* Loggen radas upp: rubriken först, sedan en händelse per rad och sist
   en avslutande rad som inte är en händelse. Alla tre är block, så varje
   år får sin egen linje även när texten flyter ihop i markupen. */
.fz-log__namn {
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.fz-log__rad { display: block; }

.fz-log__not {
  display: block;
  margin-top: 5px;
  opacity: 0.72;
}

/* Intressena i sidospalten, som en enkel punktlista i prosastil */
.intressen { margin: 0; padding-left: 1.2em; }
.intressen li { margin: 0.35em 0; }