/* ==========================================================================
   HOMEPAGE — de toren als held
   ========================================================================== */

.at-hero {
  position: relative;
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}

/* Laag laptopscherm: alle verticale ruimte naar de toren. De rest van de
   correctie staat verderop, direct ná de gewone torenregel — anders wint die
   laatste, want de specificiteit is gelijk. */
@media (min-width: 1000px) and (max-height: 900px) {
  .at-hero { padding-block: .5rem clamp(2rem, 5vw, 4rem); }
}

/* Op de telefoon staat de tekst boven de toren; op desktop links ernaast.
   De tekstkolom mag ruim zijn: de toren schaalt op hoogte, niet op de
   breedte van zijn kolom, dus hij wordt er niet kleiner van. */
.at-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 5vw, 4rem);
  max-width: var(--at-max);
  margin-inline: auto;
  padding-inline: var(--at-pad);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'type'
    'tower'
    'body';
  align-items: start;
}

.at-hero__type  { grid-area: type; }
.at-hero__tower { grid-area: tower; }
.at-hero__body  { grid-area: body; }

@media (min-width: 1000px) {
  .at-hero__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    /* De toren beslaat beide rijen, dus de broodtekst komt links direct
       onder de introregel te staan. */
    grid-template-areas:
      'type tower'
      'body tower';
    grid-template-rows: auto 1fr;
    gap: 1.25rem clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }

  .at-hero__tower { align-self: center; }
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
.at-hero__type {
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 2vw, 1.4rem);
}

/* Bewust niet sticky: een grid-item plakt binnen de hele grid, niet binnen
   zijn eigen rij, en schoof daardoor over de broodtekst heen. */

.at-hero__title {
  margin: 0;
  /* De ondergrens houdt hem op een telefoon groot genoeg; de bovengrens is
     teruggebracht van 8,5 naar 6,8rem, want op een breed scherm nam hij de
     halve pagina in en drukte hij de toren weg. */
  font-size: clamp(3.9rem, 16.5vw, 6.8rem);
}
.at-hero__title span { display: block; }

.at-hero__mark { width: fit-content; }

/* Broodtekst onder de intro — zelfde maat en regelafstand als op de
   detailpagina's, zodat de site één stem houdt. */
