/* ==========================================================================
   LED-siderne: /led-skiltning/, /pylon-led-skilt/ og /led-facade/
   Kun det, der er særligt for de tre sider. Alt andet ligger i site.css.

   Indhold:
    1. Sidehoved: pixelprikkerne og det høje pylon-foto
    2. "Kort fortalt" ved siden af overskriften (oversigten)
    3. Tegning: pylon ved vejen (oversigten)
    4. Nummereret liste med højformat-foto (til senere, fx Nymindegab)
    5. Tegning og nærbillede: ikke for store
    6. Tabeller: lidt tættere på mobil, sammenligning stables
    7. Videoklip ved siden af et foto (oversigten)
    8. To høje billeder side om side og pixelprikker i en liste (facadesiden)

   Spalten, der bliver stående (.sticky-col), og midtstillede spalter
   (.cols--center) ligger i site.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sidehoved
   -------------------------------------------------------------------------- */
/* Pixelprikkerne (P6/P8/P10) i højre side af sidehovedet på oversigten */
.page-head__media.pitch--panel { align-self: end; }

/* Med et højt foto står teksten midt for billedet i stedet for i bunden */
@media (min-width: 900px) {
  .page-head__grid.led-head__center { align-items: center; }
}

/* Pylon-fotoet i sidehovedet er højt. Hold det inden for en skærmhøjde. */
.led-head__tall img { max-height: 560px; }
/* Tablet: højformat, ikke for bredt, så man kan se, at det er en pylon */
@media (min-width: 600px) and (max-width: 899.98px) {
  .led-head__tall { max-width: 520px; }
  .led-head__tall img { aspect-ratio: 4 / 5; max-height: none; }
}
@media (min-width: 900px) {
  .led-head__tall img { max-height: 660px; }
}


/* --------------------------------------------------------------------------
   2. "Kort fortalt" ved siden af overskriften
   -------------------------------------------------------------------------- */
.led-intro { margin-bottom: clamp(36px, 5vw, 64px); }
.led-intro .label { margin-bottom: 10px; }
.led-intro .deflist dd { font-size: 16px; line-height: 1.45; }
@media (min-width: 900px) {
  .led-intro { align-items: start; }
}


/* --------------------------------------------------------------------------
   3. Tegning: pylon ved vejen. Bruges i .ill (mørk boks, 16:10).
      Målene følger eksempeltegningen: 1200 x 2000 mm, skærm 960 x 1536 mm.
   -------------------------------------------------------------------------- */
