/* ==========================================================================
   components.css - återanvändbara byggdelar.
   Varje komponent ska fungera på både --bg-page och --bg-surface.
   ========================================================================== */

/* --- Bildplatshållare -----------------------------------------------------
   Handovern avsnitt 24. Egen yta, subtil text, tydlig proportion. Texten
   talar om vilket fotografi som behövs, så att Fredrik ser vad som ska
   fotograferas snarare än att tro att bilden saknas av misstag.

   <div class="ph ph--landscape" data-ratio="3:2">
     <span class="ph__label">PHOTO: Gyuto, side profile</span>
   </div>                                                                   */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ph-ratio, 3 / 2);
  padding: var(--space-5);
  background: var(--bg-fill);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Diagonalkryss i mycket låg styrka. Gör ytan läsbar som avsiktligt tom
   i stället för trasig bild, utan att bli dekor.                           */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--fg-decor) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom left,  transparent calc(50% - 0.5px), var(--fg-decor) 50%, transparent calc(50% + 0.5px));
  opacity: 0.55;
}

.ph__label {
  position: relative;
  max-width: 34ch;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg-default);
  text-align: center;
  text-wrap: balance;
}

.ph[data-ratio]::after {
  content: attr(data-ratio);
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-default);
  opacity: 0.7;
}

.ph--hero      { --ph-ratio: 21 / 9; }
.ph--wide      { --ph-ratio: 16 / 9; }
.ph--landscape { --ph-ratio: 3 / 2; }
.ph--square    { --ph-ratio: 1 / 1; }
.ph--portrait  { --ph-ratio: 4 / 5; }
.ph--tall      { --ph-ratio: 2 / 3; }

/* Hero i 21:9 blir ett streck på mobil. Faller till 3:2, alltså fortsatt
   liggande men med höjd nog att motivet syns. */
@media (max-width: 640px) {
  .ph--hero { --ph-ratio: 3 / 2; }
}

/* --- Eyebrow, liten versaletikett över en rubrik -------------------------- */

.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --- Status, t.ex. AVAILABLE ---------------------------------------------
   Diskret. Ingen färgkodning, eftersom v0.1 saknar accentfärg och
   handovern förbjuder utförsäljningskänsla.                                */

.status {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-strong);
}
.status--archive { color: var(--fg-muted); }

/* --- Knappar -------------------------------------------------------------
   Låg höjd, ingen versalisering av hela etiketten, ingen utropsteckenton.
   Handovern: CTA ska inte kännas aggressivt säljande.                      */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;                 /* klickyta, WCAG 2.2 target size      */
  padding: var(--space-3) var(--space-5);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-align: center;
  background: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.btn--primary:hover { background: var(--fg-default); }

.btn--secondary {
  border-color: var(--line-strong);
  color: var(--fg-strong);
}
.btn--secondary:hover { border-color: var(--fg-muted); }

.btn--block { width: 100%; }

/* Textlänk med pil. Bär de flesta sekundära vägarna i sajten. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-strong);
  text-decoration: none;
  border-bottom: var(--border-w) solid color-mix(in srgb, var(--fg-strong) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--fg-strong); }
.link-arrow::after { content: "\2192"; }

/* --- Kort ---------------------------------------------------------------
   Basen för knivkort, kurskort och adminlistor. Hela kortet är klickbart
   via en utfylld länk, så att träffytan blir stor utan nästlade länkar.    */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__media { position: relative; }

.card__body { display: flex; flex-direction: column; gap: var(--space-1); }

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.card__meta {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.card__status { margin-top: var(--space-2); }

/* Utfylld länk: täcker hela kortet men lämnar texten markerbar. */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; }

.card:hover .ph { border-color: var(--line-strong); }

/* --- Specifikationslista -------------------------------------------------- */

.spec {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  font-size: var(--text-sm);
}
.spec dt {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  align-self: center;
}
.spec dd { margin: 0; color: var(--fg-default); }

/* --- Formulär ------------------------------------------------------------
   Inget fält skickar data i demon. Se .notice för hur det kommuniceras.    */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.input, .textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--field-bg);   /* samma på alla fält, se REGEL i tokens.css */
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--text-0);
  transition: border-color var(--dur) var(--ease);
}
.input:hover, .textarea:hover { border-color: var(--fg-muted); }
.textarea { min-height: 11rem; resize: vertical; line-height: var(--leading-normal); }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--text-deep);
}

/* --- Notis ---------------------------------------------------------------
   Används för att säga rakt ut att något är en visningsversion. Fredrik ska
   aldrig tro att han skickat ett riktigt meddelande.                       */

.notice {
  padding: var(--space-4);
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* --- Avgränsare ----------------------------------------------------------- */

.rule { border: 0; border-top: var(--border-w) solid var(--line); margin: 0; }