/* Royal Phuket Marina — Elementor bridge for the lifestyle landing pattern.

   The approved reference page (reference/home.html) uses semantic markup:
   <section class="band"><img class="plate"> ... <figure><img>.
   Elementor emits its own wrappers instead (.e-con, .elementor-widget-image,
   .elementor-widget-container), and its container rules carry higher
   specificity than the plain class selectors in landing-page.css.

   This file re-lands the approved design on Elementor's markup. It is
   ADDITIVE: a new file, loaded last, that only raises specificity and maps
   reference selectors onto Elementor equivalents. Nothing here invents new
   design decisions — every value comes from landing-page.css /
   landing-page-home.css. Delete this file and the page falls back to
   Elementor defaults; no other file changes behaviour. */

/* NOTE (9 Sep 2026): the section-level layout classes `.maison`, `.split` and
   `.split-flip` are LEGACY. From the Marina landing onwards the sections are
   laid out with Elementor's own container controls instead — boxed width,
   66/12/66/12 padding, flex row with 50% children — which is the better home
   for anything Elementor can express. Those rules are kept only because page
   2495 still uses the classes; once it is converted they can be deleted.
   The classes that ARE still load-bearing, because they carry things
   Elementor cannot express, are: .card, .rpm-rail, .creds, .credrow, .band,
   .copy, .closing, .inner, .links, .reveal, .label, .lede, .body, .lvlink,
   and everything inside the hero widget. */

/* ---------- sections: keep the reference display model ---------- */
.elementor-element.creds{display:block;background:var(--navy-900);color:#fff;padding:26px var(--gut)}
.elementor-element.credrow{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px);width:100%}
.elementor-element.credrow .elementor-widget-container,
.elementor-element.credrow p{font-family:var(--ui);font-weight:400;font-size:clamp(9px,1vw,11px);letter-spacing:.24em;text-transform:uppercase;text-align:center;color:#fff;margin:0}
.elementor-element.credrow>.elementor-widget{width:auto;flex:0 0 auto}

/* The editorial band's copy sits at the TOP of the photograph (client
   decision, 9 Sep 2026 — this is what the `.band{align-items:flex-start}`
   edit in landing-page.css was reaching for; on Elementor markup the axis is
   `justify-content`, so it has to be set here to take effect). The gradient
   wash and the copy padding are flipped to match, otherwise white type sits
   over the bright half of the picture. Global: every landing. */
.elementor-element.band{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:min(92vh,860px);overflow:hidden;padding:0;background-size:cover;background-position:center}
.elementor-element.band::after{background:linear-gradient(to bottom,rgba(12,31,56,.78) 0%,rgba(12,31,56,.18) 52%,rgba(12,31,56,.06) 100%)}
.elementor-element.band>.elementor-element.copy{position:relative;z-index:2;width:100%;max-width:min(62ch,60vw);padding:clamp(7rem,15vh,10rem) var(--gut) clamp(3rem,7vh,6rem);gap:0}
.elementor-element.band .label{color:var(--brass-300)}
.elementor-element.band h2{color:#fff;font-size:clamp(30px,4.4vw,64px);margin-bottom:20px}
.elementor-element.band .lede{font-family:var(--text);font-size:clamp(15px,1.4vw,19px);line-height:1.62;color:rgba(255,255,255,.9);margin-bottom:26px;max-width:46ch}
.elementor-element.band .lvlink{color:#fff}

.elementor-element.maison{display:block;padding:clamp(4rem,9vh,8rem) 0}
/* The carousel is boxed to the same 1480px measure as the heading and the
   rail head above it, rather than running full-bleed to the viewport edge
   (client decision, 8 Sep 2026 — applies to every landing). Slide spacing is
   the widget's own `image_spacing_custom` control, set to 20px. */
.elementor-element.maison>.elementor-widget-n-carousel{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}

/* Two or more product-unit splits stacked: only the first carries the top
   padding, and every second one flips so the photograph alternates sides. */
.elementor-element.split+.elementor-element.split{padding-top:0}
.elementor-element.split-flip>.elementor-widget-image{order:2}
@media(max-width:1024px){
  .elementor-element.split-flip>.elementor-widget-image{order:0}
}
.elementor-element.maison-head{display:block;max-width:var(--maxw);margin:0 auto clamp(2.5rem,5vh,4rem);padding:0 var(--gut)}
.elementor-element.railhead{max-width:var(--maxw);margin:0 auto 26px;padding:0 var(--gut);display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}

.elementor-element.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4.5vw,5rem);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vh,5rem) var(--gut) clamp(4rem,9vh,8rem)}
.elementor-element.split .elementor-widget-image img{width:100%;aspect-ratio:5/4;object-fit:cover}
.elementor-element.split h2{font-size:clamp(26px,3.5vw,48px);margin-bottom:20px}
.elementor-element.split .lede{font-family:var(--text);font-size:clamp(15px,1.35vw,18px);margin-bottom:26px;max-width:48ch}

