/*
  Romblon Beach Resort | Getting Here editorial layout V1.0
  2026-10-26. Additive styling, scoped to body.rbr-gh-v1.
  Existing text, prices, CMS bindings and booking workflow remain unchanged.
  Current photo defaults reuse /assets/uploads/overview.jpg and diving.jpg
  already referenced by the RBR home page. No external images.
*/
body.rbr-gh-v1 {
  --gh-ink:#173b38;
  --gh-muted:#5d716c;
  --gh-line:#d6ded8;
  --gh-cream:#f8f7f2;
  --gh-panel:#f1f3ef;
  --gh-serif:Georgia,"Noto Serif CJK TC","Noto Serif TC","Noto Serif SC",serif;
  background:var(--gh-cream);
}
body.rbr-gh-v1 .inner-main{overflow:clip;}
body.rbr-gh-v1 .inner-main .shell,
body.rbr-gh-v1 .route-note.shell{width:min(100% - 48px,1240px);max-width:1240px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
body.rbr-gh-v1 .rbr-gh-icon{width:25px;height:25px;display:block;flex:none;}

/* 01 — Atmospheric hero using a photo already present on the RBR site. */
body.rbr-gh-v1 .rbr-gh-hero{
  position:relative;isolation:isolate;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:100%;min-height:clamp(430px,43vw,625px);
  margin:0;padding:clamp(120px,11vw,170px) max(7vw,calc((100vw - 1240px)/2)) clamp(70px,8vw,110px);
  text-align:left;overflow:hidden;
  color:var(--gh-ink);
  background-color:#e5ebe8;
  background-image:linear-gradient(90deg,rgba(246,247,243,.96) 0%,rgba(246,247,243,.88) 31%,rgba(246,247,243,.45) 54%,rgba(246,247,243,.07) 85%),var(--rbr-gh-hero-photo, url('/assets/uploads/overview.jpg'));
  background-size:cover;background-position:center 51%;
}
body.rbr-gh-v1 .rbr-gh-hero::after{
  content:"";position:absolute;inset:auto 0 0;height:70px;
  background:linear-gradient(to bottom,rgba(248,247,242,0),rgba(248,247,242,.13));z-index:-1;pointer-events:none;
}
body.rbr-gh-v1 .rbr-gh-hero .overline{
  font-size:clamp(.65rem,.82vw,.78rem);letter-spacing:.22em;font-weight:650;
  line-height:1.6;color:#426158;margin:0 0 23px;max-width:100%;text-align:left;
}
body.rbr-gh-v1 .rbr-gh-hero h1{
  margin:0;max-width:11ch;color:var(--gh-ink);
  font-family:var(--gh-serif);font-size:clamp(3.2rem,6.1vw,6.75rem);
  letter-spacing:-.038em;line-height:1.21;font-weight:400;text-align:left;
}
body.rbr-gh-v1:lang(en) .rbr-gh-hero h1{max-width:700px;font-size:clamp(3rem,5.1vw,5.4rem);}
body.rbr-gh-v1 .rbr-gh-hero .body-copy{
  margin:22px 0 0;max-width:640px;font-size:clamp(.92rem,1.16vw,1.08rem);
  line-height:1.9;color:#42615b;text-align:left;
}

/* 02 — Human assistance + real RBR image (future CMS photo slot). */
body.rbr-gh-v1 .rbr-gh-planning{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.93fr);gap:0 clamp(32px,5vw,78px);
  align-items:center;padding-top:clamp(62px,7vw,112px);padding-bottom:clamp(45px,6vw,78px);
}
body.rbr-gh-v1 .rbr-gh-planning > :not(.rbr-gh-arrival){grid-column:1;min-width:0;}
body.rbr-gh-v1 .rbr-gh-planning > .display-title{
  margin:0 0 24px;font-size:clamp(2.2rem,3.5vw,3.65rem);font-weight:400;
  line-height:1.34;letter-spacing:-.028em;max-width:16ch;color:var(--gh-ink);
}
body.rbr-gh-v1:lang(en) .rbr-gh-planning > .display-title{max-width:19ch;}
body.rbr-gh-v1 .rbr-gh-planning > .body-copy{margin:0 0 16px;max-width:63ch;font-size:.98rem;line-height:1.95;}
body.rbr-gh-v1 .rbr-gh-planning > .strategy-actions{
  margin:14px 0 12px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
}
body.rbr-gh-v1 .rbr-gh-planning > .strategy-actions a{
  display:inline-flex;align-items:center;min-height:34px;gap:5px;
  font-size:.84rem;text-decoration:none;border-bottom:1px solid currentColor;
}
body.rbr-gh-v1 .rbr-gh-planning > .strategy-small{font-size:.75rem;line-height:1.8;color:#657b73;max-width:65ch;}
body.rbr-gh-v1 .rbr-gh-arrival{
  grid-column:2;grid-row:1 / 8;align-self:stretch;min-height:310px;aspect-ratio:16/10;
  margin:0;border:0;background-color:#cbdcd7;
  background-image:linear-gradient(180deg,rgba(12,52,49,.04),rgba(12,52,49,.14)),var(--rbr-gh-arrival-photo, url('/assets/uploads/diving.jpg'));
  background-position:center;background-size:cover;
  box-shadow:0 10px 38px rgba(22,54,49,.075);
}

/* 03 — Route cards: actual HTML nodes & CSS guide lines, not mockup pixels. */
body.rbr-gh-v1 .rbr-gh-route-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  margin-top:0;padding-top:0;padding-bottom:20px;
}
body.rbr-gh-v1 .rbr-gh-route-grid article{
  box-sizing:border-box;min-width:0;padding:27px clamp(20px,2.5vw,35px) 26px;
  background:linear-gradient(145deg,#f6f7f4,#eff3ef);
  border:1px solid #d9e1dc;box-shadow:0 9px 30px rgba(23,59,56,.035);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.7fr);column-gap:18px;
  align-content:start;
}
body.rbr-gh-v1 .rbr-gh-route-grid article > .overline{
  grid-column:1 / -1;margin:0 0 13px;padding-bottom:13px;
  border-bottom:1px solid var(--gh-line);font-size:.72rem;letter-spacing:.2em;color:#647a72;
}
body.rbr-gh-v1 .rbr-gh-route-grid article > h2{
  grid-column:1;margin:5px 0 16px;max-width:14ch;
  font-family:var(--gh-serif);font-size:clamp(1.7rem,2.5vw,2.65rem);
  letter-spacing:-.025em;line-height:1.35;font-weight:400;color:var(--gh-ink);
}
body.rbr-gh-v1:lang(en) .rbr-gh-route-grid article > h2{max-width:18ch;}
body.rbr-gh-v1 .rbr-gh-route-grid article > p:not(.overline){
  grid-column:1;line-height:1.9;font-size:.86rem;color:var(--gh-muted);margin:0;max-width:36ch;
}
body.rbr-gh-v1 .rbr-gh-route-diagram{
  grid-column:2;grid-row:2 / span 2;display:flex;align-items:center;justify-content:center;
  min-width:0;padding-left:4px;
}
body.rbr-gh-v1 .rbr-gh-route-diagram ol{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;
  width:100%;max-width:218px;position:relative;
}
body.rbr-gh-v1 .rbr-gh-route-diagram ol::before{
  content:"";position:absolute;top:24px;bottom:24px;left:12px;
  width:0;border-left:1.5px dashed #8da99e;
}
body.rbr-gh-v1 .rbr-gh-stop{
  position:relative;z-index:1;min-height:52px;display:flex;align-items:center;gap:11px;
  margin:0;padding:6px 0;color:#274b42;
  font-size:clamp(.68rem,.84vw,.86rem);line-height:1.4;font-weight:600;
}
body.rbr-gh-v1 .rbr-gh-stop-icon{
  flex:none;width:25px;height:25px;box-sizing:border-box;padding:5px;
  color:#194e44;background:#e7efea;border:1px solid #779c8d;border-radius:50%;
}
body.rbr-gh-v1 .rbr-gh-route-note,.rbr-gh-v1 .route-note{
  padding-top:2px;padding-bottom:50px;
}
body.rbr-gh-v1 .route-note .body-copy{
  max-width:950px;font-size:.81rem;line-height:1.85;margin:0;color:#687c75;
}

/* 04 — Trust-building included/not included/extra details. */
body.rbr-gh-v1 #cost-clarity{padding-top:20px;padding-bottom:clamp(64px,7vw,94px);}
body.rbr-gh-v1 #cost-clarity > .display-title,
body.rbr-gh-v1 #after-enquiry > .display-title{
  max-width:none;font-family:var(--gh-serif);font-size:clamp(2.25rem,3.6vw,3.8rem);
  color:var(--gh-ink);font-weight:400;letter-spacing:-.03em;line-height:1.3;margin:0 0 29px;
}
body.rbr-gh-v1 #cost-clarity .strategy-detail{
  margin:0;padding:0;border:0;border-top:1px solid var(--gh-line);
}
body.rbr-gh-v1 #cost-clarity .strategy-detail:last-of-type{border-bottom:1px solid var(--gh-line);}
body.rbr-gh-v1 #cost-clarity .strategy-detail summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;
  box-sizing:border-box;min-height:68px;width:100%;padding:15px 8px;
  font-size:clamp(.92rem,1.08vw,1.08rem);font-weight:500;color:var(--gh-ink);
}
body.rbr-gh-v1 #cost-clarity .strategy-detail summary::-webkit-details-marker{display:none;}
body.rbr-gh-v1 #cost-clarity .strategy-detail summary::marker{content:"";}
body.rbr-gh-v1 #cost-clarity .strategy-detail summary .rbr-gh-icon{color:#315f55;}
body.rbr-gh-v1 #cost-clarity .strategy-detail summary span:nth-child(2){flex:1;}
body.rbr-gh-v1 #cost-clarity .rbr-gh-plus{
  display:block;width:13px;height:13px;position:relative;flex:none;opacity:.72;
}
body.rbr-gh-v1 #cost-clarity .rbr-gh-plus::before,
body.rbr-gh-v1 #cost-clarity .rbr-gh-plus::after{
  content:"";position:absolute;background:currentColor;top:6px;left:0;width:13px;height:1px;
}
body.rbr-gh-v1 #cost-clarity .rbr-gh-plus::after{transform:rotate(90deg);}
body.rbr-gh-v1 #cost-clarity details[open] .rbr-gh-plus::after{display:none;}
body.rbr-gh-v1 #cost-clarity details .body-copy{margin:0;padding:0 46px 22px;font-size:.91rem;line-height:1.9;max-width:1050px;}
body.rbr-gh-v1 #cost-clarity summary:focus-visible,
body.rbr-gh-v1 .rbr-gh-estimate-action a:focus-visible,
body.rbr-gh-v1 .rbr-gh-end-cta a:focus-visible{outline:3px solid #5c9987;outline-offset:3px;}

/* 05 — Pricing: figures and exact data retained, presentation refined. */
body.rbr-gh-v1 #rates-2026{padding-top:12px;padding-bottom:clamp(70px,8vw,112px);}
body.rbr-gh-v1 #rates-2026 > .overline{font-size:.74rem;letter-spacing:.22em;color:#6c7d74;}
body.rbr-gh-v1 #rates-2026 > .display-title{
  font-family:var(--gh-serif);font-size:clamp(2.25rem,3.8vw,3.95rem);
  max-width:none;line-height:1.3;font-weight:400;letter-spacing:-.028em;
  color:var(--gh-ink);margin:12px 0 18px;
}
body.rbr-gh-v1 #rates-2026 > .rbr-p2-subtitle{
  color:var(--gh-muted);font-size:.94rem;line-height:1.95;max-width:70ch;margin-bottom:13px;
}
body.rbr-gh-v1 #rates-2026 .rbr-gh-estimate-action{margin:9px 0 28px;}
body.rbr-gh-v1 #rates-2026 .rbr-gh-estimate-action a{
  display:inline-flex;align-items:center;gap:23px;justify-content:space-between;
  text-decoration:none;background:#173f38;color:#fff;
  font-size:.83rem;letter-spacing:.07em;min-height:42px;padding:10px 18px;
  border:1px solid #173f38;box-sizing:border-box;
}
body.rbr-gh-v1 #rates-2026 .rbr-gh-estimate-action a:hover{background:#255e50;}
body.rbr-gh-v1 #rates-2026 .rbr-p2-highlights{gap:20px;margin-top:16px;margin-bottom:28px;}
body.rbr-gh-v1 #rates-2026 .rbr-p2-highlight{
  border:1px solid var(--gh-line);background:#fffefa;
  padding:26px 29px 29px;min-height:175px;box-sizing:border-box;
  box-shadow:0 6px 28px rgba(23,59,56,.025);
}
body.rbr-gh-v1 #rates-2026 .rbr-p2-highlight-price{
  font-size:clamp(2.55rem,3.6vw,3.75rem);letter-spacing:-.035em;line-height:1.05;
}
body.rbr-gh-v1 #rates-2026 .rbr-p2-highlight-label{font-size:.79rem;color:#31594f;}
body.rbr-gh-v1 #rates-2026 .rbr-p2-highlight-note{line-height:1.8;font-size:.86rem;}
body.rbr-gh-v1 #rates-2026 .rbr-p2-rate-details{
  border-top:1px solid var(--gh-line);border-bottom:1px solid var(--gh-line);
  padding:15px 0;margin:20px 0;
}
body.rbr-gh-v1 #rates-2026 .rbr-p2-rate-details summary{cursor:pointer;font-size:.98rem;color:var(--gh-ink);}
body.rbr-gh-v1 #rates-2026 .rbr-p2-table-wrap{max-width:100%;}
body.rbr-gh-v1 #rates-2026 .rbr-p2-source{line-height:1.9;}