.at-hero__body {
  font-family: var(--at-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--at-text);
  max-width: 52ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   TOREN
   -------------------------------------------------------------------------- */
/* Ruimte onder de toren voor het hint-ballonnetje, dat buiten de figuur hangt. */
.at-hero__tower {
  min-width: 0;
  padding-bottom: 3rem;
}

/* De toren mag op de homepage de volle hoogte pakken die er is, en staat
   iets naar rechts zodat hij niet tegen de kop aan plakt. */
@media (min-width: 1000px) {
  .at-hero__tower .atn__tower {
    /* Reken met --atn-ratio (die de bijgesneden viewBox weerspiegelt), niet
       met de ruwe plaatverhouding — anders blijft er hoogte onbenut. De
       reserve is de ruimte voor het hint-ballonnetje eronder.

       De ondergrens van 30rem is er voor lage schermen: daar won de
       hoogtelimiet het van de beschikbare breedte en bleef er een postzegel
       over in een halflege kolom. Liever een toren die een stukje onder de
       vouw doorloopt — dat is meteen een hint dat er meer is. */
    max-width: min(
      100%,
      max( 30rem, calc((100vh - var(--at-header-h) - var(--tower-reserve, 5.5rem)) * (var(--atn-ratio))) )
    );
    /* Rechts van het midden, maar niet tegen de rand: de kaartjes die aan
       de rechterkant opkomen hebben daar hun ruimte nodig. */
    margin-left: auto;
    margin-right: clamp(1rem, 10vw, 10rem);
  }
}

/* Laag laptopscherm: minder gereserveerde ruimte onder de toren. De marge
   rechts blijft ongemoeid — die bepaalt waar de toren staat, niet hoe groot
   hij is (de kolom is breder dan de toren), dus daar valt niets te winnen en
   schoof hij alleen maar te ver naar de rand. */
@media (min-width: 1000px) and (max-height: 900px) {
  .at-hero__tower {
    --tower-reserve: 3rem;
    padding-bottom: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   SPOTLIGHT — de aandachtskaarten
   -------------------------------------------------------------------------- */
.at-spotlight__head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Kop met een gearceerde baan die de regel uitvult. */
.at-spotlight__titlerow {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.at-spotlight__title {
  flex: none;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  letter-spacing: -.03em;
}

.at-spotlight__titlerow .at-rule {
  --rule-h: clamp(1.4rem, 3vw, 2.4rem);
}

/* --------------------------------------------------------------------------
   BEDIENING — pijlen naast de kop, bolletjes eronder
   -------------------------------------------------------------------------- */
.at-spotlight__nav {
  flex: none;
  display: flex;
  gap: .5rem;
}
/* Op een telefoon veeg je; daar zijn de pijlen alleen maar in de weg. */
@media (max-width: 599px) {
  .at-spotlight__nav { display: none; }
}

.at-spotlight__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--at-r-sm);
  background: var(--at-surface);
  color: var(--at-text);
  cursor: pointer;
  transition:
    background-color .3s var(--at-ease-out),
    color .3s var(--at-ease-out),
    transform .3s var(--at-ease-out),
    opacity .3s linear;
}
.at-spotlight__arrow svg { width: 1.1rem; height: 1.1rem; }
.at-spotlight__arrow[data-spot-prev] svg { transform: rotate(180deg); }

@media (hover: hover) {
  .at-spotlight__arrow:hover:not(:disabled) {
    background: var(--at-accent);
    color: var(--at-accent-ink);
    transform: translate(2px, -2px);
  }
}
.at-spotlight__arrow:disabled { opacity: .3; cursor: default; }

.at-spotlight__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
}

.at-spotlight__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--at-border-2);
  cursor: pointer;
  transition:
    width .35s var(--at-ease),
    background-color .35s var(--at-ease-out);
}
.at-spotlight__dot[aria-selected='true'] {
  /* De actieve wordt een streepje: te zien zonder kleurverschil te hoeven
     onderscheiden. */
  width: 24px;
  background: var(--at-accent);
}
@media (hover: hover) {
  .at-spotlight__dot:hover { background: var(--at-text-2); }
}

/* --------------------------------------------------------------------------
   DE CARROUSEL

   Eén rij die opzij schuift in plaats van een raster dat steeds langer wordt:
   er kunnen zoveel kaarten in als de redactie wil. `--per` is het aantal
   kaarten dat tegelijk in beeld past; op een telefoon staat hij net boven de
   1, zodat de volgende kaart er half uitsteekt en meteen duidelijk is dat er
   meer is. Werkt zonder script — dan schuif je met de vinger of het trackpad.
   -------------------------------------------------------------------------- */
.at-spotlight__grid {
  --gap: clamp(.75rem, 1.5vw, 1.15rem);
  --per: 1.15;

  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Ruimte voor de schaduw en het optillen bij hover. */
  margin-inline: calc(var(--at-pad) * -1);
  padding-inline: var(--at-pad);
  padding-block: .25rem;
  /* Zonder dit klikt een kaart vast tegen de rand van het scherm in plaats
     van tegen de tekstkolom waar de kop ook op staat. */
  scroll-padding-inline: var(--at-pad);
}
.at-spotlight__grid::-webkit-scrollbar { display: none; }
.at-spotlight__grid:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 4px;
}

@media (min-width: 600px)  { .at-spotlight__grid { --per: 2.15; } }
@media (min-width: 900px)  { .at-spotlight__grid { --per: 3; } }
@media (min-width: 1200px) { .at-spotlight__grid { --per: 4; } }

.at-card {
  flex: 0 0 auto;
  width: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  min-width: 0;
  scroll-snap-align: start;
}

/* Een brede kaart neemt twee plekken in — behalve als er maar één tegelijk
   in beeld past, want dan zou hij niet meer passen. */
@media (min-width: 600px) {
  .at-card--wide { width: calc((200% - (var(--per) - 2) * var(--gap)) / var(--per)); }
}

