/* ═══════════════════════════════════════════════
   KORONI POOLSIDE SUITES — theme.css v9.0
   Manrope | 1440px | pure block-editor compatible
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --f: 'Manrope', system-ui, sans-serif;
  --p100:#D2D4D7;--p200:#A4AAB0;--p300:#777F88;
  --p350:#304357;--p400:#495561;
  --p500:#1C2A39;--p600:#16222E;
  --p700:#111922;
  --s500:#F3D8C7;--s600:#C2AD9F;
  --white:#FFFFFF;--sand:#FBF7F1;
  --max-w:1440px;--cp:32px;--header-h:88px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f);font-weight:400;color:var(--p700);
  background:#fff;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;padding-top:var(--header-h);
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

/* ── TYPOGRAPHY ── */
h1{font-size:64px;line-height:74px;font-weight:600}
h2{font-size:48px;line-height:58px;font-weight:600}
h3{font-size:40px;line-height:50px;font-weight:600}
h4{font-size:32px;line-height:42px;font-weight:600}
h5{font-size:24px;line-height:34px;font-weight:600}
h6{font-size:20px;line-height:30px;font-weight:600}

/* ── WP LAYOUT RESETS ── */
/* Top-level sections (hero, welcome band, amenity bar, CTA banners,
   footer, etc.) are each their own full-bleed background — that part is
   intentional and correct. */
.wp-block-post-content{padding:0!important;max-width:none!important}
.wp-block-post-content>*{margin-left:0!important;margin-right:0!important;max-width:none!important}
.alignfull{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
/* Master Content Width Wrapper: everything else caps at 1440px, centered,
   with the container-padding safety gap — this is the rule the blueprint
   requires and previously got collapsed to 100vw alongside .alignfull. */
.alignwide{
  width:100%!important;max-width:var(--max-w)!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:var(--cp)!important;padding-right:var(--cp)!important;
  box-sizing:border-box!important;
}
/* Row-level content (image/text split columns, specs bars, suite grids,
   cross-sell rows) is marked full-bleed in the block markup purely so its
   parent section's background can span edge to edge — the row's actual
   content still needs to respect the 1440px frame. */
.wp-block-columns.alignfull{
  width:100%!important;max-width:var(--max-w)!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:var(--cp)!important;padding-right:var(--cp)!important;
  box-sizing:border-box!important;
}
main.wp-block-group{padding:0!important;margin:0!important}

/* ── HEADER ── */
/* Per the Figma source file: the bar itself is full-bleed (matches the
   hero it sits over), but its content (logo/nav/button) aligns to the
   same 1440px frame as the rest of the page. Below the 1440+2*cp
   breakpoint this falls back to the flat 32px safety gap; above it, the
   padding grows to keep the content centered at exactly 1440px wide —
   confirmed against Figma's own pixel positions (logo flush to the
   1440px frame's edge, zero extra inset). */
.site-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);z-index:999;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;
  transition:background .3s ease-in-out,border-color .3s ease-in-out;
  padding-left:max(var(--cp), calc((100% - var(--max-w)) / 2));
  padding-right:max(var(--cp), calc((100% - var(--max-w)) / 2));
}
.site-header .wp-block-site-logo{margin:0;flex-shrink:0}
.site-header .wp-block-site-logo img{
  height:40px;width:auto;
  filter:brightness(0) invert(1);
  transition:filter .3s ease;
}
.site-header .wp-block-navigation{flex:1;justify-content:center}
.site-header .wp-block-navigation__container{gap:32px;justify-content:center}
.site-header .wp-block-navigation-item__content{
  position:relative;
  font-family:var(--f);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.9);padding-bottom:2px;
  transition:color .3s ease;
}
.site-header .wp-block-navigation-item__content::after{
  content:'';position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:currentColor;
  transform:translateX(-50%);
  transition:width .3s ease-in-out;
}
.site-header .wp-block-navigation-item__content:hover::after{width:100%}
.site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after{width:100%}
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content{
  color:#fff;
}
/* Header BOOK NOW button */
.site-header .wp-block-button__link{
  font-family:var(--f)!important;font-size:14px!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:1px!important;
  padding:8px 16px!important;border-radius:0!important;
  background:var(--s500)!important;color:var(--p500)!important;
  border:1px solid var(--s500)!important;
  transition:background .3s ease,border-color .3s ease!important;
}
.site-header .wp-block-button__link:hover{
  background:var(--s600)!important;border-color:var(--s600)!important;
}
/* Mobile toggle */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close{
  color:#fff!important;
}

