/* ===== Gulet Point — Destination page (V3 luxury) ===== */
.gp-dest{
  --sea:#0B1E26; --sea2:#0E2730; --gold:#C2A35B; --goldsoft:#D8C08A; --gold2:#A88947;
  --mist:#EDE7DA; --mist2:#F6F2EA;
  --disp:'Marcellus',Georgia,serif; --ui:'Jost',system-ui,sans-serif;
  font-family:var(--ui); color:var(--sea); line-height:1.7;
}
.gp-dest *{ box-sizing:border-box; }
.gp-dest h1,.gp-dest h2,.gp-dest h3{ font-family:var(--disp); font-weight:400; color:var(--sea); margin:0; }

.page-template-gp-destination .content-container, .page-template-gp-destination #primary, .page-template-gp-destination .entry-content,
.page-template-gp-destination .content-area, .page-template-gp-destination .site-container, .page-template-gp-destination .site-content{
  max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important;
}

.gp-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:10.5px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:400; margin:0 0 14px; }
.gp-eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); }
.gp-eyebrow.center{ justify-content:center; }
.gp-eyebrow.center::after{ content:""; width:28px; height:1px; background:var(--gold); }
.gp-eyebrow.soft{ color:var(--goldsoft); }
.gp-eyebrow.soft::before,.gp-eyebrow.soft::after{ background:var(--goldsoft); }

