/* ===== Gulet Point — Campaign / Announcement Popup ===== */
/* Hex values hardcoded (not var()) for the same reason as global.css: this renders via
   get_footer, outside any page wrapper that defines the --sea/--gold/--mist custom
   properties. Bottom-right corner card by default, not a full-screen modal — deliberately
   small and quiet (a boutique charter brand, not a "SALE" popup). "Expand" campaigns grow
   into a centered modal on click; see assets/campaign.js for the click-behavior logic. */

.gp-campaign[hidden]{ display:none; }

/* Dimmed backdrop — only meaningful for "expand" campaigns; invisible and non-interactive
   otherwise, so it costs "navigate" campaigns nothing. */
.gp-campaign-overlay{
  /* Above the mobile quick-action bar (z-index:9998 in global.css) so an expanded campaign's
     backdrop and card aren't tucked behind it. */
  position:fixed; inset:0; background:rgba(11,30,38,.55); z-index:99997;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.gp-campaign.is-expanded .gp-campaign-overlay{ opacity:1; pointer-events:auto; }

.gp-campaign-card{
  position:fixed; right:20px; bottom:20px; left:auto; top:auto;
  width:340px; max-width:calc(100vw - 32px); max-height:75vh; overflow:hidden;
  background:#ffffff; border:1px solid #EDE7DA;
  box-shadow:0 24px 60px rgba(11,30,38,.22);
  font-family:'Jost',system-ui,sans-serif; color:#0B1E26;
  z-index:99998; opacity:0; transform:translate(0,0) scale(.97); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease,
             right .45s cubic-bezier(.4,0,.2,1), bottom .45s cubic-bezier(.4,0,.2,1),
             width .45s cubic-bezier(.4,0,.2,1), max-height .45s cubic-bezier(.4,0,.2,1);
}
.gp-campaign.show .gp-campaign-card{ opacity:1; transform:translate(0,0) scale(1); pointer-events:auto; }
.gp-campaign.is-expanded .gp-campaign-card{
  right:50%; bottom:50%; width:min(560px,92vw); max-height:85vh;
  transform:translate(50%,50%) scale(1);
  overflow-y:auto;
}

.gp-campaign-close{
  position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
  background:rgba(11,30,38,.85); border:none; padding:0; margin:0; line-height:0; font-size:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3;
  transition:background .2s;
}
.gp-campaign-close:hover{ background:#C2A35B; }
.gp-campaign-close svg{ display:block; width:12px; height:12px; }

.gp-campaign-body{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
.gp-campaign-body[href]:hover{ text-decoration:none; }
/* A plain (non-link) body — "expand" campaigns — still needs to read as clickable. */
div.gp-campaign-body{ cursor:pointer; }

/* Text mode */
.gp-campaign-in{ padding:26px 26px 24px; text-align:left; }
.gp-campaign-kicker{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:9.5px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:#C2A35B;
}
.gp-campaign-kicker::before{ content:""; width:18px; height:1px; background:#C2A35B; flex:0 0 18px; }
.gp-campaign-heading{
  margin:0 0 10px; font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:21px;
  line-height:1.3; color:#0B1E26;
}
.gp-campaign-desc{ margin:0 0 4px; font-size:13px; line-height:1.7; font-weight:300; color:#42514f; }
.gp-campaign-cta{
  display:inline-block; background:#C2A35B; color:#ffffff !important; text-decoration:none;
  padding:12px 24px; margin-top:14px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  font-weight:500; border:1px solid #C2A35B; transition:background .3s, border-color .3s;
}
.gp-campaign-cta:hover{ background:#A88947; border-color:#A88947; }

/* Extra content revealed only once an "expand" campaign is opened */
.gp-campaign-more{ display:none; margin-top:16px; padding-top:16px; border-top:1px solid #EDE7DA; }
.gp-campaign-more p{ margin:0; font-size:12.5px; line-height:1.75; font-weight:300; color:#42514f; }
.gp-campaign.is-expanded .gp-campaign-more{ display:block; opacity:0; animation:gpCampaignFadeIn .35s ease .15s forwards; }
@keyframes gpCampaignFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* Image mode — two crops swapped by breakpoint. .gp-campaign-imglink is only a real <a> when
   "Make image clickable (when expanded)" is on for this campaign; either way it stays
   pointer-events:none while collapsed so a click there falls through to .gp-campaign-body
   (which expands the card) instead of navigating early, and only becomes clickable itself
   once expanded. */
.gp-campaign-imglink{ display:block; line-height:0; pointer-events:none; }
.gp-campaign.is-expanded .gp-campaign-imglink{ pointer-events:auto; cursor:pointer; }
.gp-campaign-img{ display:none; width:100%; height:auto; object-fit:cover; }
.gp-campaign-img.is-desktop{ display:block; }
.gp-campaign.is-expanded .gp-campaign-img{ object-fit:contain; max-height:80vh; background:#0B1E26; }

@media (max-width:640px){
  /* Sits above the mobile quick-action bar (see global.css: fixed, ~64px + safe-area-inset-bottom) */
  .gp-campaign-card{ right:12px; left:12px; bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 12px); width:auto; max-width:none; }
  .gp-campaign.is-expanded .gp-campaign-card{ left:12px; right:12px; bottom:50%; width:auto; transform:translate(0,50%) scale(1); }
  .gp-campaign-img.is-desktop{ display:none; }
  .gp-campaign-img.is-mobile{ display:block; }
  .gp-campaign-in{ padding:22px 22px 20px; }
  .gp-campaign-heading{ font-size:19px; }
}

@media (prefers-reduced-motion: reduce){
  .gp-campaign-card, .gp-campaign-overlay{ transition:opacity .2s linear !important; }
}