/* ── HEADER SCROLLED STATE ── */
.site-header.is-scrolled{
  background:#fff!important;border-color:var(--p100)!important;
}
.site-header.is-scrolled .wp-block-site-logo img{filter:none!important}
.site-header.is-scrolled .wp-block-navigation-item__content{color:var(--p400)!important}
.site-header.is-scrolled .wp-block-navigation-item__content:hover,
.site-header.is-scrolled .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content{
  color:var(--p500)!important;
}
.site-header.is-scrolled .wp-block-button__link{
  background:var(--p500)!important;color:var(--s500)!important;
  border-color:var(--p500)!important;
}
.site-header.is-scrolled .wp-block-button__link:hover{
  background:var(--p700)!important;border-color:var(--p700)!important;
}
.site-header.is-scrolled .wp-block-navigation__responsive-container-open,
.site-header.is-scrolled .wp-block-navigation__responsive-container-close{
  color:var(--p500)!important;
}

/* ── HERO ── */
.wp-block-cover.k9-hero{
  margin-top:calc(var(--header-h)*-1)!important;
  min-height:700px!important;height:700px!important;
}
.wp-block-cover.k9-hero .wp-block-cover__inner-container{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  text-align:center!important;height:100%!important;
  padding:0 var(--cp)!important;gap:16px!important;
}
/* Logo inside hero */
.k9-hero-logo-img img,.wp-block-cover.k9-hero .wp-block-image img{
  height:120px!important;width:auto!important;
  filter:brightness(0) invert(1)!important;
  margin:0 auto!important;display:block!important;
}

/* ── SUITE CARD HOVER (Plan Your Stay & cross-sell) ── */
.wp-block-cover.k9-suite-card{
  position:relative;overflow:hidden;cursor:pointer;
  transition:all .3s ease;
}
.wp-block-cover.k9-suite-card .wp-block-cover__image-background{
  transition:transform .5s ease;
}
.wp-block-cover.k9-suite-card:hover .wp-block-cover__image-background{
  transform:scale(1.04);
}
/* Bottom-anchored dark gradient (not a flat dim) fading from #111922 to transparent */
.wp-block-cover.k9-suite-card .wp-block-cover__background{
  background:linear-gradient(to top, rgba(17,25,34,.9) 0%, rgba(17,25,34,0) 65%)!important;
  opacity:1!important;
  transition:background .3s ease;
}
.wp-block-cover.k9-suite-card:hover .wp-block-cover__background{
  background:linear-gradient(to top, rgba(17,25,34,.95) 0%, rgba(17,25,34,.1) 80%)!important;
}
/* EXPLORE button visible on hover only */
.wp-block-cover.k9-suite-card .wp-block-buttons{
  opacity:0;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s ease;
}
.wp-block-cover.k9-suite-card:hover .wp-block-buttons{
  opacity:1;transform:translateY(0);
}
/* Suite text slides up on hover */
.wp-block-cover.k9-suite-card .wp-block-cover__inner-container{
  transition:transform .3s ease;
}
.wp-block-cover.k9-suite-card:hover .wp-block-cover__inner-container{
  transform:translateY(-16px);
}

