/* Noria home (desktop-home.jpg 1440, mobile-home.jpg 390). */
@layer components {
  /* Hero: mixed italic headline, lead, gold pill; arched photo collage with two badges. */
  .home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 2rem;
    max-width: var(--noria-page);
    margin-inline: auto;
    padding: 1.5rem var(--noria-gutter) 5rem clamp(var(--noria-gutter), 8vw, 7.1875rem);
  }

  .home-hero__text { position: relative; }

  .home-hero__title {
    margin: 0;
    font-size: var(--noria-text-hero);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;

    em, span { display: block; }
    em { font-weight: 500; }
  }

  /* Placed in em of the headline, so it stays beside "harmónie" at every width. */
  .home-hero__wave {
    position: absolute;
    top: 2.45em;
    left: 5.8em;
    font-size: var(--noria-text-hero);
    width: 2.05em;
    height: auto;
    aspect-ratio: 159.8 / 85.1;
    color: var(--noria-green);
  }

  .home-hero__lead {
    max-width: 23rem;
    margin: 1.5rem 0 2.25rem;
    font-size: var(--noria-text-lead);
    line-height: 1.34;
    letter-spacing: var(--noria-track-body);

    em { font-weight: 700; }
  }

  .home-hero__media {
    position: relative;
    aspect-ratio: 620 / 630;
  }

  .home-hero__arch {
    position: absolute;
    width: 60%;
    height: 82.5%;
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  }

  .home-hero__arch--front { top: 0; left: 6.6%; z-index: 1; background: #d3bfb3; overflow: hidden; }
  .home-hero__arch--back { top: 7.3%; right: 5%; }

  .home-hero__branch {
    position: absolute;
    left: 28%;
    top: 34%;
    width: 120%;
    height: auto;
    aspect-ratio: 441.2 / 370.5;
    color: var(--noria-sand-light);
  }

  .home-hero__badge {
    position: absolute;
    z-index: 2;
    height: auto;
  }

  .home-hero__badge--top { top: 2%; left: 0; width: 24.5%; }
  .home-hero__badge--bottom { right: 0; bottom: 0; width: 25.5%; }

  .home-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    translate: -50% 0;
    color: var(--noria-ink);
  }

  .home-hero__chevron { width: 1.625rem; height: auto; aspect-ratio: 25.8 / 15.8; }

  /* NORIA lockup between two gold lines, then the manifesto. */
  .home-manifesto {
    display: grid;
    justify-items: center;
    gap: 4.25rem;
    padding: var(--noria-section-gap) var(--noria-gutter) 0;
  }

  .home-manifesto__lockup {
    display: grid;
    grid-template-columns: 10rem auto 10rem;
    align-items: center;
    gap: clamp(2rem, 10vw, 9.125rem);
  }

  .home-manifesto__brand { margin: 0; line-height: 0; }

  .home-manifesto__rule { height: 2px; margin-bottom: 2.75rem; background: var(--noria-gold); }

  .home-manifesto__wordmark {
    width: 24.75rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 396.3 / 126.95;
    color: var(--noria-ink);
  }

  .home-manifesto__text {
    max-width: var(--noria-text-column);
    margin: 0;
    font-size: var(--noria-text-manifesto);
    line-height: 2;
    letter-spacing: 0.07em;
    text-align: center;
  }

  /* (NOVINKY): a row of tiles that runs off the right edge; it scrolls sideways (G-012 carousel, D-016). */
  .home-news {
    display: grid;
    gap: 3.5rem;
    padding-top: var(--noria-section-gap);
    overflow: hidden;
  }

  .home-news__title { text-align: center; }

  .home-news__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(26.3rem, 29.3vw);
    gap: 1.5625rem;
    margin: 0;
    padding: 0 var(--noria-gutter) 1rem 3.375rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3.375rem;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--noria-gold) transparent;
  }

  .home-news__item { scroll-snap-align: start; }

  /* Green brand band: the gold leaf and the brand text. */
  .home-band {
    display: grid;
    grid-template-columns: 13.125rem minmax(0, 40.625rem);
    justify-content: center;
    align-items: center;
    gap: 4.25rem;
    margin-top: 3rem;
    padding: 5.75rem var(--noria-gutter);
    background: var(--noria-green);
    color: var(--noria-sand);
  }

  .home-band__mark { width: 100%; height: auto; aspect-ratio: 57.5 / 35.4; color: var(--noria-gold); }

  .home-band__text {
    margin: 0;
    font-size: var(--noria-text-body);
    line-height: 2.6;
    letter-spacing: var(--noria-track-body);
    text-align: justify;
  }

  @media (max-width: 63.99rem) {
    .home-hero {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      padding: 0 var(--noria-gutter) 5rem;
      text-align: center;
    }

    .home-hero__media { order: -1; width: min(100%, 22rem); }
    .home-hero__wave { display: none; }
    .home-hero__lead { max-width: 18rem; margin-inline: auto; }
    .home-hero__scroll { position: static; translate: none; }
    .home-hero { gap: 1.75rem; }

    .home-band { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2rem; padding-block: 3.5rem; }
    .home-band__mark { width: 7.5rem; }
  }

  @media (max-width: 47.99rem) {
    /* The phone mock goes from the NORIA lockup straight to NOVINKY: no manifesto paragraph. */
    .home-manifesto { gap: 3rem; }
    .home-manifesto__text { display: none; }
    .home-manifesto__lockup { grid-template-columns: auto; }
    .home-manifesto__rule { display: none; }
    .home-manifesto__wordmark { width: 17rem; }
    .home-news { gap: 2rem; }
    .home-news__track { grid-auto-columns: min(21.625rem, 88%); gap: 0.875rem; padding-inline: var(--noria-gutter); scroll-padding-inline: var(--noria-gutter); }
    .home-band__text { line-height: 2.3; }
  }
}