/* 06 — Seven steps. Real SVG icons, never rasterized placeholders. */
body.rbr-gh-v1 #after-enquiry{padding-top:6px;padding-bottom:clamp(72px,8vw,108px);}
body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  margin:23px 0 34px;padding:0;gap:5px;list-style:none;
}
body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow li{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;
  padding:0 5px;text-align:center;list-style:none;margin:0;
}
body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow li:not(:last-child)::after{
  content:"→";position:absolute;top:22px;right:-11px;font-size:1.2rem;line-height:1;color:#82978e;
}
body.rbr-gh-v1 #after-enquiry .rbr-gh-step-icon{
  width:54px;height:54px;display:grid;place-items:center;margin-bottom:12px;
  border:1px solid #9ab3a8;border-radius:50%;color:#254c43;background:#f7f9f5;
}
body.rbr-gh-v1 #after-enquiry .rbr-gh-step-icon svg{width:25px;height:25px;}
body.rbr-gh-v1 #after-enquiry .rbr-gh-step-label{
  font-size:clamp(.7rem,.95vw,.9rem);line-height:1.55;color:#31584f;font-weight:600;
}
body.rbr-gh-v1 #after-enquiry > .body-copy,
body.rbr-gh-v1 #after-enquiry > .rbr-p2-booking-policy{
  max-width:900px;color:#5d716b;font-size:.92rem;line-height:1.9;
}
body.rbr-gh-v1 #after-enquiry > .rbr-p2-booking-policy{
  margin-top:18px;padding:10px 0 10px 18px;border-left:2px solid #8fa99d;
}