/* Full-bleed-background sections whose text content should stay in a
   756px reading column, centered (About "Our Story", Accommodation intro,
   Contact intro). Uses padding-inset, not max-width+margin:auto, because
   this div is also .alignfull — and .alignfull forces max-width:100%!important
   for its background, so a plain max-width here would silently lose to
   that rule. Padding-inset keeps the div full-width (for the background
   colour) while visually capping its content to 756px, centered. */
.k9-reading-col{
  padding-left:max(var(--cp), calc((100% - 756px) / 2))!important;
  padding-right:max(var(--cp), calc((100% - 756px) / 2))!important;
}

/* ── GALLERY (built by gallery.js) ── */
/* The gallery section's own group has no width cap, so the JS-built
   slider (which is width:100% of its own parent) was rendering full-bleed
   instead of following the 1440px content frame like the rest of the page.
   Cap it the same content-inset way the header/footer use. */
.k9-gallery-section{
  padding-left:max(var(--cp), calc((100% - var(--max-w)) / 2))!important;
  padding-right:max(var(--cp), calc((100% - var(--max-w)) / 2))!important;
}
/* Hide the WP gallery grid — gallery.js converts it to a slider */
.k9-gallery-track-outer.wp-block-gallery{
  display:none!important;
}
/* Slider arrows (injected by gallery.js) */
.k9-gallery-prev,.k9-gallery-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:10;
  transition:background .3s ease;
}
.k9-gallery-prev{left:40px}
.k9-gallery-next{right:40px}
.k9-gallery-prev:hover,.k9-gallery-next:hover{background:var(--p500)}
.k9-gallery-prev:hover svg,.k9-gallery-next:hover svg{stroke:#fff}
/* Gallery items */
.k9-gallery-item{
  flex:0 0 342px;width:342px;height:342px;
  overflow:hidden;cursor:pointer;position:relative;
}
.k9-gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.k9-gallery-item::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,0);transition:background .4s ease;pointer-events:none;
}
.k9-gallery-item:hover img{transform:scale(1.03)}
.k9-gallery-item:hover::after{background:rgba(0,0,0,.15)}

/* ── BODY CONTENT BUTTON HOVER STATES ── */
/* Patterns hardcode each button's inline colors (no CSS classes to hook),
   so these attribute selectors key off the inline background/border color
   already present on every Primary Solid / Secondary Solid / Outline
   button in the page patterns, giving them the hover states the design
   system requires without needing to touch every pattern file. */
