/* ===== Gulet Point — Homepage (V3 luxury) ===== */
.gp-home{
  --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-home *{ box-sizing:border-box; }
.gp-home h1,.gp-home h2,.gp-home h3{ font-family:var(--disp); font-weight:400; color:var(--sea); margin:0; }

/* Let sections run full width */
.home .content-container, .home #primary, .home .entry-content,
.home .content-area, .home .site-container, .home .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); }

/* Buttons (duplicated here since homepage.css loads standalone) — white text on gold, matching the header CTA */
.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); }
.gp-btn.outline{ background:transparent; color:var(--gold) !important; border:1px solid var(--gold); }
.gp-btn.outline:hover{ background:var(--gold); border-color:var(--gold); color:#ffffff !important; }

/* Hero — clean edge into the next section (no fade); legibility comes from an actual glass panel behind the text */
.gp-h-hero{ position:relative; min-height:640px; background-color:var(--sea); background-size:cover; background-position:center 42%; display:flex; align-items:center; justify-content:center; text-align:center; overflow:visible; }
.gp-h-hero-mphoto{ display:none; }
.gp-h-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-h-hero-in{ position:relative; z-index:2; max-width:760px; padding:60px 24px; }
.gp-h-hero-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:50px 60px; }
.gp-h-title,
.gp-h-title em{ font-size:56px; line-height:1.05; letter-spacing:.5px; }
/* Colors read from CSS custom properties set inline per-page (see front-page.php) so a
   new hero photo that doesn't suit white/gold text can be corrected from the ACF panel —
   the var() fallback is the original design when no override is set. */
.gp-h-title{ color:var(--hero-title-color, #ffffff) !important; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.gp-h-title em{ font-style:italic; color:var(--hero-accent-color, var(--goldsoft)) !important; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.gp-h-sub{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--hero-sub-color, rgba(255,255,255,.9)); margin:20px 0 0; }
.gp-h-hero-in .gp-eyebrow{ margin-bottom:16px; }
.gp-h-hero-in .gp-eyebrow.soft{ color:var(--hero-eyebrow-color, var(--goldsoft)); }
.gp-h-hero-in .gp-eyebrow.soft::before,
.gp-h-hero-in .gp-eyebrow.soft::after{ background:var(--hero-eyebrow-color, var(--goldsoft)); }

/* Floating search card — absolutely positioned against the hero's own bottom edge.
   No sibling div in normal flow, so there's no gap for a stray background colour to show through. */
.gp-h-search-float{ position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); z-index:6; width:100%; max-width:1080px; padding:0 24px; }
.gp-h-search{ display:flex; align-items:stretch; background:var(--sea); box-shadow:0 20px 46px rgba(11,30,38,.28); border:1px solid rgba(194,163,91,.35); width:100%; }
.gp-h-field{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border-right:1px solid rgba(194,163,91,.2); text-align:left; min-width:0; cursor:pointer; }
.gp-h-field .l{ font-size:8.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }

/* Real <select>/<input> elements, restyled to sit flush with the .l label above (same look as
   the old decorative spans, now actually functional — no browser chrome, no extra padding). */
.gp-h-field select,
.gp-h-field input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent !important; border:none; outline:none; padding:0; margin:0; width:100%;
  font-family:var(--ui); font-size:13px; color:rgba(237,231,218,.9) !important; cursor:pointer;
}
/* Prevent the closed box from flashing white on hover/focus/active (Windows Chrome/Edge default) —
   the OPEN option list itself is native OS UI and can't be restyled with plain CSS. */