.ill-pylon { position: absolute; inset: 0; }
.ill-pylon__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #1b1e21; border-top: 1px solid #2c3035; }
/* Lav bygning i baggrunden */
.ill-pylon__bldg {
  position: absolute; left: 6%; bottom: 12%; width: 36%; height: 30%;
  background: #191c1f; border-top: 2px solid #2c3035;
}
.ill-pylon__bldg::before { /* vinduesbånd */
  content: ""; position: absolute; left: 8%; right: 8%; top: 30%; height: 16%;
  background: #22262a;
}
/* Selve pylonen: kabinet med skærm, lukket panel og sokkel */
.ill-pylon__body {
  position: absolute; left: 57%; bottom: 6%; transform: translateX(-50%);
  height: 84%; aspect-ratio: 1200 / 2000;
  background: #3a3f45; border: 1px solid #4a5056;
  display: flex; flex-direction: column;
}
/* Procenter i margin regnes af pylonens bredde: skærmen er 80 % (960 af 1200 mm) */
.ill-pylon__screen {
  margin: 6% 10% 0; aspect-ratio: 960 / 1536; flex: 0 0 auto;
  background: #050506; padding: 3%;
}
.ill-pylon__content {
  height: 100%; background: var(--orange); color: #1b0f04;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12% 10% 10%;
}
.ill-pylon__content small { display: block; font: 600 clamp(7px, 1.4cqw, 11px)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ill-pylon__content strong { display: block; font-size: clamp(12px, 4.2cqw, 28px); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.ill-pylon__content strong + small { margin-top: 8%; }
.ill-pylon__bars { display: flex; gap: 6%; }
.ill-pylon__bars i { flex: 1; height: .5cqw; min-height: 2px; background: rgba(27, 15, 4, .3); }
.ill-pylon__bars i.on { background: #1b0f04; }
.ill-pylon__panel { flex: 1 1 auto; background: #2f3439; margin-top: 6%; border-top: 1px solid #4a5056; }
.ill-pylon__base { flex: 0 0 auto; height: 1.4cqw; min-height: 4px; background: #7c8187; }


/* --------------------------------------------------------------------------
   4. Nummereret liste med højformat-foto (pylonen står op).
      Bruges ikke lige nu. Klar til et foto af pylonen i Nymindegab.
   -------------------------------------------------------------------------- */
.numlist__media.led-portrait { max-width: 420px; }
.numlist__media.led-portrait > img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  /* Højre kant flugter med billederne i rækkerne under */
  .numlist__media.led-portrait { justify-self: end; width: 100%; }
  .numlist__media.led-portrait > img { aspect-ratio: 3 / 4; }
}


/* --------------------------------------------------------------------------
   5. Tegning og nærbillede
   -------------------------------------------------------------------------- */
/* Målskitsen af pylonen (led-pylon-maalskitse.png har gennemsigtig baggrund) */
.led-drawing { max-width: 440px; }
.led-drawing img { width: 100%; }
@media (min-width: 900px) { .led-drawing { justify-self: center; width: 100%; } }

/* Nærbilleder (800 x 600 px). Vises ikke større end 560 px, så de ikke bliver uskarpe. */
.led-macro { max-width: 560px; }


/* --------------------------------------------------------------------------
   6. Tabeller
   -------------------------------------------------------------------------- */
/* Lidt mindre skrift og luft på smalle skærme */
@media (max-width: 599.98px) {
  .led-table { font-size: 15.5px; }
  .led-table th, .led-table td { padding-right: 10px; }
}
.led-table tbody th small { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--mono); color: var(--fg-muted); }

/* Række-overskrifterne (P6, P8, P10) står tydeligt, og LED-kolonnen får accentfarve */
.led-table tbody th.num { color: var(--fg); font-weight: 700; }
.led-table--compare thead th:last-child { color: var(--accent-text); }

/* Sammenligningen (fast skilt / LED) stables på mobil: emnet over,
   de to svar side om side med en lille overskrift (data-label). */
@media (max-width: 599.98px) {
  .led-table--compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .led-table--compare tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; border-top: 1px solid var(--rule); }
  .led-table--compare tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .led-table--compare tbody th { grid-column: 1 / -1; padding: 14px 0 4px; border: 0; color: var(--fg); font-weight: 650; }
  .led-table--compare tbody td { padding: 0 0 14px; border: 0; }
  .spec.led-table--compare tbody tr:last-child th,
  .spec.led-table--compare tbody tr:last-child td { border-bottom: 0; }
  .led-table--compare tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font: 600 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted);
  }
  .led-table--compare tbody td:last-child::before { color: var(--accent-text); }
}


/* --------------------------------------------------------------------------
   7. Videoklip ved siden af et foto (oversigten, "Fra værkstedet til vejen")
      Fotoet følger videoens højde på computer. Billedteksterne på mørk baggrund.
   -------------------------------------------------------------------------- */
/* Begge billedtekster er lige høje (videoen har en pauseknap), så billederne flugter i bunden. */
.led-live figcaption { min-height: 40px; display: flex; align-items: center; }


/* --------------------------------------------------------------------------
   8. To høje billeder side om side (facadesiden: bagside og nærbillede)
   -------------------------------------------------------------------------- */
.led-duo { align-self: start; }
.led-duo .gallery__item.fill .frame { aspect-ratio: 4 / 5; flex: 0 0 auto; min-height: 0; }

/* Pixelprikkerne direkte på lys baggrund i en liste (facadesiden) */
.led-pitch-inline { max-width: 420px; margin-top: 20px; }

/* Bredt værkstedsfoto under pylonbillederne. Ikke for højt på computer. */
@media (min-width: 900px) {
  .led-wide img { aspect-ratio: 21 / 9; }
}