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

.page-template-gp-about .content-container, .page-template-gp-about #primary, .page-template-gp-about .entry-content,
.page-template-gp-about .content-area, .page-template-gp-about .site-container, .page-template-gp-about .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 — light/short band, no photo (matches Destinations Hub/Itineraries Hub/Contact) */
.gp-about-hero{ background:var(--mist2); padding:36px 40px 30px; text-align:center; }
.gp-about-hero h1{ font-size:38px; color:var(--sea); margin-top:8px; }
.gp-about-hero .sub{ font-size:13px; color:#5a6b6e; font-weight:300; margin-top:10px; max-width:480px; margin-inline:auto; }

/* Sections */
.gp-about-sec{ padding:56px 40px; background:#fff; }
.gp-about-sec-head{ text-align:center; margin-bottom:36px; }
.gp-about-sec-head h2{ font-size:28px; margin-top:8px; }
.gp-about-sec-head .lede{ font-size:13px; color:#5a6b6e; font-weight:300; max-width:460px; margin:10px auto 0; }

.gp-about-story{ max-width:680px; margin:0 auto; text-align:center; }
.gp-about-story h2{ font-size:28px; margin:8px 0 18px; }
.gp-about-story .txt{ font-size:15.5px; color:#33403e; font-weight:300; text-align:left; }
.gp-about-story .txt p{ margin:0 0 16px; }
.gp-about-story .txt h2,
.gp-about-story .txt h3{ font-family:var(--disp); font-weight:400; color:var(--sea); font-size:21px; margin:28px 0 12px; }
.gp-about-story .txt h2:first-child,
.gp-about-story .txt h3:first-child{ margin-top:0; }
.gp-about-story .txt strong{ font-weight:500; color:var(--sea); }
.gp-about-story .txt a{ color:var(--gold2); text-decoration:underline; text-underline-offset:2px; }

/* Stats */
.gp-about-stats{ background:var(--sea); padding:44px 40px; display:flex; justify-content:center; gap:56px; flex-wrap:wrap; }
.gp-about-stat{ text-align:center; color:#fff; }
.gp-about-stat .n{ font-family:var(--disp); font-size:36px; color:var(--goldsoft); }
.gp-about-stat .l{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(237,231,218,.6); margin-top:4px; }

/* Behind the scenes — office/team-life photo strip. Single row (flex, not a wrapping
   grid) — same pattern as the team card row: every tile is the same size/ratio so it
   looks right regardless of photo count, and once they don't fit the row scrolls
   horizontally via the prev/next arrows instead of wrapping/leaving a dangling row. */
.gp-about-photos{ padding:56px 40px; background:var(--mist2); }
.gp-about-photos-wrap{ position:relative; max-width:1140px; margin:0 auto; }
.gp-about-photos-grid{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.gp-about-photos-grid::-webkit-scrollbar{ display:none; height:0; }
/* Same white-border + rounded treatment as the team photo circles, applied to a
   rectangular frame here instead of a perfect circle (a true circle would clip these). */
.gp-about-photos-grid figure{ position:relative; margin:0; flex:0 0 260px; aspect-ratio:4/3; overflow:hidden; border:5px solid #fff; border-radius:22px; box-shadow:0 12px 28px rgba(11,30,38,.14); background:var(--sea); }
.gp-about-photos-grid figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.gp-about-photos-grid figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,30,38,0) 55%,rgba(11,30,38,.6) 100%); pointer-events:none; }
.gp-about-photos-grid figcaption{ position:absolute; left:14px; bottom:10px; color:#fff; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; z-index:2; text-shadow:0 1px 6px rgba(0,0,0,.5); }
@media (max-width:700px){
  .gp-about-photos{ padding:40px 20px; }
  .gp-about-photos-grid figure{ flex-basis:220px; }
}

/* Team */
/* A single row (flex, not a wrapping grid) — cards line up side by side as more people are
   added, and once they no longer fit the container width it scrolls horizontally instead
   of wrapping to a new row. Wrapping was also what caused the hover-preview (below) to
   overlap the card sitting directly underneath it. The scrollbar itself is hidden and
   replaced by the prev/next arrow buttons (see page-about.php) for a cleaner look. */
.gp-about-team-wrap{ position:relative; max-width:1180px; margin:0 auto; }
.gp-about-team-grid{ display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.gp-about-team-grid::-webkit-scrollbar{ display:none; height:0; }
.gp-tcard{ position:relative; flex:0 0 300px; background:var(--mist2); border:1px solid var(--mist); padding:34px 24px 28px; text-align:left; overflow:hidden; }
.gp-tcard::before{ content:""; position:absolute; top:0; right:0; bottom:0; width:22%; background:var(--sea); }
.gp-tcard-in{ position:relative; z-index:2; }
/* Name/role/email text is capped to the light-background portion of the card (the dark
   stripe is the right ~22%) — previously long names/emails ran into that stripe and
   vanished, since the text colour is the same dark navy as the stripe itself. Widened
   the card and this cap together so "M. Erhan DEMİR" / long email addresses fit on one
   line instead of wrapping. */
.gp-tcard-in{ max-width:78%; }
.gp-tcard .name{ white-space:nowrap; }
.gp-tcard .mail{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Nav arrows */
.gp-team-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--mist); color:var(--sea); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px rgba(11,30,38,.12); z-index:5; transition:background .2s, box-shadow .2s; }
.gp-team-arrow:hover{ background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 10px 26px rgba(11,30,38,.2); }
.gp-team-arrow svg{ width:18px; height:18px; display:block; }
.gp-team-arrow.prev{ left:-21px; }
.gp-team-arrow.next{ right:-21px; }
.gp-team-arrow[hidden]{ display:none; }
@media (max-width:1240px){
  .gp-team-arrow.prev{ left:6px; }
  .gp-team-arrow.next{ right:6px; }
}
.gp-tcard .photo-wrap{ position:relative; width:150px; height:150px; margin:0 0 20px; }
.gp-tcard .ring{ position:absolute; inset:-6px; border:1.5px solid var(--gold); border-radius:50%; }
.gp-tcard img{ width:150px; height:150px; border-radius:50%; object-fit:cover; display:block; }
.gp-tcard .name{ font-family:var(--disp); font-size:19px; line-height:1.25; letter-spacing:.3px; color:var(--sea); }
.gp-tcard .role{ font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold2); margin:6px 0 16px; }
.gp-tcard .mail{ font-size:11.5px; color:#5a6b6e; font-weight:300; border-top:1px solid var(--mist); padding-top:14px; word-break:break-all; }

.gp-tcard .mail a{ color:var(--sea); text-decoration:none; }

/* CTA */
.gp-about-cta{ padding:50px 40px; text-align:center; background:var(--sea2); }
.gp-about-cta h2{ font-size:26px; color:#fff !important; margin:10px 0 20px; }

/* Responsive */
@media (max-width:900px){
  .gp-about-hero h1{ font-size:30px; }
  .gp-about-sec{ padding:40px 20px; }
  .gp-tcard{ flex-basis:240px; }
  .gp-about-stats{ gap:30px; }
}