/* ================= Container ================= */
/* NOTE: this page's markup uses full-bleed wrappers (.cd-hero, .cd-page-bg) that
   deliberately escape the outer Bootstrap .container. ".wrap" is NOT a globally
   styled class (it's defined only in aeroconnect-flights.css, which this page
   does not load) so it must not be relied on here — .cd-container re-establishes
   the actual max-width + centering inside those full-bleed wrappers. */
.cd-container{max-width:1240px;margin:0 auto;padding:0 20px}

/* ================= Cruise detail hero ================= */
.cd-hero{
    position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
    overflow:hidden;height:480px;color:#fff;
}
.cd-hero-bg{
    position:absolute;inset:-4%;background-size:cover;background-position:center;
    animation:cd-kenburns 22s ease-in-out infinite alternate;
}
@keyframes cd-kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.cd-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(4,12,26,.35) 0%, rgba(4,12,26,.55) 55%, rgba(4,12,26,.92) 100%);
}
.cd-hero-inner{
    position:relative;z-index:1;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:56px;
}
.cd-hero-line{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold-bright);margin-bottom:10px}
.cd-hero-title{font-family:var(--pt-font-display);font-weight:600;font-size:44px;line-height:1.15;margin-bottom:10px;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.cd-hero-tagline{font-size:16px;color:rgba(255,255,255,.86);margin-bottom:18px;max-width:640px}
.cd-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:rgba(255,255,255,.9)}
.cd-hero-dot{opacity:.6}
.cd-hero-rating{display:inline-flex;align-items:center;gap:6px}
.cd-hero-rating .icon{width:16px;height:16px;color:var(--brand-gold-bright)}
.cd-hero-rating span{color:rgba(255,255,255,.7);font-size:13px}