.gp-h-field select:hover, .gp-h-field select:focus, .gp-h-field select:active,
.gp-h-field input:hover, .gp-h-field input:focus, .gp-h-field input:active{
  background:transparent !important; color:rgba(237,231,218,.9) !important; box-shadow:none !important;
}
.gp-h-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A35B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat:no-repeat; background-position:right center; background-size:11px; padding-right:18px;
  accent-color:var(--gold);
}
.gp-h-field select option{ color:#0B1E26; }
.gp-h-field input::placeholder{ color:rgba(237,231,218,.9); opacity:1; }
.gp-h-field input[type="number"]{ cursor:text; }

.gp-h-search-btn{ background:var(--gold) !important; color:#ffffff !important; border:none !important; padding:0 32px; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:500 !important; text-decoration:none !important; display:flex; align-items:center; transition:background .3s; cursor:pointer; }
.gp-h-search-btn:hover{ background:var(--gold2) !important; color:#ffffff !important; }

/* Sections */
.gp-h-sec{ padding:76px 40px; background:#fff; }
.gp-h-sec.alt{ background:var(--mist2); }
.gp-h-sec-head{ text-align:center; margin-bottom:48px; max-width:600px; margin-left:auto; margin-right:auto; }
.gp-h-sec-head h2{ font-size:34px; margin-top:8px; }

/* Featured fleet */
.gp-h-fleet{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gp-h-card{ display:block; background:#fff; border:1px solid var(--mist); text-decoration:none; color:inherit; transition:box-shadow .35s, transform .35s; }
.gp-h-card:hover{ box-shadow:0 26px 54px rgba(11,30,38,.18); transform:translateY(-4px); }
.gp-h-card-img{ position:relative; overflow:hidden; }
.gp-h-card img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .5s ease; }
.gp-h-card:hover img{ transform:scale(1.07); }
.gp-h-card-country{ position:absolute; top:14px; left:14px; background:rgba(11,30,38,.82); color:#fff; font-size:9.5px; font-weight:500; letter-spacing:2px; text-transform:uppercase; padding:6px 12px; }
.gp-h-card-b{ padding:22px 24px; }
.gp-h-card-b .t{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.gp-h-card-b h3{ font-size:23px; margin-bottom:10px; }
.gp-h-card-b .sp{ display:flex; gap:14px; font-size:11px; color:#5a6b6e; margin-bottom:14px; }
.gp-h-card-b .sp span{ display:inline-flex; align-items:center; gap:4px; }
.gp-h-card-b .sp .ic{ width:13px; height:13px; flex:0 0 13px; color:var(--gold2); opacity:.8; }
.gp-h-card-b .pr{ font-family:var(--disp); font-size:18px; color:var(--sea); margin:0; }
.gp-h-card-b .pr s{ font-family:var(--ui); font-size:10px; color:#8a9698; text-decoration:none; }
.gp-h-viewall{ text-align:center; margin-top:40px; }
.gp-h-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; }

/* Destinations / Itineraries — cards with an OPTIONAL photo (falls back to text-only if none set) */
.gp-h-dest{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gp-h-dest-card{ display:block; background:#fff; border:1px solid var(--mist); text-align:center; text-decoration:none; color:inherit; transition:box-shadow .3s; overflow:hidden; }
.gp-h-dest-card:hover{ box-shadow:0 20px 44px rgba(11,30,38,.10); }
.gp-h-dest-card img{ width:100%; height:180px; object-fit:cover; display:block; }
.gp-h-dest-card-b{ padding:32px 30px; }
.gp-h-dest-card h3{ font-size:27px; margin-bottom:14px; }
.gp-h-dest-card p{ font-size:13.5px; color:#42514f; font-weight:300; line-height:1.75; margin:0 0 20px; }
.gp-h-dest-more{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold2); border-bottom:1px solid var(--gold); padding-bottom:3px; }
.gp-h-dest-more span{ transition:transform .3s; }
.gp-h-dest-card:hover .gp-h-dest-more span{ transform:translateX(4px); }

/* Why us */
.gp-h-why{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.gp-h-why-item{ text-align:center; }
.gp-h-why-item h3{ font-size:22px; margin-bottom:14px; }
.gp-h-why-item p{ font-size:14px; color:#42514f; font-weight:300; }

/* Testimonials + Google rating badge */
/* The whole badge is now a clickable link to the Google Reviews page (when set) — kept as a
   plain bordered box either way (not a .gp-btn) so it still reads as an info badge, not a CTA. */
.gp-h-gbadge{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--mist); padding:9px 20px; font-size:12px; color:#42514f; margin-top:6px; text-decoration:none; transition:border-color .2s, box-shadow .2s; }
a.gp-h-gbadge:hover{ border-color:var(--gold); box-shadow:0 8px 20px rgba(11,30,38,.08); }
.gp-h-gbadge b{ font-family:var(--disp); color:var(--sea); font-size:15px; }
.gp-h-gbadge .stars{ color:var(--gold); letter-spacing:1px; font-size:12px; }
.gp-h-gbadge .link{ color:var(--gold2); border-bottom:1px solid var(--gold); padding-bottom:1px; margin-left:4px; }

/* Cards render at equal height (align-items:stretch, the grid default) regardless of quote
   length — long quotes clamp to a fixed number of lines with a "Read more" toggle that
   expands the text in place (assets/homepage.js decides whether a given quote needs it). */
.gp-h-test-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.gp-h-test-card{ display:flex; flex-direction:column; background:var(--mist2); border:1px solid var(--mist); padding:34px 30px; }
.gp-h-test-card .q{ font-family:var(--disp); font-size:44px; color:var(--gold); line-height:.6; margin-bottom:6px; }
.gp-h-test-card .stars{ color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
.gp-h-test-card .quote-wrap{ flex:1; margin-bottom:22px; }
.gp-h-test-card .quote{ font-family:var(--disp); font-style:italic; font-size:16.5px; line-height:1.65; color:var(--sea); margin:0; }
.gp-h-test-card .quote.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.gp-test-more{ display:block; margin-top:8px; background:none; border:none; padding:0; font-family:var(--ui); font-size:11px; letter-spacing:1px; color:var(--gold2); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
/* Name/last-initial/country never clamp or hide, whatever happens to the quote above them. */
.gp-h-test-card .who{ border-top:1px solid var(--mist); padding-top:14px; margin-top:auto; }
.gp-h-test-card .who b{ display:flex; align-items:center; gap:6px; font-size:12.5px; letter-spacing:.5px; color:var(--sea); font-weight:500; }
.gp-h-test-card .who .gbadge svg{ width:13px; height:13px; display:block; }
.gp-h-test-card .who span{ display:block; font-size:11px; color:#8a9698; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }

/* Journal preview */
.gp-h-journal-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gp-h-journal-card{ display:block; background:#fff; border:1px solid var(--mist); text-decoration:none; color:inherit; transition:box-shadow .3s; }
.gp-h-journal-card:hover{ box-shadow:0 20px 44px rgba(11,30,38,.12); }
.gp-h-journal-card img{ width:100%; height:170px; object-fit:cover; display:block; }
.gp-h-journal-card-b{ padding:18px 20px; }
.gp-h-journal-card-b .cat{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
.gp-h-journal-card-b h3{ font-size:17.5px; line-height:1.35; margin:0; }

/* Enquiry */
.gp-h-enq{ background:var(--sea2); padding:80px 40px; text-align:center; }
.gp-h-enq h2{ font-size:38px; color:#fff; margin:14px 0 12px; }
.gp-h-enq .sub{ font-size:14px; color:rgba(237,231,218,.6); font-weight:300; margin:0 auto 30px; max-width:520px; }
.gp-h-enq-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }


/* Responsive */
@media (max-width:900px){
  /* Card photos keep a fixed 16:10 shape instead of a fixed pixel height — on a tablet the
     one-column card is ~550px wide, and 180-210px tall boxes cropped photos into thin strips. */
  .gp-h-card img, .gp-h-dest-card img, .gp-h-journal-card img{ height:auto; aspect-ratio:16 / 10; }
  /* Hero stacks vertically: text panel on top, search card below it, both over the photo.
     Previously the hero stayed a horizontal flex row, so the search card (a flex child)
     sat beside the text and ran off the right edge; the <em> also kept its 56px size. */
  /* Landscape photo band (text on the photo); the search card straddles its bottom edge,
     so the hero gets bottom margin equal to the half of the card that hangs below it. */
  /* Photo is shown (almost) whole in its own 16:10 box at the top instead of being cropped
     behind the text; the text sits below it on the site's deep green. */
  /* The photo is a real <img> at its natural ratio (no crop at all). The hero is a flex column
     and `order` puts the search card right after the photo, pulled up over its bottom edge
     with a negative margin — so this works for any photo shape, no height maths needed. */
  .gp-h-hero{ display:flex; flex-direction:column; align-items:stretch; min-height:0; margin-bottom:0; padding:0; background-image:none !important; background-color:var(--sea); text-align:center; }
  .gp-h-hero-mphoto{ display:block; order:1; width:100%; height:auto; }
  .gp-h-hero-scrim{ display:none; }
  .gp-h-hero-in{ order:3; width:100%; max-width:100%; padding:24px 16px 32px; }
  .gp-h-hero-glass{ background:none; }
  .gp-h-title,
  .gp-h-title em{ font-size:30px; }
  .gp-h-sub{ font-size:10.5px; letter-spacing:1px; margin-top:10px; }
  .gp-h-hero-glass{ padding:20px 14px; }
  .gp-h-hero-in .gp-eyebrow{ letter-spacing:2.5px; gap:8px; }
  .gp-h-eb{ text-align:center; }
  .gp-h-eb-part{ display:block; }
  .gp-h-eb-dot{ display:none; }
  .gp-h-hero-in .gp-eyebrow::before,
  .gp-h-hero-in .gp-eyebrow::after{ width:14px; flex:0 0 14px; }
  .gp-h-sec-head h2{ font-size:28px; }
  .gp-h-enq{ padding:56px 20px; }
  .gp-h-enq h2{ font-size:30px; }
  /* Search card overlaps the photo's bottom edge — compact and understated on phones. */
  .gp-h-search-float{ position:relative; order:2; left:auto; bottom:auto; transform:none; margin-top:-12px; width:100%; max-width:100%; padding:0 26px; }
  .gp-h-search{ flex-wrap:wrap; box-shadow:0 10px 24px rgba(11,30,38,.28); }
  /* Three fields side by side, slim Search button full-width underneath. */
  .gp-h-field{ flex:1 1 33.333%; padding:8px 8px; border-bottom:1px solid rgba(194,163,91,.2); }
  .gp-h-field:nth-of-type(3){ border-right:0; }
  .gp-h-field .l{ font-size:7px; letter-spacing:1.2px; margin-bottom:2px; }
  .gp-h-field select,
  .gp-h-field input{ font-size:11px; text-overflow:ellipsis; }
  .gp-h-search-btn{ flex:1 1 100%; padding:10px; font-size:9.5px; letter-spacing:1.6px; justify-content:center; }
  .gp-h-fleet{ grid-template-columns:1fr; }
  .gp-h-dest{ grid-template-columns:1fr; }
  .gp-h-test-grid{ grid-template-columns:1fr; }
  .gp-h-why{ grid-template-columns:1fr; gap:32px; }
  .gp-h-journal-grid{ grid-template-columns:1fr; }
  .gp-h-sec{ padding:52px 22px; }
  /* Phones: four yachts before the next section (six stacked = ~3.5 screens); "View all" becomes a button. */
  .gp-h-fleet > .gp-h-card:nth-child(n+5){ display:none; }
  .gp-h-viewall-fleet{ margin-top:28px; }
  /* Same as the site's gold buttons (Search): gold + navy text, hover darker gold + white. Beats global.css "html body .gp-h-viewall a". */
  html body .gp-h-viewall.gp-h-viewall-fleet a{ display:inline-block; background:var(--gold); color:#0B1E26; border:0; padding:15px 30px; letter-spacing:2px; font-weight:500; transition:background .3s, color .3s; }
  html body .gp-h-viewall.gp-h-viewall-fleet a:hover,
  html body .gp-h-viewall.gp-h-viewall-fleet a:focus-visible{ background:var(--gold2); color:#fff; }
}