.elementor-element.closing{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:min(84vh,760px);overflow:hidden;padding:0;background-size:cover;background-position:center}
.elementor-element.closing>.elementor-element.inner{position:relative;z-index:2;color:#fff;padding:0 var(--gut);align-items:center;gap:0;width:100%}
.elementor-element.closing h2{color:#fff;font-size:clamp(28px,4.2vw,60px);margin-bottom:34px}
.elementor-element.closing .label{color:var(--brass-300)}
.elementor-element.closing .lvlink{color:#fff}
.elementor-element.closing .links{display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(18px,3vw,42px);justify-content:center;width:auto}
.elementor-element.closing .links>.elementor-widget{width:auto;flex:0 0 auto}

/* ---------- carousel slides: the reference .card, on Elementor markup ---------- */
.elementor-element.card{gap:0;padding:0}
.elementor-element.card .elementor-widget-image{overflow:hidden;background:var(--sand-200);margin-bottom:22px}
.elementor-element.card .elementor-widget-image img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .95s cubic-bezier(.22,.7,.2,1)}
.elementor-element.card:hover .elementor-widget-image img{transform:scale(1.055)}
.elementor-element.card h3{font-size:clamp(20px,1.9vw,27px);margin-bottom:12px}
.elementor-element.card .body{font-size:14.5px;line-height:1.66;margin-bottom:20px}
.elementor-element.card .lvlink{color:var(--navy)}

/* Elementor's own carousel chrome, dressed as the reference .railnav */
.rpm-rail .swiper{padding-bottom:0}
.rpm-rail .elementor-swiper-button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;color:var(--navy);background:none;display:grid;place-items:center;transition:background .3s ease,color .3s ease,border-color .3s ease}
.rpm-rail .elementor-swiper-button:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- typography helpers used by the text widgets ---------- */
.elementor-widget-text-editor .label{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-600);margin:0 0 18px}
.elementor-widget-text-editor .lvlink{display:inline-block;font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid currentColor;transition:opacity .3s ease}
.elementor-widget-text-editor .lvlink:hover{opacity:.55}

/* ---------- hero widget: it must own the full viewport ---------- */
.elementor-element.rpm-hero-wrap{padding:0;margin:0;width:100%;max-width:none}
.elementor-element.rpm-hero-wrap>.elementor-widget-html{width:100%}
.elementor-element.rpm-hero-wrap .elementor-widget-container{width:100%}

@media(max-width:1024px){
  .elementor-element.split{grid-template-columns:1fr}
  .elementor-element.band>.elementor-element.copy{max-width:min(62ch,86vw)}
}
@media(max-width:767px){
  .elementor-element.railhead{flex-direction:column;align-items:flex-start}
}

/* ==================================================================
   Review pass 1 — 08 Sep 2026
   ================================================================== */

/* ---------- 1 · header: hidden over the hero, revealed at the creds bar ----------
   CLAUDE.md §4. The Theme Builder header becomes fixed so the hero owns the
   full viewport, then slides in when landing-page-header.js drops the
   .rpm-nav-hidden class from <html>. The template itself is untouched. */
.rpm-landing header.elementor-location-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.7,.2,1),visibility .45s ease;
}
.rpm-landing.rpm-nav-hidden header.elementor-location-header{
  opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none;
}
/* the hero sits under the fixed header, so nothing may reserve space for it */
.rpm-landing .elementor-location-header+*{margin-top:0}

/* ---------- 2 · hotspot discs: kill the theme's <button> chrome ----------
   .hs is a <button>, so the theme and Elementor button rules paint a navy
   box behind each cream disc. The reference markup has no such chrome. */
#hotspots .hs,
#hotspots .hs:hover,
#hotspots .hs:focus,
#hotspots .hs:active{
  background:none!important;background-color:transparent!important;
  background-image:none!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;
  -webkit-appearance:none;appearance:none;
}
#hotspots .hs:focus-visible{outline:2px solid var(--brass-300);outline-offset:6px}
#hotspots .hs .ring{border-radius:50%!important;background:none!important;box-shadow:none!important}
/* All three discs stay on every viewport — the third is re-authored for the
   portrait crop via data-xm / data-ym rather than dropped, and landing-page.js
   decides when those apply from the stage's aspect ratio (see the `portrait`
   flag there), so tablet portrait is covered as well as phones. */
