/* De hero staat op licht, zoals de rest van het merk: zwarte kop met
   het paars-blauwe verloop in de accentregel. Het donkere promptvak
   is het enige zware element -- dat maakt het meteen het brandpunt,
   net als de dashboardschermen in de huisstijl. */

@layer components {
  .hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-2xl);
    background: var(--gradient-light);
    isolation: isolate;
  }

  /* Twee zachte lichtvlekken in merkkleur, achter alles. */
  .hero::before,
  .hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.3;
  }

  .hero::before {
    top: -20rem;
    left: -14rem;
    background: radial-gradient(circle, #7c3aed 0%, transparent 65%);
  }

  .hero::after {
    right: -16rem;
    bottom: -24rem;
    background: radial-gradient(circle, #06b6d4 0%, transparent 65%);
  }

  .hero__head {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
  }

  /* Net onder --step-5: op die maat brak de kop in vier regels. Zo
     valt hij op breed scherm in twee: de zwarte zin en de accentregel. */
  .hero h1 {
    font-size: clamp(2.49rem, 1.9rem + 2.4vw, 4.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  /* De accentregel is een eigen regel: "Meer opens. Meer kliks." en
     daaronder "Volledig uit Nederland". De regelval is daarmee een
     besluit, niet een toeval van de tekstbreedte. */
  .hero__accent {
    display: block;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__lede {
    margin-block-start: var(--space-m);
    margin-inline: auto;
    color: var(--color-muted);
    font-size: var(--step-1);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: center;
    margin-block-start: var(--space-l);
  }

  .hero__note {
    margin-block-start: var(--space-s);
    margin-inline: auto;
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Eén samengesteld productbeeld in plaats van losse stickers: de
     promptkaart is het anker, de kaartjes eromheen schuiven er op een
     breed scherm half achter (zie de media query onder). */
  .hero__stage {
    display: grid;
    gap: var(--space-m);
    margin-block-start: var(--space-xl);
    align-items: center;
  }

  .hero__aside {
    display: grid;
    gap: var(--space-m);
    align-content: center;
  }

  .hero__prompt {
    padding: var(--space-m);
    border-radius: var(--radius);
    background: var(--gradient-dark);
    box-shadow: var(--shadow-float);
    color: #ffffff;
  }

  .hero__prompt-label {
    color: #c4b5fd;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero__prompt-text {
    margin-block: var(--space-2xs) var(--space-m);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    /* Ruimte voor twee regels, zodat de knoppen niet op en neer
       springen terwijl de zin zichzelf typt. */
    min-height: calc(2 * 1.35em);
  }

  /* De knipperende cursor achter de voorbeeldprompt. */
  .hero__caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-inline-start: 2px;
    background: #a78bfa;
    vertical-align: -0.15em;
    animation: hero-caret 1.1s steps(2, jump-none) infinite;
  }

  @keyframes hero-caret {
    50% { opacity: 0; }
  }

  .hero__prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  @media (min-width: 62rem) {
    .hero__stage {
      grid-template-columns: minmax(0, 1fr) minmax(26rem, 33rem) minmax(0, 1fr);
      gap: 0;
    }

    .hero__prompt {
      position: relative;
      z-index: 1;
      padding: var(--space-l);
    }

    /* De kaartjes zweven BÓVEN de rand van het donkere vlak, niet
       eronder: wit op donker met hun eigen schaduw, en de inhoud
       blijft volledig leesbaar. De overlap blijft binnen de padding
       van de promptkaart (--space-l), dus tekst en knoppen daarin
       raken nooit bedekt. */
    .hero__aside {
      position: relative;
      z-index: 2;
    }

    .hero__aside--left .mock:first-child {
      margin-inline-end: -1.25rem;
      transform: translateY(-0.75rem);
    }

    .hero__aside--left .mock:last-child {
      width: 82%;
      justify-self: end;
      margin-inline-end: -1rem;
      transform: translateY(0.75rem);
    }

    .hero__aside--right .mock:first-child {
      margin-inline-start: -1.25rem;
      transform: translateY(-0.75rem);
    }

    .hero__aside--right .mock:last-child {
      width: 82%;
      justify-self: start;
      margin-inline-start: -1rem;
      transform: translateY(0.75rem);
    }

    /* De tegelkaart rechtsboven houdt zijn twee-bij-twee: auto-fit
       maakte er drie-plus-één van zodra de kolom smaller werd. */
    .hero__aside .mock__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Onder de breekgrens vervalt de overlap: de kaartjes worden een
     horizontale rij die je opzij kunt schuiven. */
  @media (max-width: 62rem) {
    .hero__aside {
      grid-auto-flow: column;
      grid-auto-columns: minmax(15rem, 1fr);
      gap: var(--space-s);
      overflow-x: auto;
      padding-block-end: var(--space-2xs);
      scrollbar-width: none;
    }
  }
}