@layer pages {
  /* ================================================================ Hero
     Goodyear's full-height hero: a dark photographic scene, a left-aligned condensed
     headline, one short line of support and the tyre holding the right side.
     No load animations (client feedback). */
  .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: max(40rem, 100svh);
    padding-top: calc(var(--utility-h) + var(--nav-h));
    padding-bottom: var(--space-2xl);
    overflow: hidden;
    background: var(--navy-deep);
    color: #fff;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The pit lane photo keeps its tyres (right third) in view when narrower windows crop it. */
    object-position: 80% 50%;
  }

  /* Navy grade over the photo: strong on the text side, lighter where the tyre sits. */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(6 18 46 / 0.94) 0%, rgb(6 18 46 / 0.82) 34%, rgb(6 18 46 / 0.38) 68%, rgb(6 18 46 / 0.2) 100%),
      linear-gradient(0deg, rgb(6 18 46 / 0.7) 0%, rgb(6 18 46 / 0) 42%);
  }

  .hero__inner {
    position: relative;
  }

  /* Client feedback: the headline runs on two lines, as big as that allows. The longest line of
     the current titles (Russian "ПОЕЗДКУ НЕЗАБЫВАЕМОЙ") is about 8.4em wide: the size follows the
     viewport so it still fits the container, and 9em caps the measure so English breaks too. */
  .hero__title {
    max-width: 9em;
    font-size: clamp(2.45rem, 8.42vw, 8.9rem);
    line-height: 0.92;
    overflow-wrap: normal;
  }

  .hero__lead {
    max-width: 44ch;
    margin-top: var(--space-m);
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
    margin-top: var(--space-xl);
  }

  .hero__actions .link-cta {
    color: #fff;
    font-size: var(--fs-body-l);
  }

  @media (max-width: 64rem) {
    .hero {
      align-items: flex-start;
      min-height: max(38rem, 100svh);
      padding-top: calc(var(--nav-h) + var(--space-xl));
    }

    .hero__photo {
      object-position: 86% 50%;
    }

    .hero__media::after {
      background:
        linear-gradient(180deg, rgb(6 18 46 / 0.9) 0%, rgb(6 18 46 / 0.72) 55%, rgb(6 18 46 / 0.45) 100%);
    }
  }

  /* Phones: the headline sits at the foot of the photo and the next section peeks above the fold,
     instead of a screen-tall hero with an empty band under the buttons. */
  @media (max-width: 48rem) {
    .hero {
      align-items: flex-end;
      min-height: min(100svh, 42rem);
      padding-bottom: var(--space-xl);
    }

    .hero__media::after {
      background: linear-gradient(180deg, rgb(6 18 46 / 0.45) 0%, rgb(6 18 46 / 0.75) 40%, rgb(6 18 46 / 0.95) 100%);
    }

    .hero__actions {
      margin-top: var(--space-l);
    }
  }

  /* Compact header (phones, tablets): the hero's own «Подобрать шины» is right there, so the header
     drops its round finder button (client feedback). */
  @media (max-width: 64rem) {
    .page-home .site-header__finder {
      display: none;
    }
  }

  @media (max-width: 36rem) {
    /* Phones: the longest word ("SAYOHATINGIZNI", "НЕЗАБЫВАЕМОЙ", ~5.3em) still fits one line. */
    .hero__title {
      font-size: min(12.15vw, 3.25rem);
    }

    /* The full-width button with «Смотреть каталог» centred under it. */
    .hero__actions {
      justify-content: center;
    }

    .hero__actions .btn {
      width: 100%;
    }
  }

  /* ================================================================ Top tyres */
  .top-tires__head {
    max-width: 60rem;
  }

  .top-tires__grid {
    margin-top: var(--space-l);
  }

  .top-tires__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
  }

  /* ================================================================ FAQ */
  .faq {
    padding-bottom: 0;
  }

  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: var(--space-xl) var(--space-3xl);
    align-items: start;
  }

  .faq__intro {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-l));
    display: grid;
    justify-items: start;
    gap: var(--space-m);
  }

  .faq__lead {
    max-width: 24ch;
  }

  .faq__list h3 {
    font-size: inherit;
    letter-spacing: normal;
  }

  @media (max-width: 64rem) {
    .faq__inner {
      grid-template-columns: 1fr;
    }

    .faq__intro {
      position: static;
    }
  }

  /* ================================================================ Admin hero preview
     Контент → Главная shows this page in a scaled iframe (/?hero-preview): a still first screen. */
  [data-hero-preview] {
    overflow: hidden;
  }

  [data-hero-preview] body {
    pointer-events: none;
    user-select: none;
  }
}