/* 07 — Resort-themed CTA, no fabricated photos or additional rate data. */
body.rbr-gh-v1 .rbr-gh-end-cta{
  position:relative;isolation:isolate;min-height:345px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  text-align:left;gap:15px;
  padding:65px max(7vw,calc((100vw - 1240px)/2));
  background-color:#c9dedc;
  background-image:linear-gradient(90deg,rgba(230,238,232,.97) 0%,rgba(230,238,232,.92) 34%,rgba(230,238,232,.2) 73%),var(--rbr-gh-cta-photo, url('/assets/uploads/overview.jpg'));
  background-size:cover;background-position:center 60%;
}
body.rbr-gh-v1 .rbr-gh-end-cta > .overline{color:#4d6b61;font-size:.71rem;letter-spacing:.2em;margin:0;}
body.rbr-gh-v1 .rbr-gh-end-cta h2{
  color:var(--gh-ink);margin:0 0 10px;
  font-family:var(--gh-serif);font-weight:400;
  font-size:clamp(2.4rem,4.2vw,4.5rem);line-height:1.25;max-width:18ch;letter-spacing:-.028em;
  text-align:left;
}
body.rbr-gh-v1 .rbr-gh-end-cta .button-dark{
  display:inline-flex;align-items:center;min-height:48px;padding:10px 26px;
  font-size:.87rem;letter-spacing:.045em;background:#163d36;color:#fff;border:1px solid #163d36;
}
body.rbr-gh-v1 .journey-band{padding:35px 22px;background:#e5eae5;}
body.rbr-gh-v1 .journey-band .journey-inner{max-width:1150px;margin:0 auto;}
body.rbr-gh-v1 .journey-band h2{font-size:clamp(1.32rem,2.4vw,2.1rem);line-height:1.35;}
body.rbr-gh-v1 .journey-band .journey-copy{font-size:.87rem;line-height:1.75;}

/* Tablet and mobile: every visual node and link stays readable. */
@media(max-width:1080px){
  body.rbr-gh-v1 .rbr-gh-route-grid article{grid-template-columns:minmax(0,1fr) minmax(120px,.78fr);}
  body.rbr-gh-v1 .rbr-gh-route-grid article > h2{font-size:clamp(1.65rem,2.55vw,2.15rem);}
  body.rbr-gh-v1 .rbr-gh-stop{font-size:.72rem;}
}
@media(max-width:900px){
  body.rbr-gh-v1 .rbr-gh-planning{grid-template-columns:1fr;gap:22px;padding-top:60px;}
  body.rbr-gh-v1 .rbr-gh-planning > :not(.rbr-gh-arrival){grid-column:1;}
  body.rbr-gh-v1 .rbr-gh-arrival{grid-column:1;grid-row:auto;min-height:300px;margin-top:7px;}
  body.rbr-gh-v1 .rbr-gh-route-grid{grid-template-columns:1fr;gap:20px;}
  body.rbr-gh-v1 .rbr-gh-route-grid article{grid-template-columns:minmax(0,1fr) minmax(160px,.67fr);}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:25px;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow li:nth-child(4)::after{display:none;}
}
@media(max-width:640px){
  body.rbr-gh-v1 .inner-main .shell,body.rbr-gh-v1 .route-note.shell{
    width:calc(100% - 36px);max-width:none;
  }
  body.rbr-gh-v1 .rbr-gh-hero{
    min-height:450px;padding:120px 25px 55px;
    background-image:linear-gradient(180deg,rgba(246,247,243,.92) 0%,rgba(246,247,243,.86) 48%,rgba(246,247,243,.33) 100%),var(--rbr-gh-hero-photo, url('/assets/uploads/overview.jpg'));
    background-position:center 55%;
  }
  body.rbr-gh-v1 .rbr-gh-hero h1{font-size:clamp(2.65rem,10.5vw,4.2rem);max-width:11ch;line-height:1.28;}
  body.rbr-gh-v1:lang(en) .rbr-gh-hero h1{font-size:clamp(2.6rem,9.5vw,4rem);max-width:16ch;}
  body.rbr-gh-v1 .rbr-gh-hero .body-copy{font-size:.9rem;line-height:1.85;}
  body.rbr-gh-v1 .rbr-gh-planning{padding-top:50px;padding-bottom:42px;}
  body.rbr-gh-v1 .rbr-gh-planning > .display-title{font-size:clamp(2rem,8vw,3rem);}
  body.rbr-gh-v1 .rbr-gh-planning > .body-copy{font-size:.92rem;}
  body.rbr-gh-v1 .rbr-gh-arrival{min-height:220px;aspect-ratio:16/10;}
  body.rbr-gh-v1 .rbr-gh-route-grid article{grid-template-columns:1fr;padding:22px;}
  body.rbr-gh-v1 .rbr-gh-route-grid article > h2{font-size:clamp(1.7rem,7vw,2.4rem);max-width:100%;}
  body.rbr-gh-v1 .rbr-gh-route-grid article > p:not(.overline){max-width:none;font-size:.9rem;}
  body.rbr-gh-v1 .rbr-gh-route-diagram{grid-column:1;grid-row:auto;margin-top:22px;padding-top:16px;border-top:1px solid var(--gh-line);}
  body.rbr-gh-v1 .rbr-gh-route-diagram ol{max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  body.rbr-gh-v1 .rbr-gh-route-diagram ol::before{left:10%;right:10%;top:18px;bottom:auto;width:auto;border-left:0;border-top:1.5px dashed #8da99e;}
  body.rbr-gh-v1 .rbr-gh-stop{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:4px 2px;min-height:70px;font-size:.67rem;}
  body.rbr-gh-v1 .route-note{padding-top:12px;padding-bottom:43px;}
  body.rbr-gh-v1 #cost-clarity{padding-top:20px;padding-bottom:55px;}
  body.rbr-gh-v1 #cost-clarity > .display-title,
  body.rbr-gh-v1 #after-enquiry > .display-title,
  body.rbr-gh-v1 #rates-2026 > .display-title{font-size:clamp(2rem,7.7vw,3rem);}
  body.rbr-gh-v1 #cost-clarity .strategy-detail summary{gap:11px;min-height:61px;padding:12px 2px;font-size:.86rem;}
  body.rbr-gh-v1 #cost-clarity .strategy-detail summary .rbr-gh-icon{width:22px;height:22px;}
  body.rbr-gh-v1 #cost-clarity details .body-copy{padding:0 10px 18px 35px;font-size:.85rem;}
  body.rbr-gh-v1 #rates-2026{padding-bottom:58px;}
  body.rbr-gh-v1 #rates-2026 .rbr-p2-highlights{grid-template-columns:1fr;}
  body.rbr-gh-v1 #rates-2026 .rbr-p2-highlight{padding:22px 22px 25px;min-height:0;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:23px;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-stepflow li::after{display:none;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-step-icon{width:48px;height:48px;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-step-icon svg{width:22px;height:22px;}
  body.rbr-gh-v1 #after-enquiry .rbr-gh-step-label{font-size:.72rem;}
  body.rbr-gh-v1 .rbr-gh-end-cta{
    min-height:360px;padding:66px 25px;
    background-image:linear-gradient(180deg,rgba(231,238,232,.97),rgba(231,238,232,.75)),var(--rbr-gh-cta-photo, url('/assets/uploads/overview.jpg'));
  }
  body.rbr-gh-v1 .rbr-gh-end-cta h2{font-size:clamp(2.25rem,8.1vw,3.4rem);max-width:14ch;}
}
@media(prefers-reduced-motion:reduce){
  body.rbr-gh-v1 *,body.rbr-gh-v1 *::before,body.rbr-gh-v1 *::after{scroll-behavior:auto!important;transition:none!important;}
}