/* ---------------------------------------------------------------------------
   Responsive layer for the WhyRomania canvas export.

   The artboards are canvas exports: no classes, everything is an inline style
   attribute. So overrides here are keyed off inline-style substrings and need
   !important to beat the inline declarations. Match the RUNTIME-normalised
   attribute text (support.js rewrites it, e.g. "inset: 0px"), not the source.

   Do NOT put overflow-x:hidden on html/body: #section-hero uses position:sticky
   and an overflow container on an ancestor silently kills sticky.
--------------------------------------------------------------------------- */

/* 1. Cover-video wrappers clip their own iframe.
      The map iframes are deliberately oversized (min-width:177.78vh, i.e. 16:9
      relative to viewport HEIGHT) so the video always covers the box. The hero
      wrapper already has overflow:hidden; the masked map wrapper does not, so
      at phone/tablet widths that 1600px iframe drags the whole page sideways
      (page measured 995px wide at a 390px viewport). Masking is paint-time
      only and never clips layout, so the clip has to be explicit. */
div[style*="mask-image"] {
  overflow: hidden !important;
}

/* 2. Phone: hero copy no longer clipped.
      The hero box was a fixed height (100vh - 130px) with overflow:hidden, and
      the copy block inside is absolutely positioned against bottom:0, so it
      grows upward. On a phone the intro wraps to more lines and the block got
      taller than the box (725px vs 571px on an iPhone SE), so the top line was
      cut off. Fix: let the box grow to fit its copy (height:auto + min-height)
      and put the copy back in normal flow so it actually contributes height.
      The box becomes a flex column justified to the end, which keeps the
      bottom-anchored look on taller phones where the copy is shorter than the
      box. The video layer stays position:absolute inset:0, so it still covers.
      svh keeps this stable as mobile browsers show/hide their URL bar; the vh
      line above it is the fallback for older engines. */
@media (max-width: 767px) {
  #section-hero > div {
    height: auto !important;
    min-height: calc(100vh - 96px) !important;
    min-height: calc(100svh - 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  #section-hero > div > div[style*="z-index: 2"] {
    position: relative !important;
    bottom: auto !important;
  }
  #section-hero > div > div[style*="z-index: 2"] > div:first-child {
    padding-bottom: 16px !important;
  }
}

/* ===========================================================================
   Homepage, phone only (<=767px). Desktop and tablet are untouched.
   =========================================================================== */
@media (max-width: 767px) {

  /* --- Hero copy, restructured along the lines of Location.dc -------------
     Location's hero reads as a hierarchy: small eyebrow, one big bold line,
     then a single calm paragraph. The homepage instead had four <p> all at the
     same 21px, so on a phone they broke into eight ragged lines with no focal
     point. Same content, given that hierarchy: line 1 becomes the headline,
     lines 2-3 flow together as one paragraph (they are one sentence), line 4
     stays as the closing statement.
     The container is display:flex on desktop, and flex blockifies its children
     - "display: inline" on a flex item computes to block - so it has to become
     a block box here for lines 2 and 3 to flow into a single paragraph. */
  [data-hero-copy] {
    display: block !important;
    padding: 0 20px 22px !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }
  [data-hero-copy] img {
    height: 54px !important;
    margin: 0 auto 18px !important;
  }
  [data-hero-copy] p:nth-of-type(1) {
    font-family: 'Sarabun', sans-serif !important;
    font-size: clamp(21px, 6.2vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px !important;
  }
  /* one sentence, so let it wrap as one paragraph instead of two fixed lines */
  [data-hero-copy] p:nth-of-type(2),
  [data-hero-copy] p:nth-of-type(3) {
    display: inline !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  [data-hero-copy] p:nth-of-type(4) {
    display: block !important;
    margin: 14px 0 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* --- Hero quick links: three across, not stacked --------------------
     The row is flex-wrap:wrap, and each link's own padding plus its 22px
     title gave it a min-content width wider than a third of the screen, so
     all three wrapped onto separate lines. Letting them share the row
     equally (flex:1 1 0 + min-width:0, which releases the automatic
     min-content floor on a flex item) and scaling the type down keeps them
     side by side. */
  [data-hero-quicklinks] {
    flex-wrap: nowrap !important;
    padding: 18px 6px 20px !important;
  }
  [data-hero-quicklinks] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  [data-hero-quicklinks] > div > div:nth-child(1) {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 5px !important;
  }
  [data-hero-quicklinks] > div > div:nth-child(2) {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }
  [data-hero-quicklinks] > div > div:nth-child(3) {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  /* --- About: stack the meta line, ABOUT above ROMANIA, centred ----------- */
  [data-about-meta] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
  }
  [data-about-meta] > span:nth-child(1) { order: 2 !important; } /* ROMANIA, EST. 2024 */
  [data-about-meta] > span:nth-child(2) { order: 1 !important; } /* ABOUT */

  /* --- Destinations: no fixed background ---------------------------------
     background-attachment:fixed is effectively broken on mobile Safari and
     Chrome Android - the image is sized to the viewport rather than the
     element, so it renders zoomed and misaligned and never parallaxes. */
  [data-dest-bg] {
    background-attachment: scroll !important;
  }

  /* --- Interactive map: bigger Romania ------------------------------------
     The silhouette is ~1.46:1 but sat in a 4:3 frame, so mask-size:contain
     matched it by width and left dead space top and bottom. Narrowing the
     frame to 3:2 lets the same shape fill far more of the screen, and the
     reduced side padding buys it more width still. No cropping - contain
     still fits the whole outline. */
  [data-map-frame] {
    aspect-ratio: 123 / 84 !important;
  }
  section:has(> div > [data-map-frame]) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- Carousels: reveal the left arrow ----------------------------------
     Hidden by default in the markup; _syncCarouselArrow fades it in once the
     strip is scrolled or dragged away from the start. */
  [data-carousel-prev] {
    display: flex !important;
  }

  /* --- Footer menu columns fit a 360px screen -------------------------
     gap:clamp(32px,5vw,64px) floors at 32px, and three columns plus two
     32px gaps overran a 360px Android by a hair - enough for the whole page
     to scroll sideways. Tighten the gap and let the columns share the row. */
  [data-footer-nav] {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }

  /* --- Footer wordmark, dialled back -------------------------------------- */
  [data-footer-logo] {
    width: 180px !important;
  }
}