/* ==========================================================================
   Forside (pages/forside.html). Kun det, der er særligt for forsiden.
   Forsiden bruger også page-led.css (pylon-tegningen og .led-macro).

   Indhold:
    1. LED-tavlen i hero
    2. Aktuelt-linjen
    3. Galleriet med LED-opgaver
    4. "Det laver vi": LED stort, indendørs og lyd små
    5. LED kort fortalt
    6. Om Unilyd
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LED-tavlen ({{led_tavle}}, laves af build.py ud fra site.json)
      Et rigtigt prikpanel: slukkede dioder som svage prikker, tændte som
      skarpe ravgule prikker. Ingen glød. Teksten ruller én diode ad gangen,
      to gange (ca. 28 sekunder med den nuværende tekst), og så står den stille
      på den korte tekst ("stille" i site.json). Den holder pause, mens musen er
      over den, eller mens man holder fingeren på den (site.js).
      --p er afstanden mellem dioderne. Ved "reducer bevægelse" står den stille fra start.
   -------------------------------------------------------------------------- */
.led-tavle {
  --p: 5px;
  --led-on: #ffa630;
  --led-off: #2e2013;
  max-width: 640px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 7px;
  background: #060607;
  border: 1px solid var(--line-dark-strong);
  color: var(--led-on);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;   /* intet menu-vindue, når man holder fingeren på tavlen */
}
@media (min-width: 600px) { .led-tavle { --p: 6px; padding: 8px; } }
@media (min-width: 1080px) { .led-tavle { --p: 7px; padding: 9px; } }

.led-tavle__skaerm {
  position: relative; overflow: hidden;
  width: 100%;
  width: round(down, 100%, var(--p));   /* hele dioder, ingen halve i kanten */
  height: calc(9 * var(--p));
  background-image: radial-gradient(circle, var(--led-off) calc(var(--p) * .3), transparent calc(var(--p) * .3 + .6px));
  background-size: var(--p) var(--p);
}
.led-tavle svg {
  position: absolute; left: 0; top: 0;
  max-width: none; height: calc(9 * var(--p));
  overflow: visible;
}
/* Rulleteksten kører 2 gange og forsvinder. Samtidig tændes den stille tekst. */
.led-tavle__rul {
  width: calc(var(--cols) * 2 * var(--p));
  animation: led-rul var(--tid) steps(var(--cols)) 2,
             led-sluk 0s linear calc(var(--tid) * 2) forwards;
}
.led-tavle__stille {
  width: calc(var(--still) * var(--p));
  visibility: hidden;
  animation: led-taend 0s linear calc(var(--tid) * 2) forwards;
}
.led-tavle:hover :is(.led-tavle__rul, .led-tavle__stille),
.led-tavle:active :is(.led-tavle__rul, .led-tavle__stille) { animation-play-state: paused; }
@keyframes led-rul {
  to { transform: translateX(calc(var(--cols) * var(--p) * -1)); }
}
@keyframes led-sluk { to { visibility: hidden; } }
@keyframes led-taend { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .led-tavle__rul { display: none; }
  .led-tavle__stille { visibility: visible; animation: none; }
}


/* --------------------------------------------------------------------------
   2. Aktuelt: én kort linje øverst i galleri-sektionen
   -------------------------------------------------------------------------- */
.home-now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  margin-bottom: clamp(36px, 5vw, 56px); padding: 14px 0;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
  color: var(--body); font-size: 16.5px; line-height: 1.5;
}
.home-now__label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
/* En tændt diode */
.home-now__label::before { content: ""; width: 8px; height: 8px; background: var(--orange); }


/* --------------------------------------------------------------------------
   3. Galleriet med LED-opgaver (mørk baggrund)
   -------------------------------------------------------------------------- */
.home-work .gallery figcaption { color: var(--on-dark-muted); }
.home-work .gallery figcaption b { color: var(--on-dark); }
/* Nærbilledet står alene i sidste række på mobil. Lavt udsnit, så det ikke fylder for meget. */
@media (max-width: 899.98px) {
  .home-work__wide img { aspect-ratio: 2 / 1; object-position: 35% 50%; }
}


/* --------------------------------------------------------------------------
   4. "Det laver vi". 01 og 02 (LED) med billede, 03 og 04 korte rækker.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .home-areas > .numlist__item { padding: 56px 0; }
  .home-areas > .home-areas__small { padding: 30px 0; align-items: first baseline; }
}
/* Nærbilledet af Bording er kun 800 px. Højre kant flugter med tegningen over. */
.home-areas__macro > img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .home-areas__macro { justify-self: end; width: 100%; } }

.home-areas__small .numlist__title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); }
.home-areas__small .numlist__text { margin-top: 0; }
.home-areas__last .numlist__title { font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); }
.home-areas__last .label { margin-bottom: 6px; }
.home-areas__last .numlist__text { font-size: .94em; }
@media (max-width: 899.98px) {
  .home-areas > .home-areas__small { gap: 10px; padding: 24px 0 26px; }
  .home-areas__last { padding: 20px 0 22px; }
}
/* 03 har to links. Så skal hele rækken ikke være ét stort link. */
.home-areas__two .link-arrow::before { content: none; }
.home-areas__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 4px; }
.home-areas .home-areas__small .link-arrow { margin-top: 0; }


/* --------------------------------------------------------------------------
   5. LED kort fortalt
   -------------------------------------------------------------------------- */
.home-facts .h3 { margin-bottom: 16px; }
.home-facts__list dd { font-size: 16.5px; line-height: 1.5; }
@media (min-width: 700px) {
  .home-facts__list > div { grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr); }
}


/* --------------------------------------------------------------------------
   6. Om Unilyd: faktaboksen flugter med overskriften på computer
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .home-about__facts { margin-top: 44px; }
}