/* Seabound Journeys · hub layer, round 2: calculators + the three vacation pages.
   Loads after sj-hub.css. The vacation pages are built around their own photograph. */

/* ================= CALCULATORS (tools.html) ================= */
.sh-hero-tools .sh-hero-copy{grid-row:span 2}
.sh-hero-tools .sh-stats{grid-column:2}
.sh-picker{grid-column:2;padding:18px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.sh-picker-k{margin:0 0 12px;font:600 12px/1 var(--sh-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--sh-sun)}
.sh-qs{display:flex;flex-wrap:wrap;gap:8px}
.sh-q{cursor:pointer;padding:9px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:500 13.5px/1.25 var(--sh-ui);text-align:left;transition:all .18s}
.sh-q:hover{border-color:var(--sh-sun);background:rgba(255,255,255,.12)}
.sh-q[aria-pressed="true"]{background:var(--sh-sun);border-color:var(--sh-sun);color:var(--sh-navy);font-weight:600}
.sh-q:focus-visible{outline:3px solid var(--sh-sun);outline-offset:2px}
.sh-picks{margin-top:14px;display:grid;gap:8px}
.sh-picks-hint{margin:0;font:500 13px/1.4 var(--sh-ui);color:#A9C8E2}
.sh-pick{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;text-decoration:none;color:var(--sh-ink);background:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.6);animation:shPop .35s cubic-bezier(.2,.9,.3,1.2) both}
.sh-pick:nth-child(2){animation-delay:.05s} .sh-pick:nth-child(3){animation-delay:.1s} .sh-pick:nth-child(4){animation-delay:.15s}
.sh-pick .sh-glyph{width:40px;height:40px;border-radius:12px}
.sh-pick b{display:block;font:700 15px/1.2 var(--sh-ui)} .sh-pick small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sh-ui);color:var(--sh-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sh-pick i{font-style:normal;color:var(--sh-ocean);font-weight:700}
.sh-pick:hover{transform:translateY(-2px)}
.sh-pick-lines{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.1)}
.sh-pick-lines span{width:100%;font:600 12px/1.2 var(--sh-ui);color:#CFE0EE;letter-spacing:.04em}
.sh-pick-lines a{padding:7px 11px;border-radius:999px;background:#fff;color:var(--sh-navy);text-decoration:none;font:600 13px/1 var(--sh-ui)}
.sh-pick-lines a:hover{background:var(--sh-sun)}
@keyframes shPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.sh-glyph{display:grid;place-items:center;background:linear-gradient(140deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sh-glyph svg{width:62%;height:62%}
body.sh-tools main{width:min(1180px,92%);margin:0 auto}
body.sh-tools .hub-section{position:relative}
body.sh-tools .hub-section h2{font-family:var(--sh-display);font-weight:700;letter-spacing:-.015em;color:var(--sh-navy);font-size:clamp(28px,3.4vw,40px)}
body.sh-tools .sec-num{font:700 14px/1 var(--sh-ui)!important;letter-spacing:.2em;color:var(--sh-ocean)!important}
body.sh-tools .feat-eyebrow{font:700 12px/1 var(--sh-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--sh-coral)}
body.sh-tools .feat-grid,body.sh-tools .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
body.sh-tools .hub-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:22px;background:#fff;padding:22px 22px 20px;
  box-shadow:0 1px 0 rgba(10,30,51,.05),0 20px 40px -30px rgba(10,30,51,.55);transition:transform .25s,box-shadow .25s}
body.sh-tools .hub-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(10,30,51,.05),0 30px 54px -28px rgba(10,30,51,.6)}
body.sh-tools .hub-card::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--g1,#2BB3C0) 30%,transparent),transparent 70%);pointer-events:none}
body.sh-tools .hub-card.feat{background:linear-gradient(180deg,#fff,#F6FAFD)}
body.sh-tools .hub-icon.sh-glyph{width:52px;height:52px;border-radius:16px;margin-bottom:14px;font-size:0}
body.sh-tools .hub-card .hub-icon.sh-glyph{background:linear-gradient(140deg,var(--g1),var(--g2));border:0;color:#fff}
body.sh-tools .hub-card.soon .hub-icon.sh-glyph{background:linear-gradient(140deg,#DCE6EF,#C5D3E0)}
body.sh-tools .hub-card.feat::after{display:none}
body.sh-tools [data-sh-cat=fit]{--g1:#2BB3C0;--g2:#1A5F91}
body.sh-tools [data-sh-cat=addon]{--g1:#F4B942;--g2:#F07A5C}
body.sh-tools [data-sh-cat=cost]{--g1:#7BD389;--g2:#1A5F91}
body.sh-tools [data-sh-cat=land]{--g1:#F07A5C;--g2:#8E7CF0}
body.sh-tools [data-sh-cat=plan]{--g1:#8E7CF0;--g2:#E36A8E}
body.sh-tools .sh-catbar{margin-bottom:22px}
body.sh-tools .hub-mono{font:700 11px/1 var(--sh-ui)!important;letter-spacing:.16em;color:var(--sh-ocean)!important}
body.sh-tools .hub-card h3{margin:8px 0 8px;font-family:var(--sh-display);font-weight:700;font-size:22px;line-height:1.15;color:var(--sh-navy)}
body.sh-tools .hub-card p{color:var(--sh-muted);font:400 15px/1.55 var(--sh-ui)}
body.sh-tools .hub-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--sh-navy);color:#fff!important;text-decoration:none;font:600 14px/1 var(--sh-ui);transition:background .2s,color .2s,transform .2s}
body.sh-tools .hub-btn.gold,body.sh-tools .hub-card:hover .hub-btn{background:var(--sh-sun);color:var(--sh-navy)!important}
body.sh-tools .hub-card.soon{background:repeating-linear-gradient(135deg,#fff 0 14px,#F6F8FA 14px 28px)}
body.sh-tools .hub-soon{display:inline-block;margin-top:auto;padding:7px 12px;border-radius:999px;background:var(--sh-paper2);color:var(--sh-muted);font:600 12px/1 var(--sh-ui)}
.sh-soon-alt{display:inline-block;margin-top:10px;font:600 13.5px/1.3 var(--sh-ui);color:var(--sh-ocean)}
body.sh-tools .sh-catbar .sh-chip i{width:12px;height:12px;border-radius:4px;background:linear-gradient(140deg,var(--g1),var(--g2))}
body.sh-tools .hub-card.sh-hide{display:none}
body.sh-tools .hub-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.sh-tools .hub-why-col{padding:22px;border-radius:22px;background:#fff;box-shadow:0 20px 40px -32px rgba(10,30,51,.5)}
body.sh-tools .hub-why-col h3{font-family:var(--sh-display);font-weight:700;color:var(--sh-navy)}
body.sh-tools .hub-cta{background:radial-gradient(60% 120% at 50% 0%,rgba(244,185,66,.25),transparent 60%),linear-gradient(160deg,#06162B,#11477A);border-radius:0}
body.sh-tools .hub-cta a{background:var(--sh-sun)!important;color:var(--sh-navy)!important;border-radius:999px}
.sh-flashcard{animation:shFlash 1.6s ease-out}

/* ================= VACATION PAGES: photo-led hero ================= */
.sh-photo-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:min(86vh,780px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(90px,12vw,170px) 0 110px;background:#0A1E33}
.sh-photo{position:absolute;inset:0;z-index:-2}
.sh-photo img.sh-photo-img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transform-origin:60% 50%}
@media (prefers-reduced-motion:no-preference){.js-sh .sh-photo img.sh-photo-img{animation:shKen 28s ease-in-out infinite alternate}}
@keyframes shKen{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.sh-photo-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,22,43,.9) 0%,rgba(6,22,43,.72) 38%,rgba(6,22,43,.2) 70%,rgba(6,22,43,.05) 100%),linear-gradient(0deg,rgba(6,22,43,.85) 0%,rgba(6,22,43,0) 45%)}
.sh-ph-parks .sh-photo-shade{background:linear-gradient(90deg,rgba(20,12,48,.9) 0%,rgba(20,12,48,.7) 38%,rgba(20,12,48,.15) 72%,transparent 100%),linear-gradient(0deg,rgba(20,12,48,.85) 0%,rgba(20,12,48,0) 45%)}
.sh-ph-resorts .sh-photo-shade{background:linear-gradient(90deg,rgba(4,40,52,.9) 0%,rgba(4,40,52,.68) 38%,rgba(4,40,52,.12) 72%,transparent 100%),linear-gradient(0deg,rgba(4,40,52,.85) 0%,rgba(4,40,52,0) 45%)}
.sh-photo-in{width:min(1180px,92%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px 56px;align-items:end}
.sh-photo-copy .sh-lede{color:#EAF2F9;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.sh-photo-hero h1.sh-h1{font:700 clamp(38px,5.2vw,70px)/1.02 var(--sh-display);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35);margin:0 0 18px;text-wrap:balance}
.sh-photo-side{display:grid;gap:12px}
.sh-photo-side .sh-stats{grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
.sh-photo-side .sh-doors{grid-column:auto}
.sh-photo-cap{position:absolute;right:24px;top:22px;margin:0;max-width:52ch;font:500 12px/1.4 var(--sh-ui);color:rgba(255,255,255,.8);text-align:right}
.sh-photo-cap span{display:inline-block;background:rgba(6,22,43,.45);padding:5px 12px;border-radius:12px;backdrop-filter:blur(6px)}
/* library */
body.sh-vac .lgwrap{position:relative}
body.sh-vac .lgwrap .sec-head h2,body.sh-vac .bg-mist h2,body.sh-vac .cta-band h2{font-family:var(--sh-display);font-weight:700;letter-spacing:-.015em}
body.sh-vac .lgwrap .sec-head h2{color:var(--sh-navy);font-size:clamp(30px,3.6vw,46px)}
body.sh-vac .lgwrap>.wrap{display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
body.sh-vac .lgwrap .sec-head{grid-column:1/-1;margin-bottom:10px}
body.sh-vac .linegrp.sh-lib{position:relative;border:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(10,30,51,.05),0 24px 48px -34px rgba(10,30,51,.6);transition:transform .25s,box-shadow .25s}
body.sh-vac .linegrp.sh-lib:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(10,30,51,.05),0 32px 60px -32px rgba(10,30,51,.65)}
body.sh-vac .linegrp.sh-lib .lg-head{position:relative;padding:26px 24px 22px;color:#fff;background-image:linear-gradient(140deg,rgba(6,22,43,.88),rgba(17,71,122,.78)),var(--sh-libphoto,none);background-size:cover;background-position:center}
body.sh-vac .linegrp.sh-lib .lg-head::before{content:attr(data-n);position:absolute;right:20px;top:14px;font:700 42px/1 var(--sh-display);color:rgba(255,255,255,.16)}
body.sh-vac .linegrp.sh-lib:nth-of-type(6n+1) .lg-head{--sh-tint:#2BB3C0} body.sh-vac .linegrp.sh-lib:nth-of-type(6n+2) .lg-head{--sh-tint:#F4B942}
body.sh-vac .linegrp.sh-lib:nth-of-type(6n+3) .lg-head{--sh-tint:#E36A8E} body.sh-vac .linegrp.sh-lib:nth-of-type(6n+4) .lg-head{--sh-tint:#8E7CF0}
body.sh-vac .linegrp.sh-lib:nth-of-type(6n+5) .lg-head{--sh-tint:#7BD389} body.sh-vac .linegrp.sh-lib:nth-of-type(6n+6) .lg-head{--sh-tint:#F07A5C}
body.sh-vac .linegrp.sh-lib .lg-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--sh-tint)}
body.sh-vac .lg-k{color:var(--sh-tint,#F4B942)!important;font:700 11px/1 var(--sh-ui)!important;letter-spacing:.18em;text-transform:uppercase}
body.sh-vac .lg-n{display:block;margin:8px 0 8px;font:700 28px/1.08 var(--sh-display)!important;color:#fff!important}
body.sh-vac .lg-d{color:#DCE8F4!important;font:400 15px/1.55 var(--sh-ui)!important}
body.sh-vac .lg-meta{display:inline-block;margin-top:14px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff!important;font:600 12px/1 var(--sh-ui)!important}
body.sh-vac .lg-body{padding:6px 22px 20px}
body.sh-vac .lg-row{border-top:1px solid var(--sh-line);padding:12px 0}
body.sh-vac .lg-row:first-child{border-top:0}
body.sh-vac .lg-c{font:700 13px/1.3 var(--sh-ui)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--sh-ocean)!important;text-decoration:none}
body.sh-vac .lg-ships a{border:0!important;background:var(--sh-paper2)!important;color:var(--sh-ink)!important;font:500 13.5px/1.2 var(--sh-ui)!important;margin:3px 4px 3px 0;transition:background .15s,color .15s}
body.sh-vac .lg-ships a:hover{background:var(--sh-navy)!important;color:#fff!important}
/* tool rail on the cruise page */
body.sh-cruise .sbf-tools{width:min(1180px,92%);max-width:none;margin:0 auto;padding:18px 0 8px;position:relative}
body.sh-cruise .sbf-tool{position:relative;overflow:hidden;border-radius:22px;border:0;background:radial-gradient(70% 120% at 100% 0%,rgba(43,179,192,.35),transparent 60%),linear-gradient(120deg,#06162B,#11477A);box-shadow:0 26px 50px -30px rgba(10,30,51,.7)}
body.sh-cruise .sbf-tool b{font-family:var(--sh-display);font-size:24px;letter-spacing:-.01em}
/* advisor cards */
body.sh-vac .bg-mist{background:linear-gradient(180deg,var(--sh-paper),#EAF2F7)}
body.sh-vac .grid-3 .card{border:0;border-radius:22px;background:#fff;box-shadow:0 20px 40px -32px rgba(10,30,51,.55);position:relative;overflow:hidden}
body.sh-vac .grid-3 .card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#2BB3C0,#F4B942,#F07A5C)}
body.sh-vac .grid-3 .card h3{font-family:var(--sh-display);font-weight:700;color:var(--sh-navy)}
/* the inset photo on the cruise page */
.sh-inset{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(10,30,51,.7);aspect-ratio:4/3;transform:rotate(1.5deg)}
.sh-inset img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.sh-inset:hover img{transform:scale(1.05)}
/* CTA band carries the hero photo again, faintly */
body.sh-vac .cta-band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,rgba(6,22,43,.92),rgba(17,71,122,.82)),var(--sh-ctaphoto,linear-gradient(120deg,#0A1E33,#155A8A));background-size:cover;background-position:center}
body.sh-vac .cta-band .btn-light{background:var(--sh-sun);color:var(--sh-navy);border:0;border-radius:999px;font-weight:600}
body.sh-vac .sjd{border-radius:22px}

@media (max-width:980px){
  .sh-hero-tools .sh-stats,.sh-picker{grid-column:1}
  .sh-photo-in{grid-template-columns:1fr}
  .sh-photo-hero{min-height:0;padding-top:min(46vw,300px)}
  .sh-photo-shade{background:linear-gradient(0deg,rgba(6,22,43,.95) 0%,rgba(6,22,43,.8) 55%,rgba(6,22,43,.15) 100%)!important}
  .sh-photo-cap{display:none}
  body.sh-tools .hub-why{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.sh-vac .lgwrap>.wrap{grid-template-columns:1fr}
  .sh-photo-side .sh-stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sh-pick{animation:none}.sh-inset{transform:none}}
@media (max-width:640px){
  body.sh-tools .sh-catbar{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4vw;margin-right:-4vw;padding:2px 4vw 6px}
  body.sh-tools .sh-catbar::-webkit-scrollbar{display:none}
  body.sh-tools .sh-catbar .sh-chip{flex:0 0 auto;white-space:nowrap}
}
body.sh-tools .sec-intro{font:400 17px/1.6 var(--sh-ui);color:var(--sh-muted)}