/* Mobile-first: base rules live in style.css/components.css.
   These are additive enhancements for wider viewports only.
   Breakpoint values follow brand-system.md §7 (grid & spacing). */

@media (min-width: 640px) {
  .catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trigger-bar__list {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }

  .quiz__options {
    grid-template-columns: repeat(2, 1fr);
  }

  .quiz__contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .quiz__contact-form .btn-primary {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__title {
    font-size: var(--text-hero-size-desktop);
    line-height: var(--text-hero-line-desktop);
    max-width: 18ch;
  }

  .hero__subtitle {
    font-size: var(--text-lead-size);
    max-width: 46ch;
  }

  /* Literal brandbook spec (p.24): graphite gradient left-to-right,
     70%→0%, once the layout has room for text-left/photo-right. */
  .hero__media::after {
    background: linear-gradient(90deg, rgba(31, 37, 40, 0.82) 0%, rgba(31, 37, 40, 0.55) 55%, rgba(31, 37, 40, 0.25) 100%);
  }
}

/* Desktop container margins per brand grid spec: 80px vs 20px mobile
   (already the mobile default via --container-padding-mobile). */
@media (min-width: 1024px) {
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }

  .section {
    padding: var(--section-spacing-desktop) 0;
  }

  /* See components.css .catalog comment — kept tight after the trigger
     bar on desktop too, instead of the full 120px section spacing. */
  .catalog {
    padding-top: var(--space-7);
  }

  .site-header__inner {
    min-height: 72px;
  }
}

/* =====================================================================
   FUNNEL — first screen (desktop)
   One photograph across the whole screen, the offer written on top of
   its left side. The brandbook's left-to-right graphite gradient (p.24)
   is what makes that readable: it is heavy under the text and thins out
   towards the right, so the frame stays a single image instead of
   splitting into a dark panel beside a picture.
   ===================================================================== */

@media (min-width: 900px) {
  /* The first screen is exactly the window minus the fixed header, so
     the photograph fills what the visitor sees and nothing more. */
  .page-funnel .hero {
    min-height: calc(100svh - var(--funnel-header-h));
    align-items: center;
  }

  .page-funnel .hero__media img {
    /* Full strength. Legibility comes from the gradient below, which
       darkens only the left-hand band the copy occupies. */
    opacity: 1;
  }

  /* ---- Header: full lockup on the first screen, monogram after ----
     The bar's reserved space (--funnel-header-h, set on the body in
     components.css) stays 112px whatever state it is in; only the bar's
     own height changes, so nothing under it moves when the mark swaps. */
  /* A compact bar: 84px, monogram 52px wide (37px tall) with 23px of air
     above and below. The bar used to be 112px with the stacked lockup,
     which cost the first screen a quarter of its height. */
  body:has(.page-funnel) {
    --funnel-header-h: 84px;
  }

  body:has(.page-funnel) .site-logo__monogram { width: 52px; }

  /* Nothing to shrink on scroll any more — the bar is already compact,
     and a height change would only make the page twitch. */
  body:has(.page-funnel) .site-header.is-scrolled {
    height: var(--funnel-header-h);
  }

  /* Graphite poured in from the left: opaque enough behind the headline
     to hold ivory text at full contrast, gone by the right edge so the
     sea, the sun path and the pool stay plainly visible. No panel, no
     box, no hard edge anywhere — only this ramp. */
  /* Desktop: graphite poured in from the LEFT only, under the column
     that carries the copy. It is gone by the middle of the frame, so the
     bay, the water and the far shore keep their colour — and so does the
     photographer's mark in the bottom-right corner. */
  .page-funnel .hero__media::after {
    background: linear-gradient(97deg,
      rgba(31, 37, 40, 0.95) 0%,
      rgba(31, 37, 40, 0.93) 30%,
      rgba(31, 37, 40, 0.86) 44%,
      rgba(31, 37, 40, 0.52) 55%,
      rgba(31, 37, 40, 0.16) 68%,
      rgba(31, 37, 40, 0) 84%);
  }

  /* Desktop needs no gradient of its own: the image already carries a
     left-hand ramp wide enough for this column. */
  /* The first screen is a two-column grid, not a column with a panel
     floated over it: the copy on the left, the three gifts on the
     right, both laid out by the same grid so neither can be pushed off
     the screen or clipped. */
  .page-funnel .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: var(--space-5);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--container-padding-desktop);
  }

  /* The photograph carries its own left-hand ramp on a desktop, so the
     copy needs no scrim of its own. */
  .page-funnel .hero__inner::before {
    content: none;
  }

  /* Everything except the panel belongs to the left column. */
  .page-funnel .hero__inner > * {
    grid-column: 1;
  }

  .page-funnel .gifts-teaser {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }

  .page-funnel .hero__cta {
    align-self: flex-start;
    min-width: 280px;
  }

  .page-funnel .hero__rate {
    align-self: flex-start;
    max-width: 420px;
  }

  /* ---- Gifts teaser: the empty right half of the first screen ----
     Out of the text column and into the space the photograph leaves,
     low enough to clear the headline and to the right of the CTA. It is
     a note on the offer, not a second offer: no button, no descriptions,
     and it stops well short of the pool and the horizon. */
  /* Placed by the grid above, not pinned to an edge — so it cannot end
     up half below the fold. */
  .page-funnel .gifts-teaser {
    position: static;
    width: auto;
    margin-top: 0;
    padding: var(--space-3);
    backdrop-filter: blur(2px);
  }

  /* The panel carries its own scrim over the photograph, so the render
     underneath it can stay quiet. */
  .page-funnel .gifts-teaser__media img {
    opacity: 0.7;
  }

  /* ---- Gifts on the result screen: three across ---- */
  .page-funnel .gifts__list {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .page-funnel .gift {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .page-funnel .gift__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  /* Delivery lines sit on the same baseline across the three cards. */
  .page-funnel .gift__delivery {
    margin-top: auto;
    padding-top: var(--space-2);
  }

  /* The selector keeps the same measure as the hero text, so scrolling
     from one to the other feels like one interface rather than two
     pages. The result screen is the exception: it puts the summary in
     the space to the right of the card, so it is allowed to be wider. */
  .page-funnel .quiz-section .container > * {
    max-width: 720px;
  }

  .page-funnel .quiz-section .container > #quiz-root:has(.quiz__layout) {
    max-width: 1080px;
  }

  /* ---- Result: card left, the visitor's own answers right ----
     The summary comes first in the markup (that is its place on a
     phone); `order` moves it right here without changing the reading
     order. It sticks while the long form scrolls past — with a top
     offset that clears the scrolled header, so nothing overlaps. */
  .page-funnel .quiz__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .page-funnel .quiz__layout-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Both occupants of the right column share one box, so swapping one
     for the other cannot move the questions on the left. */
  .page-funnel .answers-summary,
  .page-funnel .specialist {
    order: 2;
    flex: 0 0 280px;
    position: sticky;
    top: 84px;
    margin-bottom: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--color-border-on-dark);
    padding-left: var(--space-3);
  }

  .page-funnel .specialist {
    display: block;
  }

  /* Nothing to collapse when there is room to show it: the toggle
     leaves the page entirely rather than sitting there inert. */
  .page-funnel .answers-summary__toggle {
    display: none;
  }

  /* Author rule beats the UA's `[hidden] { display: none }`, so a panel
     the visitor closed on a phone is still open on a wide screen. */
  .page-funnel .answers-summary__body[hidden] {
    display: block;
  }

  .page-funnel .answers-summary__body {
    padding-bottom: 0;
  }

  /* ---- Renders: one large frame, four beneath it ----
     No scrolling on a desktop: a swipe strip on a mouse is a row the
     visitor cannot reach the end of. The lead image runs the full
     measure of the card; the other four share one row under it, all at
     one height so the block reads as a single composition rather than
     four more pictures. */
  .page-funnel .renders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    overflow: visible;
  }

  .page-funnel .renders__item:first-child {
    grid-column: 1 / -1;
  }

  .page-funnel .renders__item:first-child img {
    height: 340px;
  }

  .page-funnel .renders__item img {
    height: 130px;
  }
}