.at-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: clamp(230px, 34vw, 400px);
  padding: clamp(.9rem, 2vw, 1.5rem);
  border-radius: var(--at-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--at-surface);
  transition: transform .6s var(--at-ease-out);
}

/* Eén kaart tegelijk in beeld: dan mag hij staand, anders wordt het een
   brede lage strook waar de foto niets van laat zien. */
@media (max-width: 599px) {
  .at-card__inner { min-height: min(115vw, 460px); }
}

@media (hover: hover) {
  .at-card__inner:hover { transform: translateY(-6px); }
}
.at-card__inner:active { transform: scale(.985); }

/* Media */
.at-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.at-card__img,
.at-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--at-ease-out), opacity .5s linear;
}
.at-card__video { position: absolute; inset: 0; opacity: 0; }

@media (hover: hover) {
  .at-card__inner:hover .at-card__img { transform: scale(1.06); }
  .at-card__inner:hover .at-card__video { opacity: 1; }
}

/* Neutrale was: alleen zwart. De foto houdt zijn eigen kleur, de tekst
   blijft leesbaar, en er komt geen tweede accentkleur bij. */
.at-card__wash {
  position: absolute;
  inset: 0;
  /* Zwaar genoeg dat ook een lichte foto de tekst niet opeet. */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .95) 0%,
    rgba(0, 0, 0, .72) 28%,
    rgba(0, 0, 0, .22) 62%,
    rgba(0, 0, 0, 0) 88%
  );
  opacity: .95;
  transition: opacity .55s var(--at-ease-out);
}
@media (hover: hover) {
  .at-card__inner:hover .at-card__wash { opacity: 1; }
}

/* Badge */
.at-card__badge {
  position: absolute;
  top: clamp(.75rem, 1.6vw, 1.15rem);
  left: clamp(.75rem, 1.6vw, 1.15rem);
  padding: .32rem .6rem;
  border-radius: var(--at-r-sm);
  background: var(--at-accent);
  color: var(--at-accent-ink);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Tekst */
.at-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.at-card__title {
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.025em;
}

.at-card__text {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-wrap: pretty;
}

/* De call to action als knop over de volle breedte van de kaart, onderin
   met de kaartpadding als lucht eromheen. De hele kaart is de link; de knop
   laat alleen zien dat er iets te klikken valt. */
.at-card__cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45em;
  margin-top: .9rem;
  padding: .8em 1em;
  border-radius: var(--at-r-sm);
  /* Grijs dat op elke foto werkt: wit met lage dekking pakt de kleur van de
     kaart eronder mee in plaats van er een tweede grijstint bovenop te leggen. */
  background: rgba(255, 255, 255, .14);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  transition: color .3s var(--at-ease-out);
}

/* Hetzelfde rood dat bij de knoppen van links inveegt. */
.at-card__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--at-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--at-ease);
}

.at-card__cta .at-btn__arrow {
  width: .9em;
  height: .9em;
  flex: none;
  transition: transform .35s var(--at-ease-out);
}

@media (hover: hover) {
  .at-card__inner:hover .at-card__cta { color: var(--at-accent-ink); }
  .at-card__inner:hover .at-card__cta::before { transform: scaleX(1); }
  .at-card__inner:hover .at-card__cta .at-btn__arrow { transform: translateX(.3em); }
}

/* Op een telefoon staat er één kaart in beeld, dus daar is ruimte zat — en
   daar wordt ook getikt. Tekst en knop mochten mee opschalen; op de maat van
   vier kaarten naast elkaar waren ze te klein om vlot te lezen of te raken. */
@media (max-width: 599px) {
  .at-card__title { font-size: 1.5rem; }

  .at-card__text {
    font-size: .95rem;
    line-height: 1.45;
  }

  .at-card__badge {
    padding: .42rem .75rem;
    font-size: .68rem;
  }

  .at-card__cta {
    margin-top: 1.1rem;
    padding: 1em 1.15em;
    font-size: .78rem;
    letter-spacing: .1em;
  }
  .at-card__cta .at-btn__arrow { width: 1.1em; height: 1.1em; }
}