/* The Lane House — shared mobile overrides (loaded from every page's helmet).
   Media queries can't live inline; everything here only adjusts layout below 900/760px. */
@media (max-width: 900px) {
  [data-desktop-nav] { display: none !important; }
}
/* Booking bar: desktop keeps the hero-bottom overlay; mobile is sticky (see below) */
@media (min-width: 761px) {
  div[data-bkwrap] > div[id="booking"] { position: absolute !important; left: 0; right: 0; top: 560px; bottom: auto !important; transform: translateY(-100%); }
  /* Deals: sticky from the hero, parks inside "Choose your dates" */
  div[data-bkwrap] > div[id="booking"][data-sticky-park] { position: sticky !important; left: auto; right: auto; top: auto; bottom: 0 !important; transform: none; }
}
@media (max-width: 760px) {
  /* Deals offer rows: full-width CTA, label left / value right */
  div[data-offer-action] { max-width: none !important; min-height: 0 !important; gap: 20px !important; }
  div[data-offer-facts] { gap: 8px !important; }
  div[data-offer-action] > a { align-self: stretch !important; text-align: center; justify-content: center; }
  div[data-offer-fact] { flex-direction: row !important; justify-content: space-between; align-items: baseline; gap: 16px !important; }
  /* Deals hero: match the .fig mobile type scale */
  div[data-deals-hero] { gap: 18px !important; padding: 104px 20px 32px !important; }
  div[data-deals-hero] h1 { white-space: normal !important; font-size: 26px !important; line-height: 34px !important; letter-spacing: 2.2px !important; }
  div[data-deals-hero] p { font-size: 15px !important; line-height: 25px !important; }
}
@media (max-width: 760px) {
  /* Booking bar (non-Home pages): sticky from hero, parks before the newsletter */
  div[data-bkwrap] > div[id="booking"] { padding: 0 28px 24px !important; margin-top: 18px; }
  /* Deals: tighten the "Choose your dates" stack on mobile */
  section[data-screen-label="Choose your dates"] { padding-top: 32px !important; padding-bottom: 24px !important; }
  section[data-screen-label="Choose your dates"] > div[data-reveal] { gap: 20px !important; padding: 0 !important; }
  section[data-screen-label="Choose your dates"] a[data-mob-only] { width: calc(100% - 24px) !important; margin: 4px auto 0 !important; }
  /* Deals: "Talk to us" link is desktop-only; mobile gets the Enquire Here button */
  a[data-desk-only] { display: none !important; }
  a[data-mob-only] { display: flex !important; }
  /* Deals: same appear/park behaviour as the other pages (no hero-overlay pull) */
  div[data-bkwrap] > div[id="booking"][data-sticky-park] { margin-top: 18px !important; margin-bottom: 0 !important; }
  section[data-screen-label="Choose your dates"] > div > div[style*="height:100px"],
  section[data-screen-label="Choose your dates"] > div > div[style*="height: 100px"] { display: none !important; }
  /* Home booking bar (sticky, outside data-bkwrap): same side/bottom margins as other pages */
  div[id="booking"] { padding: 0 28px 24px !important; }
  /* Booking mask fills the safezone width on every page (same as Home) */
  div[id="booking"] > div { width: 100% !important; display: block !important; }
  /* 560px band heroes (Stay, Deals, room pages): image on top, booking bar in flow below */
  section[data-screen-label="Hero"][style*="560px"] { height: auto !important; background: #140305 !important; display: flex !important; flex-direction: column !important; }
  section[data-screen-label="Hero"][style*="560px"] > img { position: relative !important; inset: auto !important; width: 100% !important; height: 110vw !important; max-height: 640px; }
  section[data-screen-label="Hero"][style*="560px"] > div[id="booking"] { position: relative !important; inset: auto !important; padding: 18px 28px 28px !important; }
  /* Home hero: text block back into flow above the booking bar */
  section[data-screen-label="Hero"] > div[style*="184px"] { position: static !important; padding: 28px 28px 28px !important; }
  /* Tighter side gutters + reduced vertical rhythm between sections */
  section:not([data-screen-label="Hero"]) { padding-left: 28px !important; padding-right: 28px !important; padding-top: 40px !important; padding-bottom: 40px !important; }
  /* Uniform 32px gap between hero and first content section */
  div[data-bkwrap] > section[data-screen-label="Hero"] + section { padding-top: 32px !important; }
  footer { padding-left: 28px !important; padding-right: 28px !important; }
  div[style*="1320px"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* Amenities: first 5 shown, rest fade in on scroll */
  section[data-screen-label="Whats in every room"] div[style*="grid"] > div:nth-child(n+6) { display: none; }
  section[data-screen-label="Whats in every room"] div[style*="grid"].amx-open > div:nth-child(n+6) { display: flex; animation: amxfade .7s cubic-bezier(0.16,1,0.3,1) both; }
  section[data-screen-label="Whats in every room"] div[style*="grid"].amx-open > div:nth-child(n+9) { animation-delay: .15s; }
  section[data-screen-label="Whats in every room"] div[style*="grid"].amx-open > div:nth-child(n+12) { animation-delay: .3s; }
  /* Amenity grids: 2 columns, icon above label, centered */
  div[style*="grid-auto-flow"], section[data-screen-label="Whats in every room"] div[style*="minmax(230px"] { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-flow: row !important; grid-template-rows: none !important; column-gap: 20px !important; row-gap: 28px !important; }
  div[style*="grid-auto-flow"] > div, section[data-screen-label="Whats in every room"] div[style*="minmax(230px"] > div { flex-direction: column !important; align-items: center !important; gap: 10px !important; text-align: center; }
  div[style*="grid-auto-flow"] > div > svg, section[data-screen-label="Whats in every room"] div[style*="minmax(230px"] > div > svg { width: 28px !important; height: 28px !important; }
  div[style*="grid-auto-flow"] > div > span, section[data-screen-label="Whats in every room"] div[style*="minmax(230px"] > div > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; font-size: 14px !important; line-height: 18px !important; }
  section[data-screen-label="Guest quotes"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* Other available rooms: shorter cards on mobile */
  section[data-screen-label="Other rooms"] a[data-card-link] { height: 300px !important; }
  /* Large fixed headings */
  div[style*="font-size: 48px"], div[style*="font-size:48px"] { font-size: 34px !important; }
  h1[style*="56px"] { font-size: 30px !important; line-height: 1.15 !important; }
  /* Footprint / Bed / Sleeps triplets */
  div[style*="1fr 1fr 1fr"] > div > div[style*="22px"] { font-size: 15px !important; white-space: normal !important; }
  /* Home hero: media banner on top (mirrors desktop), copy on solid ground below */
  section[data-mobile-stack] { min-height: 0 !important; background: #140305 !important; justify-content: flex-start !important; }
  section[data-mobile-stack] [data-hero-media] { position: relative !important; inset: auto !important; width: 100% !important; height: 110vw !important; max-height: 640px; }
  section[data-mobile-stack] > div[style*="431px"] { display: none !important; }
  section[data-mobile-stack] [data-hero-copy] { position: static !important; padding: 32px 28px 28px !important; pointer-events: auto !important; }
  /* Footer (mobile only): Visit + Guest Information side by side, left aligned */
  footer div[style*="flex: 1 1 300px"], footer div[style*="flex:1 1 300px"] { justify-content: flex-start !important; }
  footer div[style*="199px"] { width: calc(50% - 16px) !important; }
  footer div[style*="199px"] * { text-align: left !important; }
  footer div[style*="199px"] > div { align-items: flex-start !important; }
  /* Footer (mobile only): centre logo / contact / social block */
  footer div[style*="flex:0 1 397px"], footer div[style*="flex: 0 1 397px"] { align-items: center !important; text-align: center !important; }
  footer div[style*="397px"] > img { margin-left: auto !important; margin-right: auto !important; }
  footer div[style*="397px"] > div { align-items: center !important; justify-content: center !important; }
  /* Guest info: reception hours drop to their own line */
  footer span[data-rline] { display: block; }
  /* Footer bottom row: © left, Privacy · Terms right on one line */
  footer div[style*="border-top:1px solid #681A2D"] { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  footer div[style*="border-top:1px solid #681A2D"] span { white-space: nowrap; text-align: center !important; }
  /* Home Rejuvenate block: left-align on mobile */
  #rejuvenate div, #rejuvenate p { text-align: left !important; }
  #rejuvenate > div { align-items: flex-start !important; }
  /* No sideways page scroll on mobile */
  html, body { overflow-x: hidden !important; }
  /* Rest + Deals listings: image always above text, tighter grouping */
  section[data-screen-label="Rooms"] > div[data-reveal],
  section[data-screen-label="Offers"] > div[data-reveal] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 22px !important; padding: 36px 0 !important; }
  section[data-screen-label="Rooms"] > div[data-reveal] > div,
  section[data-screen-label="Offers"] > div[data-reveal] > div { flex: 0 0 auto !important; min-height: 0 !important; }
  section[data-screen-label="Rooms"] div[style*="gap: 80px"], section[data-screen-label="Rooms"] div[style*="gap:80px"],
  section[data-screen-label="Offers"] div[style*="gap: 80px"], section[data-screen-label="Offers"] div[style*="gap:80px"] { gap: 24px !important; }
  [style*="gap: 128px"], [style*="gap:128px"] { gap: 48px !important; padding-top: 64px !important; padding-bottom: 56px !important; }
  [style*="padding: 120px 48px"], [style*="padding:120px 48px"] { padding: 64px 28px !important; }
  /* Room pages: tighten gap between hero and overview */
  section[data-screen-label="Image gallery"] { padding-top: 48px !important; padding-bottom: 40px !important; }
  section[data-screen-label="Room overview"] { padding-top: 32px !important; }
  section[data-screen-label="Room overview"] > div[style*="flex:1 1 400px"], section[data-screen-label="Room overview"] > div[style*="flex: 1 1 400px"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Hero headlines: tighter height */
  h1[style*="clamp(34px"] { font-size: 30px !important; line-height: 1.15 !important; }
  /* Room page titles (Deluxe Studio etc.): match Studio's 30px, centered */
  h1[style*="clamp(40px"] { font-size: 30px !important; line-height: 1.15 !important; text-align: center !important; }
  h1[style*="68px"] { font-size: 30px !important; line-height: 1.2 !important; text-align: center !important; }
  /* Stay length showcase: compact on mobile */
  section[data-screen-label="Stay length"] { min-height: 0 !important; }
  section[data-screen-label="Stay length"] > div[style*="100px"] { padding: 56px 28px !important; }
  /* Rest page: full-width room CTAs */
  section[data-screen-label="Rooms"] div[style*="gap: 32px"], section[data-screen-label="Rooms"] div[style*="gap:32px"] { flex-direction: column !important; gap: 12px !important; align-self: stretch !important; width: 100%; }
  section[data-screen-label="Rooms"] div[style*="gap: 32px"] a, section[data-screen-label="Rooms"] div[style*="gap:32px"] a { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 17px 18px !important; box-sizing: border-box !important; }
  /* All CTA buttons: full width on mobile (same treatment as Rest page) */
  a[style*="padding:9.5px 18px"] { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 17px 18px !important; box-sizing: border-box !important; text-align: center !important; }
  div[data-screen-label="Header"] a[style*="padding:9.5px 18px"] { display: inline-block !important; width: auto !important; padding: 9.5px 18px !important; }
  /* Recreate: stack the place cards in one column */
  div[style*="repeat(3, 1fr)"], div[style*="repeat(3,1fr)"] { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  /* Recreate: smaller marquee images */
  div[style*="lane-marquee"] img { width: 280px !important; height: 187px !important; }
  /* Full-height heroes (Recreate, Rejuvenate, What's On, Contact): image band on top, copy pushed below */
  section[data-mobile-stack] > div[data-hero-grad] { display: none !important; }
  section[data-mobile-stack] [data-hero-copy] { gap: 22px !important; width: 100% !important; box-sizing: border-box !important; }
  /* Rejuvenate: mobile-compressed hero video swaps in for the desktop file */
  video[data-hero-vid="d"] { display: none !important; }
  video[data-hero-vid="m"] { display: block !important; }
  /* Rejuvenate: Lane Club mark sits on the hero band, not in the copy stack */
  section[data-mobile-stack] [data-mobile-logo] { display: flex !important; }
  section[data-mobile-stack] [data-flow-logo] { display: none !important; }
  /* What's On / Contact: hero booking mask gives way to the sticky one */
  [data-hide-mobile] { display: none !important; }
  div[data-mbook] { display: block !important; padding: 0 28px 24px !important; margin-top: 18px; }
  div[data-mbook] > div { width: 100% !important; display: block !important; }
  /* What's On / Melbourne: shorter city cards */
  section[data-screen-label="Melbourne"] div[style*="height: 380px"],
  section[data-screen-label="Melbourne"] div[style*="height:380px"] { height: 240px !important; }
  /* Recreate precinct block: inner copy keeps the standard 28px gutters */
  section[data-screen-label="Bennetts Lane precinct"] > div[style*="padding: 0px 48px"],
  section[data-screen-label="Bennetts Lane precinct"] > div[style*="padding:0 48px"] { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; align-self: stretch !important; }
  /* Section CTAs (Learn more, Explore The Lane Club, Book offer, Plan your stay): full width */
  a[style*="padding: 9.5px 18px"][style*="font-size: 15px"],
  a[style*="padding:9.5px 18px"][style*="font-size:15px"] {
    display: flex !important; justify-content: center !important; align-items: center !important;
    width: 100% !important; padding: 17px 18px !important; box-sizing: border-box !important; text-align: center !important;
  }
  /* What's On / Latest: carousel dots sit directly under the image, copy below */
  section[data-screen-label="Latest"] > div { gap: 24px !important; }
  section[data-screen-label="Latest"] div[data-latest-row] { display: contents !important; }
  section[data-screen-label="Latest"] div[data-latest-row] > div { flex: 0 0 auto !important; max-width: none !important; }
  section[data-screen-label="Latest"] div[data-latest-row] > div:first-child { order: 1; }
  section[data-screen-label="Latest"] div[data-latest-pager] { order: 2; }
  section[data-screen-label="Latest"] div[data-latest-row] > div:last-child { order: 3; gap: 22px !important; }
  section[data-screen-label="Latest"] div[data-latest-row] a { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 17px 18px !important; box-sizing: border-box !important; text-align: center !important; }
}

/* Card links: arrow accent on hover */
/* Room cards: description plate expands to reveal "Discover the room" */
a[data-card-link] div[data-card-plate]::after {
  content: "Discover the room\00a0\00a0" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 640 640' fill='%23ffffff'%3E%3Cg transform='rotate(-45 320 320)'%3E%3Cpath d='M569.4 337L586.4 320L569.4 303L401.4 135L384.4 118L350.5 151.9L367.5 168.9L494.5 295.9L64.4 295.9L64.4 343.9L494.5 343.9L367.5 470.9L350.5 487.9L384.4 521.8L401.4 504.8L569.4 336.8z'/%3E%3C/g%3E%3C/svg%3E");
  display: block;
  font-family: Tiller, Marcellus, serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffffff;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease .05s, margin-top .35s ease;
}
a[data-card-link]:hover div[data-card-plate]::after { max-height: 24px; opacity: 1; margin-top: 14px; }
div[data-card-arrow] { transition: background .25s ease, color .25s ease, transform .25s ease; }
a[data-card-link]:hover div[data-card-arrow] { background: #DB4C58; color: #ffffff; transform: translate(2px, -2px); }
/* Guest quotes scroller */
[data-quotes] { scrollbar-width: none; }
[data-quotes]::-webkit-scrollbar { display: none; height: 0; }
/* Loading skeletons: shimmer while media loads, gentle fade-in when ready */
img[data-skeleton], video[data-skeleton] {
  color: transparent;
  background-image: linear-gradient(100deg, rgba(104, 26, 45, 0.16) 40%, rgba(219, 76, 88, 0.22) 50%, rgba(104, 26, 45, 0.16) 60%) !important;
  background-size: 200% 100% !important;
  animation: tlh-skel 1.4s ease-in-out infinite;
}
img[data-skel-done], video[data-skel-done] { animation: tlh-skel-in .5s ease; }
@keyframes tlh-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes tlh-skel-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes amxfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Stage 1 — stable data-m hooks. Safari 26 serializes inline grid styles differently
   (repeat() canonicalization), so [style*=…] substring matches are unreliable there.
   These attribute-based rules are the durable versions; the old selectors above stay
   as fallback for pages not yet redeployed with the hooks. */
@media (max-width: 760px) {
  div[data-m="stack3"] { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  div[data-m="amen"] { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-flow: row !important; grid-template-rows: none !important; column-gap: 20px !important; row-gap: 28px !important; }
  div[data-m="amen"] > div { flex-direction: column !important; align-items: center !important; gap: 10px !important; text-align: center; }
  div[data-m="amen"] > div > svg { width: 28px !important; height: 28px !important; }
  div[data-m="amen"] > div > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; font-size: 14px !important; line-height: 18px !important; }
  section[data-screen-label="Whats in every room"] div[data-m="amen"] > div:nth-child(n+6) { display: none; }
  section[data-screen-label="Whats in every room"] div[data-m="amen"].amx-open > div:nth-child(n+6) { display: flex; animation: amxfade .7s cubic-bezier(0.16,1,0.3,1) both; }
  section[data-screen-label="Whats in every room"] div[data-m="amen"].amx-open > div:nth-child(n+9) { animation-delay: .15s; }
  section[data-screen-label="Whats in every room"] div[data-m="amen"].amx-open > div:nth-child(n+12) { animation-delay: .3s; }
  /* Guard: if Safari serializes "1fr 1fr 1fr" as repeat(3, 1fr), the stack3 fallback above
     must not stack the fact triplets — this later, equal-specificity rule wins. */
  div[data-m="triplet"] { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; }
  div[data-m="triplet"] > div > div[style*="22px"] { font-size: 15px !important; white-space: normal !important; }
}


/* ── Mobile reading rhythm (Deals-matched) ─────────────────────────────────
   The Deals page reads better on phones because it uses looser body leading
   (16/26 rather than 16/20) and a smaller section-heading step (26/31 rather
   than 32/38). Gutters and section padding are already uniform above; these
   rules roll the Deals type rhythm out to every other page. */
@media (max-width: 760px) {
  /* Body copy: 16/26 */
  section p[style*="font-size: 16px"], section p[style*="font-size:16px"],
  footer p[style*="font-size: 16px"], footer p[style*="font-size:16px"] {
    line-height: 26px !important;
  }
  /* Body copy set as divs/spans at the site body style */
  section div[style*="font-size: 16px"][style*="line-height: 20px"],
  section div[style*="font-size:16px"][style*="line-height:20px"] {
    line-height: 26px !important;
  }
  /* Section headings: the Deals 26/31.2 step */
  section h2[style*="font-size: 32px"], section h2[style*="font-size:32px"] {
    font-size: 26px !important; line-height: 31.2px !important;
  }
  /* Hero copy: 26/34 headline over 15/25 body, as on Deals */
  section[data-screen-label="Hero"] h1,
  section[data-mobile-stack] [data-hero-copy] h1 { line-height: 1.3 !important; }
  section[data-screen-label="Hero"] p[style*="font-size: 16px"],
  section[data-screen-label="Hero"] p[style*="font-size:16px"],
  section[data-mobile-stack] [data-hero-copy] p[style*="font-size: 16px"],
  section[data-mobile-stack] [data-hero-copy] p[style*="font-size:16px"] {
    font-size: 15px !important; line-height: 25px !important;
  }
  /* All in-page h1s get the same 1.3 leading as the hero */
  section h1 { line-height: 1.3 !important; }
  /* 15px body copy: 25px leading, not 21px */
  section p[style*="font-size: 15px"], section p[style*="font-size:15px"] { line-height: 25px !important; }
  /* Heading → body: 20px, as on Deals (was 32px on Recreate / Rejuvenate) */
  section div[style*="flex-direction: column"][style*="gap: 32px"] > h2 + p,
  section div[style*="flex-direction:column"][style*="gap:32px"] > h2 + p { margin-top: -12px !important; }
}