.gp-btn{ display:inline-block; background:var(--gold); color:#ffffff !important; padding:14px 30px; font-family:var(--ui); font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:500; text-decoration:none; border:1px solid var(--gold); transition:all .3s; cursor:pointer; }
.gp-btn:hover{ background:var(--gold2); border-color:var(--gold2); }

/* Hero — same legible "glass panel over photo" pattern as the homepage.
   The image layer is capped at max-width:1920px and centered (not a full-bleed
   background-image) so it's never stretched past its native resolution on very wide
   monitors — a photo softens/pixelates once the browser has to upscale it beyond that.
   On screens wider than 1920px the --sea navy shows as a deliberate letterbox margin. */
.gp-dest-hero{ position:relative; min-height:420px; background-color:var(--sea); overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.gp-dest-hero-imgwrap{ position:absolute; inset:0; max-width:1920px; margin:0 auto; }
.gp-dest-hero-imgwrap img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
.gp-dest-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,30,38,.22) 0%,rgba(11,30,38,.12) 40%,rgba(11,30,38,.38) 100%); }
.gp-dest-hero-in{ position:relative; z-index:2; max-width:680px; padding:50px 24px; }
.gp-dest-glass{ background:radial-gradient(ellipse 120% 100% at center, rgba(8,21,25,.5) 0%, rgba(8,21,25,.28) 45%, rgba(8,21,25,0) 78%); padding:40px 50px; }
.gp-dest-hero-in h1{ font-size:48px; color:#fff !important; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.gp-dest-hero-in .sub{ font-size:13px; color:rgba(255,255,255,.85); font-weight:300; margin:14px 0 0; }

/* Sections */
.gp-dest-sec{ padding:64px 40px; background:#fff; }
.gp-dest-sec.alt{ background:var(--mist2); }
/* Tightened: the gap between the story text and the gallery right below it was too large. */
.gp-dest-sec-story{ padding-bottom:20px; }
.gp-dest-sec-gallery{ padding-top:20px; }
.gp-dest-sec-head{ text-align:center; margin-bottom:44px; }
.gp-dest-sec-head h2{ font-size:32px; margin-top:8px; }

/* Story — the "The Bay" eyebrow stays centered (it's a direct child of .gp-dest-story),
   only the body copy itself (.txt) goes left-aligned — multi-paragraph center-aligned
   text is hard to read at this length. Now a WYSIWYG field, so real <h2>/<h3>/<strong>
   tags need their own styling. */
.gp-dest-story{ max-width:720px; margin:0 auto; text-align:center; }
.gp-dest-story .txt{ font-size:15.5px; color:#33403e; font-weight:300; text-align:left; }
.gp-dest-story .txt p{ margin:0 0 16px; }
.gp-dest-story .txt h2,
.gp-dest-story .txt h3{ font-family:var(--disp); font-weight:400; color:var(--sea); font-size:21px; margin:28px 0 12px; }
.gp-dest-story .txt h2:first-child,
.gp-dest-story .txt h3:first-child{ margin-top:0; }
.gp-dest-story .txt strong{ font-weight:500; color:var(--sea); }
.gp-dest-story .txt a{ color:var(--gold2); text-decoration:underline; text-underline-offset:2px; }

/* Quiet fact line */
.gp-dest-fact{ text-align:center; padding:20px 24px; background:var(--mist2); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); font-size:12px; letter-spacing:.5px; color:#5a6b6e; }

/* Gallery — 6 even tiles (3x2), no "big" tile — deliberately distinct from the yacht
   gallery's 1-big+4-small layout. Rest reachable via "View all X photos" + lightbox. */
.gp-dest-gallery{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:6px; }
.gp-dest-gallery .gp-gi{ position:relative; display:block; overflow:hidden; border:1px solid rgba(11,30,38,.10); }
.gp-dest-gallery .gp-gi img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.gp-dest-gallery .gp-gi:hover img{ transform:scale(1.04); }
.gp-dest-gallery .gp-gi-hidden{ display:none; }
.gp-dest-gallery .gp-gi.has-more::before{ content:""; position:absolute; inset:0; background:rgba(11,30,38,.62); z-index:1; transition:background .3s; }
.gp-dest-gallery .gp-gi.has-more:hover::before{ background:rgba(11,30,38,.72); }
.gp-dest-gallery .gp-more-label{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; font-family:var(--ui); font-size:11.5px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; text-align:center; }

/* Fleet grid */
.gp-dest-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gp-dest-card{ position:relative; display:block; background:#fff; border:1px solid var(--mist); text-decoration:none; color:inherit; transition:box-shadow .35s, transform .35s; overflow:hidden; }
.gp-dest-card:hover{ box-shadow:0 26px 54px rgba(11,30,38,.16); transform:translateY(-4px); }
.gp-dest-card img{ width:100%; height:200px; object-fit:cover; display:block; transition:transform .5s ease; }
.gp-dest-card:hover img{ transform:scale(1.07); }
.gp-dest-card-b{ padding:20px 22px; }
.gp-dest-card-b .t{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.gp-dest-card-b h3{ font-size:21px; margin-bottom:10px; }
.gp-dest-card-b .sp{ display:flex; gap:12px; font-size:11px; color:#5a6b6e; margin-bottom:12px; }
.gp-dest-card-b .sp span{ display:inline-flex; align-items:center; gap:4px; }
.gp-dest-card-b .sp .ic{ width:13px; height:13px; flex:0 0 13px; color:var(--gold2); opacity:.8; }
.gp-dest-card-b .pr{ font-family:var(--disp); font-size:17px; color:var(--sea); margin:0; }
.gp-dest-card-b .pr s{ font-family:var(--ui); font-size:10px; color:#8a9698; text-decoration:none; }
.gp-dest-viewall{ text-align:center; margin-top:36px; }
.gp-dest-viewall a{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold2); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:3px; }

/* Quiet "back to hub" strip between the content and the dark Enquiry band — thinner
   than a normal section, it's just one link, not a full content block. */
.gp-dest-hub-nav{ padding:28px 40px !important; }
.gp-dest-hub-nav .gp-dest-viewall{ margin-top:0; }

/* Enquiry */
.gp-dest-enq{ background:var(--sea2); padding:64px 40px; text-align:center; }
.gp-dest-enq h2{ font-size:30px; color:#fff; margin:12px 0 26px; }

/* Destinations hub — lists every child page */
/* Light/short header band — not a photo hero (see project notes: a hub page represents a
   whole category, no single photo represents "all destinations" honestly) and not the
   heavy dark-navy full-height band it used to be, which felt suffocating across 3 pages. */
.gp-dest-hub-head{ background:var(--mist2); padding:36px 40px 30px; text-align:center; }
.gp-dest-hub-head h1{ font-size:38px; color:var(--sea); margin-top:8px; }
.gp-dest-hub-head .sub{ font-size:13px; color:#5a6b6e; font-weight:300; margin:14px auto 0; max-width:460px; }
.gp-dest-hub-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.gp-dest-hub-card{ display:block; background:#fff; border:1px solid var(--mist); text-decoration:none; color:inherit; transition:box-shadow .3s; overflow:hidden; }
.gp-dest-hub-card:hover{ box-shadow:0 20px 44px rgba(11,30,38,.12); }
.gp-dest-hub-card img{ width:100%; height:210px; object-fit:cover; display:block; }
.gp-dest-hub-card-b{ padding:24px 26px; }
.gp-dest-hub-card-b h3{ font-size:24px; margin-bottom:10px; }
.gp-dest-hub-card-b p{ font-size:13px; color:#42514f; font-weight:300; line-height:1.7; margin:0 0 16px; }
.gp-dest-hub-card-b span{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold2); }

/* Responsive */
@media (max-width:900px){
  .gp-dest-card img, .gp-dest-hub-card img{ height:auto; aspect-ratio:16 / 10; }
  .gp-dest-hero-in h1{ font-size:32px; }
  .gp-dest-glass{ padding:26px 24px; }
  .gp-dest-grid{ grid-template-columns:1fr; }
  /* Shorter tiles on phones — 200px tall in a ~163px-wide column cropped landscape photos into portrait slivers. */
  .gp-dest-gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:135px; }
  .gp-dest-sec{ padding:44px 20px; }
  .gp-dest-hub-nav{ padding:24px 20px !important; }
  .gp-dest-enq{ padding:48px 20px; }
  .gp-dest-hub-head h1{ font-size:32px; }
  .gp-dest-hub-grid{ grid-template-columns:1fr; }
}