/* ============================================================
   Natya — responsive overrides for inline-styled Design Components.
   Loaded once per page (cascades to imported header/footer/dock).
   Uses !important to win over inline styles inside media queries.
   ============================================================ */

/* Never let an image overflow its column */
.natya-page img { max-width: 100%; }

/* Stop a single wide child from sliding the whole page sideways. `clip` rather
   than `hidden` because hidden would make this a scroll container and break the
   sticky header inside it. */
.natya-page { overflow-x: clip; }

/* ---- Section-page hero: the h1 is covered by the fluid rule further down, the
   eyebrow and the italic tagline are not, and both crowd the edge on phones.

   A long tagline gets clipped two different ways and both are closed here: it can
   run past the right edge (capped by max-width, with a break-anywhere guard for a
   stray long token), and it can push the stack past the hero's fixed 300px, which
   `overflow: hidden` then cuts off the top — so the hero is allowed to grow. ---- */
.r-hero-tag { overflow-wrap: anywhere; }

/* The section heroes are `aspect-ratio: 16 / 4.5; min-height: 300px` inline. Once
   the min-height wins — every viewport under ~1067px — Chrome runs the ratio the
   other way and derives the WIDTH from that height (340px → 1209px), so the hero
   and everything in it lays out far wider than the screen and the headline never
   wraps. Pinning the inline size keeps the ratio height-only. */
.r-hero { width: 100% !important; }

@media (max-width: 600px) {
  .r-hero { height: auto !important; min-height: 340px !important; }
  .r-hero-eyebrow { font-size: 11px !important; letter-spacing: var(--tracking-wide) !important; }
  .r-hero-tag { font-size: clamp(15px, 4.4vw, 19px) !important; max-width: 34ch; }
}

/* ---- Consistent line-height system across the whole site ---- */
.natya-page h1, .natya-page h2, .natya-page h3, .natya-page h4 { line-height: 1.18; }
.natya-page p { line-height: 1.7; }
.natya-page li { line-height: 1.6; }

/* ---- Compact grids (amenity/feature lists, form rows): keep their own gap,
   just collapse to one column on narrow screens — never the image/text stacking ---- */
@media (max-width: 560px) { .r-list { grid-template-columns: 1fr !important; } }

/* ---- Destination articles — alternating 2-col like the in-house activities.
   Uses explicit nth-child ordering (not :has(img)) because the photo is an
   <image-slot> custom element with a shadow-DOM image that :has can't see. ---- */
.dest-article { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.dest-article:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.dest-article:nth-child(even) .dest-media { order: 2; }
@media (max-width: 860px) {
  .dest-article, .dest-article:nth-child(even) { grid-template-columns: 1fr !important; gap: 30px !important; }
  .dest-article .dest-media { order: -1 !important; }
}

/* ---- Two-column image/text sections: stack with IMAGE ON TOP ---- */
@media (max-width: 860px) {
  .r-2col {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: stretch !important;
  }
  .r-2col > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* the column that contains imagery (photo or carousel) moves above the text */
  .r-2col > *:has(img) { order: -1 !important; }
}

/* ---- Card grids: 3/4-up → 2-up → 1-up ---- */
@media (max-width: 900px) {
  .r-cards { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .r-cards { grid-template-columns: 1fr !important; }
}
/* When a 3-up (or odd-count) grid collapses to 2 columns, center the lone
   leftover item in the final row so the layout stays balanced.
   display:block override is required because <x-import> mounts render as
   display:contents (no box of their own) — without it grid-column/justify-self
   on the wrapper are ignored. width = one column (50% minus half the 32px gap). */
@media (min-width: 561px) and (max-width: 900px) {
  .r-cards > *:last-child:nth-child(odd) {
    display: block !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 16px) !important;
  }
}

/* ---- Fluid headings so nothing crops or wraps oddly ---- */
@media (max-width: 768px) {
  .natya-page h1 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.1 !important; }
  .natya-page h2 { font-size: clamp(25px, 6vw, 34px) !important; line-height: 1.16 !important; }
}

/* ---- Home "Our Collection" interactive showcase ---- */
@media (max-width: 1024px) {
  .collection-title { font-size: clamp(32px, 8.5vw, 48px) !important; }
}
@media (max-width: 1024px) {
  .collection-rail {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    /* full-bleed both edges: first card stays inset to match the title, but scrolled
       cards stay visible all the way to the left & right screen edges (not clipped) */
    margin-left: -32px !important;
    margin-right: -32px !important;
    padding: 12px 32px 44px 32px !important;
    scroll-padding-inline-start: 32px;
    scroll-snap-type: x proximity;
  }
  .collection-rail::-webkit-scrollbar { display: none; }
  .collection-card {
    flex: 0 0 auto !important;
    width: 216px !important;
    height: 200px !important;
    scroll-snap-align: start;
  }
}

/* ---- Calmer section padding on small screens ---- */
@media (max-width: 600px) {
  .natya-page section[style*="32px"],
  .natya-page article[style*="32px"],
  .natya-page main[style*="32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .natya-page section[style*="padding: 96px"],
  .natya-page section[style*="padding: 88px"],
  .natya-page section[style*="padding: 84px"],
  .natya-page section[style*="padding: 80px"],
  .natya-page main[style*="padding: 96px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---- Explicit hooks for paddings the substring-matchers above can't reach
   (shorthand where the large value isn't first, e.g. "padding: 40px 32px 88px",
   or off-list values like 140px/92px/72px). Apply per element in the template. ---- */
@media (max-width: 600px) {
  .r-pt { padding-top: 56px !important; }
  .r-pb { padding-bottom: 56px !important; }
  /* Card/panel interiors with 40–52px sides (inline padding on divs, so the
     section reducer never sees them) */
  .r-panel { padding: 32px 20px !important; }
}

/* ---- Fluid override for oversized h3s (the h1/h2 rule above skips them) ---- */
@media (max-width: 768px) {
  .r-h3 { font-size: clamp(24px, 7vw, 34px) !important; }
}