/* The reusable customer page (assets/js/group-site.js; Karen, 10 Nov). Every word,
   photo, ship, background, logo and the ribbon colour come from the group's settings;
   nothing customer-specific lives in this file. */
.gs { --gold: #e5b447; --gold-2: #f6d77c; --gold-3: #b98322; --ink: #0b1a30; --ribbon: #102748;
  --night: #07090c; font-family: 'Inter', Arial, sans-serif; color: var(--ink); background: #faf6ed; }
.gs a { color: inherit; }
.gs-script { font-family: 'Great Vibes', 'Playfair Display', cursive; font-weight: 400; }

/* Navigation (approved design, 10 Nov): full-width black bar, the real logo at the left, then
   Magazine, Video, Checklist, Cruise Shop, Leave a Message, My Booking, Group Details and
   Join the Cruise in gold at the end. Tablets and phones: logo, Join and a Menu button; the
   Menu opens a list of big, easy-to-tap links (no tiny pills). */
.gs-nav { position: sticky; top: 0; z-index: 30; background: var(--night); color: #fff; display: flex; align-items: center;
  gap: 12px; padding: 10px clamp(12px, 2.4vw, 34px); box-shadow: 0 3px 14px rgba(0,0,0,.35); }
.gs-nav__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* The white straight-across logo sits straight on the black bar; an uploaded logo of unknown
   colour keeps a white chip so it can't vanish. */
.gs-nav__logo img { height: 48px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.gs-nav__logo--upload img { background: #fff; border-radius: 10px; padding: 3px 6px; }
.gs-nav__links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 7px; margin-left: auto; min-width: 0; }
.gs-pill { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid rgba(255,255,255,.55); color: #f4f2ec; background: transparent;
  border-radius: 999px; padding: 9px 13px; font: 600 13.5px/1.1 'Inter', Arial, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.gs-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }
.gs-pill:hover { border-color: var(--gold); color: #fff; }
.gs-pill:focus-visible, .gs-btn:focus-visible, .gs-hot:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.gs-pill--primary { background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: var(--gold); color: #10151c; font-weight: 800; }
.gs-pill--primary:hover { color: #10151c; filter: brightness(1.05); }
.gs-pill--outline { border: 2px solid var(--gold); color: var(--gold-2); font-weight: 800; }
.gs-pill--outline:hover { background: rgba(229,180,71,.12); color: var(--gold-2); }
.gs-pill--trip { display: none; }
.gs-nav__more { display: none; }
.gs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ONE scene (Karen's approved design, 10 Nov): the celebration and the Let's Set Sail ribbon
   share one background picture. On computers the customer stands full height on the left
   through both, and everything else is centred in the space to her right (--pz = her space).
   The Happy Vacation banner is a separate section below with nobody in it. */
.gs-scene { position: relative; overflow: hidden; --pz: 0%; background-color: #13305a;
  background-image: var(--bgd, linear-gradient(170deg, #13305a, #0f5a86 55%, #e8c08a)); background-size: cover; background-repeat: no-repeat;
  background-position: var(--fx, 50%) var(--fy, 50%); }
.gs-scene--photo { --pz: 30%; }
.gs-scene__photo { position: absolute; z-index: 4; left: var(--px, 2%); bottom: var(--py, 0%); height: calc(var(--ph, 100%) - 24px);
  max-height: calc(100% - var(--py, 0%) - 24px); width: auto; max-width: calc(var(--pz) + 3%); object-fit: contain; object-position: bottom left;
  pointer-events: none; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.gs-hero { position: relative; min-height: clamp(430px, 34vw, 540px); color: #fff; text-align: center; padding-left: var(--pz); }
.gs-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,21,43,var(--ov, .25)), rgba(6,21,43,calc(var(--ov, .25) * .4))); pointer-events: none; }
/* The phone copy of the photo (hidden on computers). */
.gs-hero__stage { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gs-hero__photo { position: absolute; width: auto; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.gs-hero__ship { position: absolute; z-index: 1; right: var(--sr, 3%); top: var(--st, 30%); width: var(--sw, 30%); height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.gs-hero__copy { position: relative; z-index: 3; max-width: min(720px, 94%); margin: 0 auto; padding: clamp(28px, 3.4vw, 50px) 0 46px; }
.gs-eyebrow { font: 700 13px/1.4 'Inter', Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.gs-hero h1 { font: italic 700 clamp(3rem, 5.9vw, 5.8rem)/1.0 'Playfair Display', Georgia, serif; margin: 12px 0 10px; text-shadow: 0 4px 18px rgba(0,0,0,.45); }
.gs-hero h1 .gs-gold { color: var(--gold-2); }
.gs-swash { display: block; width: min(420px, 80%); height: 14px; margin: 0 auto 12px; }
.gs-hero__line { font-size: clamp(1rem, 1.5vw, 1.2rem); margin: 4px 0; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.gs-hero .countdown { margin-top: 16px; }
.gs-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gs-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer; text-decoration: none;
  font: 800 15px/1.1 'Inter', Arial, sans-serif; background: linear-gradient(180deg, #fbe39a, var(--gold) 55%, #d39a2c); color: #13202f;
  box-shadow: 0 4px 0 var(--gold-3), 0 8px 18px rgba(0,0,0,.25); }
.gs-btn svg { width: 19px; height: 19px; }
.gs-btn:hover { filter: brightness(1.05); }
.gs-btn--dark { background: linear-gradient(180deg, #17345d, #0b1f3b); color: #fff; border: 2px solid var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
/* Links styled as buttons: dark lettering on gold, white on navy (the page-wide link rule
   would otherwise turn them white). */
.gs a.gs-btn { color: #13202f; }
.gs a.gs-btn--dark { color: #fff; }

/* The ribbon across the scene: colour from the group's settings (slightly see-through), gold wave trim. */
.gs-sail { position: relative; z-index: 2; background: var(--ribbon); background: color-mix(in srgb, var(--ribbon) 90%, transparent); color: #fff; text-align: center;
  padding: 50px 20px 46px calc(var(--pz) + 20px); }
.gs-wave { position: absolute; left: 0; width: 100%; height: 22px; display: block; }
.gs-wave--top { top: -1px; } .gs-wave--bot { bottom: -1px; transform: scaleY(-1); }
.gs-sail h2 { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0; color: var(--gold-2);
  font-size: clamp(3rem, 5.4vw, 4.4rem); line-height: 1.1; text-shadow: 0 3px 10px rgba(0,0,0,.35); }
.gs-sail h2::before, .gs-sail h2::after { content: ''; width: clamp(30px, 6vw, 100px); height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.gs-sail h2::after { transform: scaleX(-1); }
.gs-sail p { margin: 6px 0 0; color: rgba(255,255,255,.85); }
.gs-sail .gs-btns { margin-top: 18px; }

/* Happy Vacation banner (ChatGPT page fix, 10 Nov): the clean 2172x724 artwork at its own
   3:1 shape, the real logo over the open middle, and two real links laid exactly over the
   gold buttons painted into it (positions measured on the artwork). */
.gs-vacation { position: relative; background: #0b2147; }
.gs-vacation__art { position: relative; aspect-ratio: 2172 / 724; background: #1d4fa8 url('/assets/img/site/vacation/happy-vacation.jpg') center top / 100% auto no-repeat; }
.gs-vacation__art--custom { background-size: cover; background-position: center; }
.gs-vacation__logo { position: absolute; left: 50%; top: 41.5%; transform: translateX(-50%); height: 20%; width: auto; max-width: 46%;
  filter: drop-shadow(0 2px 8px rgba(0,20,60,.55)); }
.gs-hot { position: absolute; top: 64.6%; height: 18.6%; min-height: 44px; border-radius: 999px; transition: box-shadow .15s, background .15s; }
.gs-hot:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.gs-hot--checklist { left: 14.5%; width: 28%; }
.gs-hot--shop { left: 44.4%; width: 30.2%; }
/* With the painted buttons in use, the real-button row only appears on phones. */
.gs-vacation--overlay .gs-vacation__body { display: none; }
/* Uploaded artwork or a missing link: real buttons below the picture instead. */
.gs-vacation:not(.gs-vacation--overlay) .gs-vacation__art:not(.gs-vacation__art--custom) { aspect-ratio: 2172 / 420; }
.gs-vacation:not(.gs-vacation--overlay) .gs-vacation__logo { display: none; }
.gs-vacation__body { text-align: center; padding: 20px 16px 30px; background: linear-gradient(180deg, #f3e2bb, #e8cf9b); border-bottom: 6px solid var(--gold); }
.gs-vacation__logo2 { display: block; height: 46px; width: auto; max-width: 80%; margin: 0 auto 14px; }
.gs-vacation__body .gs-btns { margin-top: 0; }
.gs-footer { background: var(--night); color: #b9bbc1; text-align: center; font-size: 12px; padding: 22px 16px; }
.gs-footer a { color: var(--gold-2); }

/* My Booking, Join, Group Details and The Trip: a pop-up over the page. */
.gs-tools { position: fixed; inset: 0; z-index: 100; background: rgba(4,12,26,.62); display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; }
.gs-tools[hidden] { display: none; }
.gs-tools__panel { background: #faf6ed; width: min(1000px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.gs-tools__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 12px 14px; background: #faf6ed; border-bottom: 1px solid #ece3cf; }
.gs-close { border: 1px solid #cdbf9c; background: #fff; border-radius: 999px; padding: 8px 16px; font: 700 13px 'Inter', Arial, sans-serif; cursor: pointer; color: var(--ink); }
body.gs-modal-open { overflow: hidden; }

@media (max-width: 1100px) { .gs-scene--photo { --pz: 34%; } }
@media (max-width: 1280px) {
  .gs-nav__logo img { height: 42px; max-width: 200px; }
  .gs-pill { padding: 8px 10px; font-size: 12.5px; gap: 6px; }
  .gs-nav__links { gap: 5px; }
}
@media (max-width: 1180px) {
  .gs-nav { flex-wrap: wrap; }
  .gs-nav__booking { margin-left: auto; }
  .gs-nav__more { display: inline-flex; }
  .gs-nav__links { display: none; }
  .gs-nav.is-open .gs-nav__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; order: 5;
    width: 100%; margin: 4px 0 4px; }
  .gs-nav.is-open .gs-pill--trip { display: inline-flex; }
  .gs-nav__links .gs-pill { min-height: 46px; justify-content: flex-start; padding: 10px 16px; font-size: 15px; gap: 10px; }
  .gs-nav__links .gs-pill svg { width: 18px; height: 18px; }
  .gs-nav__booking, .gs-nav__join, .gs-nav__more { min-height: 44px; padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 760px) {
  .gs-nav { gap: 8px; padding: 8px 12px; }
  .gs-nav__logo img { height: 32px; max-width: 160px; }
  .gs-nav__logo--upload img { padding: 2px 4px; }
  .gs-nav.is-open .gs-nav__links { grid-template-columns: 1fr; }
  /* Phones: the painted buttons would be too small to read, so the banner shows only its
     top (Happy Vacation, sea and sky, slightly zoomed so the words stay big) and real
     buttons sit below on a sand band with the logo. */
  .gs-vacation__art, .gs-vacation:not(.gs-vacation--overlay) .gs-vacation__art:not(.gs-vacation__art--custom) {
    aspect-ratio: 1000 / 285; background-size: 140% auto; background-position: 50% 0; }
  .gs-vacation__art--custom { background-size: cover; background-position: center; }
  .gs-vacation__logo, .gs-hot { display: none; }
  .gs-vacation--overlay .gs-vacation__body { display: block; }
  .gs-vacation__logo2 { height: 40px; }
  .gs-vacation__body .gs-btns { flex-direction: column; align-items: center; gap: 12px; }
  .gs-vacation__body .gs-btn { min-width: 250px; justify-content: center; min-height: 48px; }
  /* Phones (Karen's reference, 10 Nov): the person stands full length at the lower LEFT,
     feet on the sand; the title, trip lines, countdown and buttons sit in a column to her
     RIGHT, so nothing covers her. Open sand stays below the buttons for her to stand on.
     --myn = how high her feet sit (phone slider), --mh = her height. */
  /* One scene on computers; on phones each band has its own background again. */
  .gs-scene, .gs-scene--photo { --pz: 0%; background: none; }
  .gs-scene__photo { display: none; }
  .gs-hero__stage { display: block; }
  .gs-sail { background: var(--ribbon); }
  .gs-tools { padding: 0; }
  .gs-tools__panel { max-height: 100vh; height: 100%; border-radius: 0; }
  .gs-hero { min-height: 0; padding-bottom: 0; background-size: cover; background-repeat: no-repeat; background-color: #13305a;
    background-image: var(--bgm, var(--bgd, linear-gradient(160deg, #13305a, #0f5a86 60%, #e8a774)));
    background-position: var(--mfx, 30%) var(--mfy, 100%); }
  .gs-hero__copy { max-width: none; margin: 0; padding: 26px 16px 40px; }
  .gs-hero--photo .gs-hero__copy { max-width: none; margin: 0; padding: 22px 6px calc(var(--myn, 14) * 1.8vw + 15vw) 38%; }
  .gs-hero h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .gs-hero--photo h1 { font-size: clamp(2rem, 9.6vw, 3rem); }
  .gs-hero--photo .gs-eyebrow { letter-spacing: .16em; font-size: 12px; }
  .gs-hero__photo { left: var(--mx, 1%); bottom: calc(var(--myn, 14) * 1.8vw); height: calc(var(--mh, 62) * 1.1vw);
    max-height: calc(100% - 20px); max-width: 38%; }
  /* The column beside her is narrow: a compact countdown keeps days, hours and minutes on one row. */
  .gs-hero--photo .countdown { gap: 6px; margin-top: 14px; flex-wrap: nowrap; }
  .gs-hero--photo .cd-box { min-width: 0; flex: 0 1 64px; padding: 7px 4px; border-radius: 10px; }
  .gs-hero--photo .cd-num { font-size: 1.45rem; }
  .gs-hero--photo .cd-lbl { font-size: 9px; letter-spacing: .08em; margin-top: 3px; }
  .gs-hero--photo .gs-btns { gap: 8px; margin-top: 14px; }
  .gs-hero--photo .gs-btn { padding: 10px 13px; font-size: 13px; gap: 6px; }
  .gs-hero--photo .gs-btn svg { width: 16px; height: 16px; }
  .gs-hero--photo .gs-hero__line { font-size: .95rem; }
  .gs-hero__ship { width: 48%; top: auto; bottom: 26px; right: 2%; z-index: 1; }
  .gs-btn { padding: 11px 18px; font-size: 14px; }
  .gs-sail { padding: 52px 14px 50px; }
  .gs-sail h2 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .gs-sail h2::before, .gs-sail h2::after { display: none; }
}
/* Small phones: logo, Join and Menu fit on one row down to 320px. */
@media (max-width: 520px) {
  .gs-nav { padding: 8px 10px; gap: 6px; }
  .gs-nav__logo img { height: 26px; max-width: 128px; }
  /* Phones: logo and Menu on the top row, My Booking (gold) and Join (outlined) as two equal
     buttons below, so neither is squeezed or hidden. */
  .gs-nav { flex-wrap: wrap; row-gap: 4px; }
  .gs-nav__logo { order: 1; }
  .gs-nav__more { order: 2; margin-left: auto; padding: 8px 11px; font-size: 13px; gap: 5px; }
  .gs-nav::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .gs-nav__booking, .gs-nav__join { order: 4; flex: 1 1 0; margin-left: 0; justify-content: center; padding: 9px 8px; font-size: 13.5px; }
  .gs-nav__links { order: 6; }
  .gs-nav__booking svg, .gs-nav__join svg { display: none; }
  .gs-hero .gs-btns { gap: 10px; margin-top: 20px; }
  .gs-hero .gs-btn { padding: 11px 16px; }
}
@media (max-width: 360px) {
  .gs-nav { padding: 8px 8px; gap: 5px; }
  .gs-nav__logo img { height: 22px; max-width: 106px; }
  .gs-nav__booking, .gs-nav__join { font-size: 12.5px; }
  .gs-nav__more { padding: 7px 9px; font-size: 12px; }
}

/* Full-page scene (Sunset party, Karen 11 Nov): one 16:9 picture with the navy ribbon, sand
   and logo painted in. On computers the picture keeps its exact shape and everything is sized
   to the screen width (vw) so the words always land in the sky, the ribbon buttons in the
   navy band and the Amazon button centred on the sand under the logo. */
@media (min-width: 761px) {
  .gs-scene--art { aspect-ratio: 16 / 9; display: grid; grid-template-rows: minmax(0, 44.5fr) minmax(0, 25.5fr) minmax(0, 30fr);
    background-size: cover; background-position: center; --pz: 27%; }
  .gs-scene--art .gs-hero { min-height: 0; padding-left: var(--pz); }
  .gs-scene--art .gs-hero::before { display: none; }
  .gs-scene--art .gs-hero__copy { max-width: 94%; padding: 1.2vw 0 0; }
  .gs-scene--art .gs-eyebrow { font-size: max(9.5px, .95vw); }
  .gs-scene--art .gs-hero h1 { font-size: 4.3vw; margin: .5vw 0 .3vw; }
  .gs-scene--art .gs-swash { width: 26vw; height: .9vw; margin-bottom: .5vw; }
  .gs-scene--art .gs-hero__line { font-size: max(11px, 1.3vw); margin: .15vw 0; }
  .gs-scene--art .countdown { margin-top: .9vw; gap: .8vw; }
  .gs-scene--art .cd-box { min-width: 5.4vw; padding: .45vw .9vw; border-radius: .8vw; }
  .gs-scene--art .cd-num { font-size: 2.1vw; }
  .gs-scene--art .cd-lbl { font-size: max(9px, .62vw); }
  .gs-scene--art .gs-btns { gap: .9vw; margin-top: 1vw; }
  .gs-scene--art .gs-btn { padding: .7vw 1.5vw; font-size: max(10.5px, 1.05vw); gap: .6vw; }
  .gs-scene--art .gs-btn svg { width: 1.3vw; height: 1.3vw; }
  .gs-scene--art .gs-sail { background: none; padding: 0 1vw 0 var(--pz); display: flex; flex-direction: column; justify-content: center; }
  .gs-scene--art .gs-wave { display: none; }
  .gs-scene--art .gs-sail h2 { font-size: 3.7vw; gap: 1.2vw; }
  .gs-scene--art .gs-sail h2::before, .gs-scene--art .gs-sail h2::after { width: 5vw; }
  .gs-scene--art .gs-sail p { font-size: max(10.5px, .95vw); margin-top: .2vw; }
  .gs-scene--art .gs-sail .gs-btns { margin-top: .9vw; }
  .gs-scene--art .gs-vacation { background: none; padding: 0; }
  .gs-scene--art .gs-vacation .gs-btns { position: absolute; left: 51%; top: 79%; transform: translateX(-50%); margin: 0; }
  .gs-scene--art .gs-scene__photo { left: var(--px, 2%); bottom: calc(var(--py, 0%) + 1.6%); height: calc(var(--ph, 100%) * .92);
    max-height: 96%; max-width: 30%; }
}
/* Phones: the sky and sea of the same picture behind the celebration, the navy ribbon, then
   the sand with the painted logo and the Amazon button under it. */
@media (max-width: 760px) {
  .gs-scene--art .gs-hero { background-size: auto 220%; background-position: var(--mfx, 25%) 0; }
  .gs-scene--art .gs-sail { background: #01205e; }
  .gs-scene--art .gs-vacation { text-align: center; padding: 23vw 16px 26px;
    background: linear-gradient(180deg, rgba(230,142,59,0) calc(26.7vw - 28px), rgb(230,142,59) 26.7vw),
      var(--bgd) 54% -63.3vw / 160% auto no-repeat rgb(230,142,59); }
  .gs-scene--art .gs-vacation .gs-btns { margin-top: 0; }
  .gs-scene--art .gs-vacation .gs-btn { min-width: 250px; min-height: 48px; justify-content: center; }
}
/* Countdown boxes on the scene: navy with a gold edge (as in the mockup) so the numbers stay
   readable over the bright sunset. Phones get a light shade behind the words too. */
.gs-scene--art .cd-box { background: rgba(4,22,62,.82); border: 1.5px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.gs-scene--art .gs-eyebrow { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 760px) {
  .gs-scene--art .gs-hero::before { background: linear-gradient(180deg, rgba(6,21,43,.38), rgba(6,21,43,.12) 70%); }
}

/* Magazine, Video, Checklist, Shop and Leave a Message pop-up (Karen, 11 Nov): the page in a
   frame filling the box, with its name, "Open full screen" and Close along the top. */
.gs-frame .gs-tools__head { justify-content: space-between; align-items: center; gap: 10px; }
.gs-frame__title { font: 700 17px 'Playfair Display', Georgia, serif; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-frame__acts { display: flex; align-items: center; gap: 12px; flex: none; }
.gs-frame__out { font: 600 13px 'Inter', Arial, sans-serif; color: #8a6418; text-decoration: underline; }
.gs-frame__panel { display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - 48px); height: calc(100dvh - 48px); }
.gs-frame__page { flex: 1; width: 100%; border: 0; background: #fff; display: block; }
@media (max-width: 760px) {
  .gs-frame__panel { height: 100vh; height: 100dvh; }
  .gs-frame__out { display: none; }
}