.cd-wave{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:70px;z-index:1}
.cd-wave path{fill:#f6f7fb}

/* ================= Two-column layout: main content + sticky sidebar ================= */
.cd-layout{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}
.cd-main{min-width:0}

.cd-sidebar{position:sticky;top:88px}
.cd-sidebar-card{
    background:#fff;border:1px solid #eef1f6;border-radius:1.25rem;
    box-shadow:0 20px 44px rgba(11,31,58,.1);
    padding:1.5rem 1.5rem 1.65rem;margin-top:1.75rem;
}
.cd-sidebar-price-label{display:block;font-size:.78rem;color:#6b7385;text-transform:uppercase;letter-spacing:.02em}
.cd-sidebar-price-value{display:block;font-size:1.9rem;font-weight:800;color:var(--brand-navy);margin-bottom:1.1rem}
.cd-sidebar-price-value small{font-size:.8rem;font-weight:600;color:#8b95a5;margin-left:4px}
.cd-sidebar-btn{
    display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    background:var(--brand-navy);color:#fff;font-weight:700;font-size:.95rem;
    padding:.9rem 1.25rem;border-radius:.75rem;transition:transform .15s ease,background-color .15s ease;
    box-shadow:0 12px 24px rgba(11,31,58,.22);margin-bottom:1.25rem;
}
.cd-sidebar-btn:hover{background:var(--brand-navy-dark);transform:translateY(-2px);color:#fff}
.cd-sidebar-btn .icon{width:17px;height:17px}
.cd-sidebar-facts{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.65rem}
.cd-sidebar-facts li{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:#4b5565;padding-top:.65rem;border-top:1px solid #eef1f6}
.cd-sidebar-facts li:first-child{padding-top:0;border-top:none}
.cd-sidebar-facts .icon{width:15px;height:15px;color:#9aa1b3;flex:none;margin-top:.1rem}
.cd-sidebar-facts b{color:var(--brand-navy)}
.cd-sidebar-note{font-size:.75rem;color:#9aa1b3;line-height:1.5;margin:0}

/* ================= Light blue backdrop with small ship icon watermark ================= */
.cd-page-bg{
    position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
    background-color:#eaf5fb;
}
.cd-page-bg::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-repeat:repeat;
    background-size:520px 420px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg transform='translate(15,15) rotate(-6) scale(1)' fill='rgb(58,138,188)' opacity='0.20'%3E%3Cpath d='M8,42 L92,42 L82,28 L18,28 Z'/%3E%3Crect x='34' y='14' width='32' height='14'/%3E%3Crect x='45' y='2' width='10' height='12'/%3E%3C/g%3E%3Cg transform='translate(395,25) rotate(10) scale(0.55)' fill='rgb(58,138,188)' opacity='0.13'%3E%3Cpath d='M8,42 L92,42 L82,28 L18,28 Z'/%3E%3Crect x='34' y='14' width='32' height='14'/%3E%3Crect x='45' y='2' width='10' height='12'/%3E%3C/g%3E%3Cg transform='translate(385,318) rotate(7) scale(1.15)' fill='rgb(58,138,188)' opacity='0.18'%3E%3Cpath d='M8,42 L92,42 L82,28 L18,28 Z'/%3E%3Crect x='34' y='14' width='32' height='14'/%3E%3Crect x='45' y='2' width='10' height='12'/%3E%3C/g%3E%3Cg transform='translate(5,340) rotate(-12) scale(0.5)' fill='rgb(58,138,188)' opacity='0.12'%3E%3Cpath d='M8,42 L92,42 L82,28 L18,28 Z'/%3E%3Crect x='34' y='14' width='32' height='14'/%3E%3Crect x='45' y='2' width='10' height='12'/%3E%3C/g%3E%3C/svg%3E");
}
.cd-page-bg > *{position:relative;z-index:1}

/* ================= Sub nav ================= */
.cd-subnav{
    position:sticky;top:12px;z-index:20;background:#fff;
    display:flex;gap:1.75rem;
    border:1px solid #eef1f6;border-radius:1rem;box-shadow:0 8px 20px rgba(11,31,58,.07);
    padding:0 1.5rem;margin-bottom:2.5rem;
    overflow-x:auto;
    /* Both axes declared: overflow-x alone computes overflow-y to auto too, and
       the active link's bottom border was enough to draw a stray vertical
       scrollbar in this sticky bar. */
    overflow-y:hidden;
}
.cd-subnav a{
    padding:1rem 0;font-weight:700;font-size:.9rem;color:#6b7789;white-space:nowrap;
    border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.cd-subnav a:hover{color:var(--brand-navy)}
.cd-subnav a.active{color:var(--brand-navy);border-bottom-color:var(--brand-gold)}

/* ================= Sections ================= */
.cd-section{padding:1.5rem 0 3rem;scroll-margin-top:64px}
.cd-section-title{font-family:var(--pt-font-display);font-size:1.6rem;color:var(--brand-navy);margin-bottom:.6rem}
.cd-section-sub{color:#6b7385;font-size:.9rem;margin-bottom:1.5rem;max-width:720px}
/* Admin-authored HTML from the CMS, so it arrives as an unstyled mix of
   paragraphs, headings and lists. Scoped rules give that markup the page's
   typography without the editor needing to know anything about it. */
.cd-overview-text{font-size:1rem;line-height:1.7;color:#4b5565;max-width:820px;margin-bottom:1.75rem}
.cd-overview-text > *:first-child{margin-top:0}
.cd-overview-text > *:last-child{margin-bottom:0}
.cd-overview-text p{margin:0 0 .9rem}
.cd-overview-text h1,.cd-overview-text h2,.cd-overview-text h3,
.cd-overview-text h4,.cd-overview-text h5,.cd-overview-text h6{
    font-family:var(--pt-font-display);color:var(--brand-navy);
    font-size:1.05rem;font-weight:600;line-height:1.35;margin:1.5rem 0 .6rem;
}
.cd-overview-text ul,.cd-overview-text ol{margin:0 0 1rem;padding-left:1.25rem}
.cd-overview-text li{margin-bottom:.4rem}
.cd-overview-text strong,.cd-overview-text b{color:var(--brand-navy);font-weight:600}
.cd-overview-text em{font-style:italic}
.cd-overview-text a{color:var(--brand-navy);text-decoration:underline}
.cd-overview-text hr{border:0;border-top:1px solid #eef1f6;margin:1.4rem 0}
.cd-overview-text img{max-width:100%;height:auto;border-radius:.6rem}
/* CMS tables carry no widths and would otherwise force the column wider than
   the layout on narrow screens. */
.cd-overview-text table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.9rem}
.cd-overview-text th,.cd-overview-text td{border:1px solid #eef1f6;padding:.5rem .7rem;text-align:left}
.cd-overview-text th{background:#f6f8fb;color:var(--brand-navy);font-weight:600}

/* ---------- Highlights ---------- */
.cd-highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cd-highlight{
    display:flex;align-items:center;gap:.75rem;
    background:#fff;border:1px solid #eef1f6;border-radius:.9rem;padding:.9rem 1.1rem;
    font-size:.88rem;font-weight:600;color:var(--brand-navy);
    box-shadow:0 10px 22px rgba(11,31,58,.05);
    transition:transform .15s ease,box-shadow .15s ease;
}
.cd-highlight:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(11,31,58,.1)}
.cd-highlight-icon{
    width:34px;height:34px;flex:none;border-radius:50%;
    background:linear-gradient(155deg,var(--brand-navy) 0%,var(--brand-navy-light) 100%);
    color:var(--brand-gold-bright);display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.15),0 6px 14px rgba(11,31,58,.28);
}
.cd-highlight-icon .icon{width:17px;height:17px}

/* ---------- Timeline ---------- */
.cd-timeline{position:relative;padding-left:52px}
.cd-timeline::before{
    content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;
    background:linear-gradient(180deg,var(--brand-gold) 0%,var(--brand-navy-soft) 100%);
}
.cd-timeline-item{position:relative;padding-bottom:2rem}
.cd-timeline-item:last-child{padding-bottom:0}
.cd-timeline-marker{
    position:absolute;left:-52px;top:0;width:48px;height:48px;border-radius:50%;
    background:linear-gradient(155deg,var(--brand-navy) 0%,var(--brand-navy-light) 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 22px rgba(11,31,58,.3),inset 0 2px 3px rgba(255,255,255,.2);
    border:3px solid #fff;
}
.cd-timeline-marker .icon{width:19px;height:19px}
.cd-timeline-marker.is-sea{background:linear-gradient(155deg,#4a7bab 0%,#7fa8cf 100%)}
.cd-timeline-body{
    background:#fff;border:1px solid #eef1f6;border-radius:1rem;padding:1.1rem 1.35rem;
    box-shadow:0 8px 20px rgba(11,31,58,.05);
}
.cd-timeline-day{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold)}
.cd-timeline-port{font-family:var(--pt-font-display);font-size:1.15rem;color:var(--brand-navy);margin:.15rem 0 .3rem}
.cd-timeline-times{display:flex;gap:1rem;font-size:.8rem;font-weight:600;color:#6b7789;margin-bottom:.5rem}
.cd-timeline-desc{font-size:.88rem;color:#4b5565;margin:0;line-height:1.55}

/* ---------- Cabins ---------- */
.cd-cabin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;perspective:1400px}
.cd-cabin-card{
    position:relative;background:#fff;border:1px solid #eef1f6;border-radius:1.1rem;overflow:hidden;
    box-shadow:0 10px 24px rgba(11,31,58,.08);
    transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;
    transform-style:preserve-3d;
}
.cd-cabin-card:hover{
    transform:translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.015);
    box-shadow:0 28px 46px rgba(11,31,58,.22);
}
.cd-cabin-badge{
    position:absolute;top:.85rem;right:.85rem;z-index:2;
    background:var(--brand-gold);color:#fff;font-size:.66rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.03em;padding:.3rem .65rem;border-radius:999px;box-shadow:0 6px 14px rgba(169,121,26,.4);
}
.cd-cabin-image{height:150px;background-size:cover;background-position:center}
.cd-cabin-body{padding:1.1rem 1.2rem 1.3rem}
.cd-cabin-name{font-family:var(--pt-font-display);font-size:1.15rem;color:var(--brand-navy);margin-bottom:.4rem}
.cd-cabin-desc{font-size:.82rem;color:#6b7789;line-height:1.5;margin-bottom:.7rem;min-height:58px}
.cd-cabin-occupancy{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:#4b5565;margin-bottom:.8rem}
.cd-cabin-occupancy .icon{width:14px;height:14px;color:#9aa1b3}
.cd-cabin-amenities{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.cd-cabin-amenities li{font-size:.78rem;color:#4b5565;padding-left:1.1rem;position:relative}
.cd-cabin-amenities li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--brand-gold)}
.cd-cabin-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;border-top:1px solid #eef1f6}
.cd-cabin-price span{display:block;font-size:.66rem;color:#8b95a5;text-transform:uppercase}
.cd-cabin-price b{font-size:1.05rem;color:var(--brand-navy)}
.cd-cabin-select{
    background:var(--brand-navy);color:#fff;font-size:.8rem;font-weight:700;
    padding:.5rem 1rem;border-radius:.6rem;transition:background-color .15s ease;
}
.cd-cabin-select:hover{background:var(--brand-navy-dark)}
.cd-cabin-select.is-selected{background:#2e7d46}

/* ---------- Gallery ---------- */
/* ---------- Gallery ----------
   Spans both grid columns so it runs the full width of the page rather than
   sitting in the narrower content column next to the sidebar. */
.cd-gallery-section{grid-column:1 / -1}

/* auto-fit + minmax lets the tiles divide the full width between them: three
   images take a third each, more images wrap onto a second row. The old rule
   pinned every tile to 320px and scrolled the overflow, which left dead space
   on the right and clipped the last image behind a scrollbar. */
.cd-gallery{
    display:grid;
    /* min() guards the track floor: a bare minmax(280px,1fr) cannot shrink below
       280px, so on a viewport under ~320px the grid would overflow its container
       and scroll the page sideways. */
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:1rem;
}
.cd-gallery-img{
    /* Ratio rather than a fixed height, so a tile that is now much wider does
       not stay letterboxed at 220px. */
    aspect-ratio:4/3;border-radius:1rem;background-size:cover;background-position:center;
    box-shadow:0 12px 26px rgba(11,31,58,.12);
    transition:transform .18s ease,box-shadow .18s ease;
}
.cd-gallery-img:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(11,31,58,.18)}

/* ================= Responsive ================= */
@media (max-width:991.98px){
    .cd-hero{height:460px}
    .cd-hero-title{font-size:32px}
    .cd-layout{grid-template-columns:1fr}
    .cd-sidebar{position:static;order:-1}
    .cd-sidebar-card{margin-top:0;margin-bottom:2rem}
    .cd-highlights-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575.98px){
    .cd-hero{height:420px}
    .cd-highlights-grid{grid-template-columns:1fr}
    .cd-cabin-grid{grid-template-columns:1fr}
    .cd-timeline{padding-left:44px}
    .cd-timeline-marker{left:-44px;width:40px;height:40px}
}