/* =====================================================================
   SHORT DESKTOP WINDOWS

   A 1366×768 browser leaves roughly 640px of first screen once the bar
   and the chrome are accounted for. Rather than let the gift panel or
   the calculation fall below the fold, the spacing tightens — the type
   sizes agreed earlier are left alone.

   Below that, the hero simply grows with its content and the page
   scrolls: a first screen that cuts a block in half is worse than one
   that is a little taller than the window.
   ===================================================================== */

@media (min-width: 900px) and (max-height: 960px) {
  .page-funnel .hero {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .page-funnel .hero__title {
    font-size: clamp(2.5rem, 1.4rem + 1.8vw, 3.25rem);
    margin-bottom: var(--space-1);
  }

  .page-funnel .hero__subtitle {
    margin-bottom: var(--space-2);
  }

  .page-funnel .hero__rate {
    margin-top: var(--space-2);
    padding-top: var(--space-1);
  }

  /* The calculation loses its vertical air, not its figures. */
  .page-funnel .hero__fx {
    margin-top: var(--space-1);
  }

  .page-funnel .hero__fx-heading {
    margin-bottom: 2px;
  }

  .page-funnel .hero__fx-difference {
    margin-top: 6px;
    padding-top: 6px;
  }

  .page-funnel .hero__fx-note {
    margin-top: 4px;
  }

  .page-funnel .gifts-teaser {
    padding: var(--space-2) var(--space-3);
  }

  .page-funnel .gifts-teaser__list {
    gap: var(--space-1);
  }
}

/* =====================================================================
   WIDE DESKTOP

   The offer reads best as two lines — "Таиланд." and the sentence under
   it. That needs about 830px of measure at this size, which only exists
   once the window is wide enough to widen the content column.
   ===================================================================== */

@media (min-width: 1600px) {
  .page-funnel .hero__inner {
    max-width: 1480px;
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .page-funnel .hero__title {
    max-width: none;
  }
}

/* A 768px-tall window is the tightest desktop case in common use. A few
   pixels of headroom here is the difference between a first screen that
   ends cleanly and one that cuts the caveat in half. */

@media (min-width: 900px) and (max-height: 800px) {
  .page-funnel .hero {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  /* The headline keeps its role: 46px is the floor here, and the space
     is found in the gaps instead. */
  .page-funnel .hero__title {
    font-size: clamp(2.875rem, 1.6rem + 1.6vw, 3.25rem);
  }

  .page-funnel .hero__subtitle {
    margin-bottom: var(--space-1);
    max-width: 40ch;
  }

  .page-funnel .hero__fx-rows {
    gap: 0;
  }

  .page-funnel .hero__fx-row {
    line-height: 1.3;
  }

  .page-funnel .hero__fx-note {
    line-height: 1.4;
  }

  .page-funnel .hero__rate {
    margin-top: var(--space-1);
  }

  .page-funnel .hero__fx-note {
    margin-top: 3px;
  }
}