.wp-block-button__link{transition:background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out!important}
/* Primary Solid: bg #1C2A39 -> hover #111922 */
a.wp-block-button__link[style*="background-color:#1C2A39"]:hover{background-color:#111922!important;border-color:#111922!important}
/* Secondary Solid: bg #F3D8C7 -> hover #C2AD9F */
a.wp-block-button__link[style*="background-color:#F3D8C7"]:hover{background-color:#C2AD9F!important;border-color:#C2AD9F!important}
/* Primary Outline: border/text #1C2A39 -> hover fill #1C2A39, text #F3D8C7 */
a.wp-block-button__link[style*="border:1px solid #1C2A39"]:hover{background-color:#1C2A39!important;color:#F3D8C7!important}
/* Secondary Outline: border/text #F3D8C7 -> hover fill #F3D8C7, text #1C2A39 */
a.wp-block-button__link[style*="border:1px solid #F3D8C7"]:hover{background-color:#F3D8C7!important;color:#1C2A39!important}
/* White Outline (suite-card EXPLORE buttons): border/text #ffffff -> hover fill #fff, text #1C2A39 */
a.wp-block-button__link[style*="border-color:#ffffff"]:hover,
a.wp-block-button__link[style*="border:1px solid #ffffff"]:hover{
  background-color:#ffffff!important;color:#1C2A39!important;
}

/* ── COLOURED FULL-BLEED CONTENT BLOCKS (sand specs/amenity bars, solid
   navy CTA banners) ── these are marked alignfull purely so earlier
   versions could bleed to the true viewport edge; per the 1440px Max
   Content Width Wrapper they should instead sit inside the same 1440px
   frame as everything else, centered and aligned with the rest of the
   page. (Hero/CTA image covers and the header/footer are left full-bleed
   — those are meant to reach the true edge.) */
div.wp-block-group.alignfull[style*="background-color:#FBF7F1"],
div.wp-block-group.alignfull[style*="background-color:#1C2A39"]{
  max-width:var(--max-w)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ── CTA BANNER ── */
/* These 200px banners now also cap at the shared frame width and center,
   aligned with the header/footer/amenity bar above and below them,
   instead of bleeding to the true viewport edge. */
.wp-block-cover[style*="min-height:200px"],
.wp-block-cover[style*="min-height: 200px"]{
  height:200px!important;
  max-width:var(--max-w)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%!important;
}

/* ── SPECS BAR ── */
.wp-block-columns.alignwide .wp-block-column[style*="border-right"]{
  position:relative;
}

/* ── FOOTER ── */
/* Confirmed against Figma: the dark panel is full-bleed (like the
   header), but its content — logo, nav, contact stack, divider, legal
   row — aligns to the same 1440px frame, flush to its edges with no
   extra inset (the divider is drawn at exactly 1440px). Top padding is
   40px per Figma (logo sits exactly 40px below the footer's top edge),
   not 56px. */
.site-footer,footer.wp-block-group[style*="#111922"],footer.wp-block-group[style*="#1C2A39"]{
  background:var(--p700)!important;
  padding-top:40px!important;
  padding-bottom:0!important;
  padding-left:max(var(--cp), calc((100% - var(--max-w)) / 2))!important;
  padding-right:max(var(--cp), calc((100% - var(--max-w)) / 2))!important;
  border-top:none!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
}
/* Footer divider must span the full content width (Figma: 1440px full-bleed
   line), not WP core's default 100px stub for a plain .wp-block-separator */
.site-footer .wp-block-separator{
  width:100%!important;
  max-width:none!important;
  border:none!important;
  border-bottom:1px solid #495561!important;
  background:none!important;
  height:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
.site-footer .wp-block-site-logo img{
  height:80px!important;width:auto!important;
  filter:brightness(0) invert(1)!important;
}
/* The live footer's saved content has stray empty <p> blocks left over
   from earlier Site Editor edits (confirmed via DOM inspection — they
   are not in this theme's parts/footer.html). In vertical stacks these
   only threw off margins (handled below); in the horizontal legal row
   (copyright + nav, display:flex + justify-content:space-between) an
   empty <p> counts as its own flex item, which shifts every real item
   including the "© 2025..." copyright text away from the left edge —
   that's why it wasn't aligning under the logo. Removing empty
   paragraphs from layout entirely fixes both cases at once and is
   self-healing regardless of what stray content exists live. */
.site-footer p:empty{display:none!important}
/* Email/Phone contact block: force every paragraph in this vertical stack
   to zero margin by default (killing any stray empty <p> blocks that may
   exist in the live content and would otherwise inherit the sitewide
   16px paragraph margin, throwing off the Email/Phone spacing), then
   re-apply the intentional 16px gap ONLY to the paragraph that actually
   contains the email link — so the spacing is correct regardless of
   what stray/empty blocks are sitting in the saved content.
   NOTE: .k9-contact-stack is the real className now on that wp:group
   (see parts/footer.html); .wp-block-group.is-vertical is kept as a
   fallback in case WordPress's own auto-generated layout class is
   present on some saved page revision, but it should not be relied on. */
.site-footer .k9-contact-stack p,
.site-footer .wp-block-group.is-vertical p{
  margin-top:0!important;margin-bottom:0!important;
}
.site-footer .k9-contact-stack p:has(a[href^="mailto:"]),
.site-footer .wp-block-group.is-vertical p:has(a[href^="mailto:"]){
  margin-bottom:16px!important;
}
.site-footer .wp-block-navigation-item__content{
  font-size:14px!important;font-weight:500!important;
  color:#fff!important;transition:color .3s ease!important;
}
.site-footer .wp-block-navigation-item__content:hover{color:var(--s500)!important}
.site-footer .wp-block-navigation__container{gap:24px!important}
/* Email / phone links in footer contact stack */
.site-footer p a{transition:color .3s ease-in-out}
.site-footer p a:hover{color:var(--s500)!important}
/* Social icons in footer */
.site-footer .wp-block-social-links .wp-social-link{
  background:transparent!important;color:#fff!important;
  transition:color .3s ease!important;
}
.site-footer .wp-block-social-links .wp-social-link:hover{color:var(--s500)!important}
.site-footer .wp-block-social-links .wp-social-link svg{fill:currentColor!important}

/* ── CONTACT PAGE: MAP EMBED ── */
/* The map's wrapping div is a fixed 586px block sitting inside a flexible
   column that's wider than 586px on desktop (it grows to fill whatever
   space is left after the 342px contact-details column) — with no
   auto margins the map was flush to the left, leaving a large empty gap
   on the right instead of being centred in its column. Selector keys off
   the Google Maps iframe itself (:has()) so it works regardless of the
   surrounding markup/column classnames. */
.wp-block-column div:has(> iframe[src*="google.com/maps"]){
  margin-left:auto!important;margin-right:auto!important;
}

/* ── SUITE / ACCOMMODATION PAGE: IMAGE + TEXT ROWS ── */
/* Each image+text row (Accommodation intro blocks, and the "The Suite"
   intro block on Sapphire/Emerald/Platinum) has the text column carrying
   a baked-in 48px top padding, which pushed the text ~48px below the top
   of the adjacent image instead of aligning with it. Some rows put the
   image column first, others put the text column first (image-left vs.
   image-right layouts alternate down the Accommodation page), so this is
   scoped to any columns row containing an image anywhere in it — not
   just a first-child image — so both orderings are caught without
   affecting unrelated layouts. */
.wp-block-columns:has(.wp-block-image) > .wp-block-column[style*="padding-top:48px"]{
  padding-top:0!important;
}

/* Emerald block on the Accommodation page was using the Sand White
   (#FBF7F1) section background that Sapphire/Platinum's rows don't use,
   making it look inconsistent — should be plain white like the other two.
   #FBF7F1 is used intentionally elsewhere on the site (About page,
   homepage, and each suite page's own gallery section), so this is
   scoped to the live Accommodation page specifically (body.page-id-1366)
   rather than overridden globally. NOTE: this is page *content*
   (background color picked in the block editor), not a template file —
   the pattern source (accommodation-page.php) was also corrected to
   white for future rebuilds, but that alone won't change this already-
   published page; this CSS override is what actually fixes it live. If
   the page is ever rebuilt from the pattern, or the Accommodation page's
   ID changes, this rule can be removed. */
body.page-id-1366 .wp-block-group[style*="background-color:#FBF7F1"]{
  background-color:#FFFFFF!important;
}

/* ── TRANSLATEPRESS LANGUAGE SWITCHER ── */
.site-header .trp-language-switcher{background:transparent!important;border:none!important}
.site-header .trp-current-language-item__wrapper{
  display:inline-flex!important;align-items:center!important;gap:.25rem!important;
  background:transparent!important;border:none!important;padding:0!important;
  font-family:var(--f)!important;font-size:14px!important;font-weight:500!important;
  color:rgba(255,255,255,.9)!important;cursor:pointer!important;
  transition:color .3s ease!important;
}
.site-header .trp-current-language-item__wrapper img{display:none!important}
/* TranslatePress renders the visible "EN" label in its own inner
   <span class="trp-language-item-name">, which ships with the plugin's
   own dark navy text color (~rgb(20,56,82)) baked into its stylesheet.
   That color doesn't inherit from .trp-current-language-item__wrapper
   above, so on the transparent hero header it was nearly invisible
   (dark navy text on a dark navy hero photo). Forcing it to inherit the
   wrapper's color keeps it in sync with the white/scrolled-navy toggle
   below instead of being stuck at the plugin's default. */
.site-header .trp-language-item-name{color:inherit!important}
.site-header .trp-shortcode-arrow{width:10px!important;height:10px!important;fill:currentColor!important}
.site-header .trp-shortcode-anchor{visibility:hidden!important}
.site-header .trp-switcher-dropdown-list[hidden]{display:none!important}
/* Dropdown window is always solid white with dark text, per design system,
   regardless of the header's transparent/scrolled state */
.site-header .trp-switcher-dropdown-list{
  background:#FFFFFF!important;
  border:1px solid var(--p100)!important;
  padding:.4rem 0!important;border-radius:0!important;min-width:120px!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
}
.site-header .trp-switcher-dropdown-list *{
  color:#111922!important;font-size:14px!important;
  font-family:var(--f)!important;
}
.site-header .trp-switcher-dropdown-list>*{padding:.5rem 1rem!important}
.site-header .trp-switcher-dropdown-list>*:hover{background:var(--sand)!important}
.site-header.is-scrolled .trp-current-language-item__wrapper{color:var(--p500)!important}

/* ── MOBILE HEADER ── */
.site-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--p700)!important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:#fff!important;
}

/* ── RESPONSIVE ── */
/* Single container-padding variable: 32px default (holds at any desktop
   width down to 1360px per spec), only drops to 16px in the mobile query
   below — no intermediate tier. */
@media(max-width:768px){
  :root{--cp:16px;--header-h:64px}
  /* Full heading scale — previously only h4/h5 were scaled down for
     mobile, so h1/h2/h3/h6 were still rendering at full desktop size
     (up to 64px) on a 375px-wide phone, forcing awkward line-wraps.
     Scaled proportionally to the existing h4/h5 reductions (~75-80%). */
  h1{font-size:40px;line-height:48px}
  h2{font-size:32px;line-height:40px}
  h3{font-size:28px;line-height:36px}
  h4{font-size:24px;line-height:34px}
  h5{font-size:20px;line-height:30px}
  h6{font-size:18px;line-height:26px}
  .wp-block-cover.k9-hero{height:480px!important;min-height:480px!important}
  .wp-block-columns{flex-direction:column!important}
  .wp-block-column{flex-basis:100%!important;width:100%!important;max-width:100%!important}
  .k9-gallery-item{flex:0 0 240px!important;width:240px!important;height:240px!important}
  /* Header/footer top rows use wp:group flex layout (not wp:columns), so
     the .wp-block-columns rule above never applied to them — with
     flexWrap:nowrap baked into header.html, the logo + nav + "BOOK NOW"
     button were fighting for space in one unbreakable row on narrow
     screens. Force wrap here instead of relying on wp:navigation's own
     built-in mobile menu collapse alone. */
  .site-header,
  .site-footer .is-content-justification-space-between{
    flex-wrap:wrap!important;
  }
  /* Contact page's 342px fixed-width details column and 586px-capped map
     both already yield to width:100% correctly via the rule above, but
     the map's inline max-width was written assuming a wide desktop
     column — belt-and-suspenders cap so it can never exceed the mobile
     viewport even if a future page's column markup doesn't stack. */
  .wp-block-column div:has(> iframe[src*="google.com/maps"]){
    max-width:100%!important;
  }
  /* Suite/about image+text rows alternate sides on desktop (image-left/
     text-right, then text-left/image-right for the next row) for visual
     variety. Stacking them on mobile naturally follows that same source
     order, so the alternated rows put text on top and drop the image to
     the bottom instead — force the image column to always render first
     on mobile regardless of which side it's on for desktop. */
  .wp-block-columns:has(.wp-block-image) > .wp-block-column:has(.wp-block-image){
    order:-1!important;
  }
  /* Body-copy columns (suite/about/accommodation intro text, the small
     "45 m² / Balcony / Private Pool Access" stat columns, etc.) carry
     their own desktop-only left/right padding baked in as inline styles
     (e.g. 32-48px) that the mobile breakpoint never touched — unlike the
     rest of the site, which already shrinks to var(--cp) (16px) on
     mobile via the section-level wrappers. That left these text blocks
     sitting much further from the screen edge than the footer or any
     other section, instead of matching it. Normalize every column that
     has its own inline padding to the same var(--cp) left/right value. */
  .wp-block-column[style*="padding"]{
    padding-left:var(--cp)!important;
    padding-right:var(--cp)!important;
  }
  /* The footer used a hardcoded 32px left/right padding instead of
     var(--cp), so it didn't shrink to 16px on mobile like every other
     section — bring it in line so all page text (including the footer
     itself) shares one consistent mobile side margin. */
  .site-footer{
    padding-left:var(--cp)!important;
    padding-right:var(--cp)!important;
  }
  /* Amenities columns (Bedroom & bathroom / Kitchen & living / Outdoors &
     property on suite + Accommodation pages) must stay 3-across on mobile
     exactly like desktop instead of stacking — carve this block out of the
     generic .wp-block-columns stacking rule above. Scoped with a direct-
     child combinator (> .wp-block-column > .wp-block-list) so it matches
     ONLY the innermost 3-column amenities block, not the outer 2-column
     image+text wrapper it sits inside of (whose own columns don't have a
     .wp-block-list as a *direct* child — it's nested one level deeper via
     this very block) — that outer wrapper must still stack normally. */
  .wp-block-columns:has(> .wp-block-column > .wp-block-list){
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) > .wp-block-column{
    flex-basis:0!important;
    flex-grow:1!important;
    flex-shrink:1!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) p[style*="font-size:14px"]{
    font-size:11px!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) .wp-block-list{
    font-size:10px!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) .wp-block-list li{
    line-height:1.4!important;
    gap:4px!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) .wp-block-list li svg{
    width:9px!important;
    height:9px!important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-list) svg[width="16"]{
    width:13px!important;
    height:13px!important;
  }
  /* Suite pages' SIZE / GUESTS / BED / BALCONY specs bar (the 4-column
     row right below the hero) should show as a 2x2 grid on mobile
     instead of stacking to one full-width column per row. Identified
     structurally — the only columns block on the site with a 4th column
     AND a border-right divider on it — rather than by text-align:center,
     since WordPress may emit that as a shorthand inline style, a
     longhand border-right-*/padding-* set, or move centering onto the
     child paragraph's has-text-align-center class depending on how the
     block was last saved. Homepage/about-page stat rows only have 3
     columns, so they're correctly excluded either way. */
  .wp-block-columns:has(> .wp-block-column:nth-child(4)):has(> .wp-block-column[style*="border-right"]){
    flex-direction:row!important;
    flex-wrap:wrap!important;
  }
  .wp-block-columns:has(> .wp-block-column:nth-child(4)):has(> .wp-block-column[style*="border-right"]) > .wp-block-column{
    flex-basis:50%!important;
    width:50%!important;
    max-width:50%!important;
  }
  /* Right-side dividers only make sense between left/right pairs, not on
     the column that's already at the right edge of its row. */
  .wp-block-columns:has(> .wp-block-column:nth-child(4)):has(> .wp-block-column[style*="border-right"]) > .wp-block-column:nth-child(2n){
    border-right:none!important;
  }
  /* Add a matching divider between the two rows for the same visual
     language as the existing right-side dividers. */
  .wp-block-columns:has(> .wp-block-column:nth-child(4)):has(> .wp-block-column[style*="border-right"]) > .wp-block-column:nth-child(-n+2){
    border-bottom:1px solid #ffffff!important;
  }
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}