@media(max-width:767px){
  #hotspots .hs[data-portrait="hide"]{display:grid!important}
}
/* tablet portrait: the discs sit closer together on a narrow crop, so trim the
   box a little to keep their hit areas from overlapping */
@media(min-width:768px) and (max-width:1024px) and (orientation:portrait){
  #hotspots .hs{width:170px;height:170px;margin:-85px 0 0 -85px}
  #hotspots .hs .dot,#hotspots .hs .ring{width:106px;height:106px}
}
#hotspots .hs .dot{border-radius:50%!important}

/* the VISIT / BERTH toggle is made of <button>s too */
#toggle button,
#toggle button:hover,
#toggle button:focus{
  background-image:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;-webkit-appearance:none;appearance:none;
}
#toggle button:not(.on){background-color:transparent!important;color:#fff!important}
#toggle button.on{background-color:#fff!important;color:var(--navy-800)!important}

/* ---------- 3 · floating stack: adopt the theme's #backToTop ----------
   functions.php renders <button id="backToTop"> with ID-level styling and its
   own display:none/block scroll toggle. landing-page-fabs.js now moves that
   button into the stack instead of adding a second one; these rules re-dress
   it to match, and its own JS stays the show/hide gate. Nothing in
   functions.php is edited or disabled. */
.rpm-fabs #backToTop{
  position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  margin:0!important;width:46px!important;height:46px!important;padding:0!important;
  border-radius:50%!important;border:0!important;
  background-color:var(--navy)!important;color:#fff!important;
  font-size:18px;line-height:46px;text-align:center;
  opacity:1!important;visibility:visible!important;
  box-shadow:0 8px 26px -8px rgba(12,31,56,.6);
  transition:background-color .3s ease,transform .3s ease;
}
.rpm-fabs #backToTop:hover{background-color:var(--brass-600)!important;transform:translateY(-2px)}

/* ---------- 4 · the hero wordmark reads too heavy ----------
   Libre Caslon Display ships weight 400 only (DESIGN.md §3), so the extra
   weight was not the face — it was the 24px dark blur from `.block`
   text-shadow bleeding into the white letterforms, plus faux-bold synthesis.
   Softer, wider shadow: the type still clears the photograph but the
   hairlines stay hairlines. */
#bigmark{
  /* Explicit stack. If the webfont fails to load (an offline preview, a
     blocked Google Fonts request, a device-lab iframe), the old fallback was
     Georgia — a much heavier, low-contrast face, which is exactly what "still
     looks bold" looks like. Times is the closer, lighter stand-in. */
  font-family:'Libre Caslon Display','Times New Roman',Times,serif!important;
  font-weight:400!important;
  font-synthesis:none;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-text-stroke:0!important;
  /* the tight dark blur from `.block` was filling in the hairlines */
  text-shadow:0 2px 30px rgba(12,31,56,.26)!important;
}

/* ---------- 5 · centred wordmark pinned over the hero ----------
   CLAUDE.md §4: a logo sits fixed at the top of the hero, white over the
   photograph, and hands over to the Theme Builder header once the nav
   arrives at the credentials bar. It is keyed to the SAME .rpm-nav-hidden
   class landing-page-header.js already toggles, so the two can never be on
   screen together. */
.rpm-heromark{
  position:fixed;top:clamp(14px,2.4vh,28px);left:50%;
  transform:translateX(-50%);
  z-index:125;width:clamp(204px,12vw,148px);
  display:block;line-height:0;pointer-events:auto;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.rpm-landing.rpm-nav-hidden .rpm-heromark{opacity:1;visibility:visible}
.rpm-heromark img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 18px rgba(12,31,56,.45))}
/* clear the WordPress admin bar for logged-in reviewers */
body.admin-bar .rpm-heromark{top:calc(clamp(14px,2.4vh,28px) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .rpm-heromark{top:calc(clamp(14px,2.4vh,28px) + 46px)}
}

/* WhatsApp in brand navy rather than WhatsApp green (client decision,
   08 Sep 2026 — supersedes DESIGN.md §4, which called the green the one
   deliberate non-palette colour). The whole stack now reads as one set. */
.rpm-fabs .rpm-fab--wa{background:var(--navy)!important;color:#fff!important}
.rpm-fabs .rpm-fab--wa:hover{background:var(--brass-600)!important;transform:translateY(-2px)}
@media(max-width:767px){
  .rpm-fabs #backToTop{width:44px!important;height:44px!important;line-height:44px}
}