/* ============================================================
   LUCON – Cruise Schedule Page Redesign
   cruise-schedule.css  ·  Scoped to .cruise-schedule-page
   All rules use the .cruise-schedule-page ancestor to prevent
   bleed to other pages. Global styles in styles.css are not
   modified.
   ============================================================ */

/* ── Design tokens (page-scoped) ── */
.cruise-schedule-page {
  --cs-navy:       #0d2d3a;   /* primary deep navy */
  --cs-teal:       #006778;   /* ocean teal – links, status */
  --cs-teal-mid:   #007d8e;   /* interactive hover */
  --cs-seafoam:    #e8f5f7;   /* informational surface */
  --cs-sand:       #f6f2ec;   /* page background */
  --cs-coral:      #e85d26;   /* primary action */
  --cs-coral-dark: #c94d1e;   /* pressed state */
  --cs-amber:      #8a5a13;   /* caution / pending */
  --cs-ink:        #1a2e36;   /* body text */
  --cs-slate:      #4a6370;   /* secondary text */
  --cs-muted:      #6b8490;   /* tertiary / label text */
  --cs-line:       rgba(13, 45, 58, .10);
  --cs-card-bg:    #ffffff;
  --cs-radius-sm:  10px;
  --cs-radius-md:  14px;
  --cs-radius-lg:  20px;
  --cs-shadow-sm:  0 2px 8px rgba(13, 45, 58, .07);
  --cs-shadow-md:  0 6px 20px rgba(13, 45, 58, .09);
  --cs-shadow-lg:  0 12px 32px rgba(13, 45, 58, .13);

  background: var(--cs-sand);
}

/* ── Reduce excessive top padding on details-main for this page ── */
.cruise-schedule-page .details-main {
  padding-top: 2rem;
  padding-bottom: 4rem;
  background: var(--cs-sand);
}

/* ── Skip-link (global but ensure visible focus) ── */
.cruise-schedule-page .skip-link {
  background: var(--cs-coral);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   HEADER / NAV  – Fix mobile overlap
   ═══════════════════════════════════════════════════════════ */

/* Compact the topbar so it occupies less vertical space */
.cruise-schedule-page .topbar {
  background: rgba(13, 45, 58, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.cruise-schedule-page .nav {
  padding: 10px 0;
}

.cruise-schedule-page .brand-text {
  color: #ffffff;
  letter-spacing: .04em;
}

.cruise-schedule-page .brand img {
  box-shadow: none;
  border-radius: 10px;
}

.cruise-schedule-page .nav-link {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  padding: 8px 14px;
}

.cruise-schedule-page .nav-link:hover,
.cruise-schedule-page .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

.cruise-schedule-page .nav-cta {
  background: var(--cs-coral);
  border-color: var(--cs-coral);
  color: #ffffff;
  font-size: 14px;
  padding: 8px 18px;
}

.cruise-schedule-page .nav-cta:hover {
  background: var(--cs-coral-dark);
  border-color: var(--cs-coral-dark);
}

/* Trust badge bar – slimmer on schedule page */
.cruise-schedule-page .trust-badge-bar {
  background: rgba(13, 45, 58, .88);
  border-bottom: none;
  padding: 6px 0;
}

.cruise-schedule-page .trust-badge {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

/* Mobile hamburger icon */
.cruise-schedule-page .mobile-menu-toggle span {
  background: #ffffff;
}

.cruise-schedule-page .mobile-menu-toggle {
  background: rgba(255, 255, 255, .12);
}

/* Mobile nav drop-down – position relative to dark topbar */
@media (max-width: 768px) {
  .cruise-schedule-page .nav-menu {
    top: 0; /* override: the menu slides from the top itself */
    background: var(--cs-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    /* Push menu below the actual header height */
    margin-top: calc(var(--cs-header-offset, 66px));
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-110%);
    transition: transform .25s ease, opacity .25s ease;
    z-index: 98;
  }

  .cruise-schedule-page .nav-menu.active {
    transform: translateY(0);
  }

  .cruise-schedule-page .nav-link {
    color: rgba(255, 255, 255, .85);
    padding: 14px 16px;
    border-radius: 10px;
  }

  .cruise-schedule-page .nav-cta {
    margin: 6px 0 2px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE INTRODUCTION
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cs-intro {
  margin-bottom: 1.5rem;
}

.cruise-schedule-page .breadcrumb {
  margin-bottom: 1rem;
}

.cruise-schedule-page .details-title {
  color: var(--cs-navy);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .4rem;
}

.cruise-schedule-page .cs-intro__subtitle {
  color: var(--cs-slate);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 .65rem;
  max-width: 68ch;
}

/* Local time indicator */
.cruise-schedule-page .cs-local-time {
  align-items: center;
  color: var(--cs-teal);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 700;
  gap: .35rem;
  letter-spacing: .01em;
  margin-bottom: .85rem;
}

.cruise-schedule-page .cs-local-time svg {
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}

/* Schedule info disclosure */
.cruise-schedule-page .cs-info-disclosure {
  background: var(--cs-seafoam);
  border: 1px solid rgba(0, 103, 120, .18);
  border-radius: var(--cs-radius-md);
  font-size: .82rem;
  margin-bottom: 1.25rem;
  padding: .6rem .9rem;
}

.cruise-schedule-page .cs-info-disclosure summary {
  color: var(--cs-teal);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.cruise-schedule-page .cs-info-disclosure summary::-webkit-details-marker { display: none; }

.cruise-schedule-page .cs-info-disclosure summary::after {
  content: " ▾";
  font-size: .7rem;
}

.cruise-schedule-page .cs-info-disclosure[open] summary::after {
  content: " ▴";
}

.cruise-schedule-page .cs-info-disclosure p {
  color: var(--cs-slate);
  line-height: 1.55;
  margin: .5rem 0 0;
}

/* ═══════════════════════════════════════════════════════════
   NEXT CRUISE CALL CARD
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cs-next-call {
  background: linear-gradient(135deg, var(--cs-navy) 0%, #0a3f50 100%);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-lg);
  color: #fff;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr auto;
  margin-bottom: 1.75rem;
  overflow: hidden;
  padding: 1.5rem 1.6rem;
  position: relative;
}

.cruise-schedule-page .cs-next-call::before {
  background: rgba(255, 255, 255, .04);
  border-radius: 50%;
  content: '';
  height: 280px;
  pointer-events: none;
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
}

.cruise-schedule-page .cs-next-call__badge {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(255, 255, 255, .9);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .28rem .7rem;
  text-transform: uppercase;
  width: fit-content;
}

.cruise-schedule-page .cs-next-call__heading {
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin: .6rem 0 .2rem;
  text-transform: uppercase;
}

.cruise-schedule-page .cs-next-call__date {
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  margin: 0 0 .7rem;
}

.cruise-schedule-page .cs-next-call__ship {
  color: #ffffff;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .2rem;
}

.cruise-schedule-page .cs-next-call__ship a {
  color: inherit;
  text-decoration: none;
}

.cruise-schedule-page .cs-next-call__ship a:hover {
  text-decoration: underline;
}

.cruise-schedule-page .cs-next-call__line {
  color: rgba(255, 255, 255, .65);
  font-size: .88rem;
  margin: 0 0 1rem;
}

/* Structured time display grid */
.cruise-schedule-page .cs-next-call__times {
  display: grid;
  gap: .1rem 1.2rem;
  grid-template-columns: repeat(3, auto);
  margin: 0 0 1rem;
  width: fit-content;
}

.cruise-schedule-page .cs-next-call__times-label {
  color: rgba(255, 255, 255, .5);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cruise-schedule-page .cs-next-call__times-value {
  color: #ffffff;
  font-size: .95rem;
  font-weight: 750;
}

.cruise-schedule-page .cs-next-call__status-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .65rem;
}

.cruise-schedule-page .cs-busy-badge {
  align-items: center;
  background: rgba(232, 93, 38, .22);
  border: 1px solid rgba(232, 93, 38, .45);
  border-radius: 999px;
  color: #ffcfb8;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  gap: .3rem;
  letter-spacing: .04em;
  padding: .22rem .65rem;
}

.cruise-schedule-page .cs-busy-badge::before {
  content: '⚠';
  font-size: .65rem;
}

.cruise-schedule-page .cs-next-call__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .25rem;
}

.cruise-schedule-page .cs-next-call__cta {
  background: var(--cs-coral);
  border-radius: var(--cs-radius-sm);
  color: #ffffff;
  font-size: .85rem;
  font-weight: 800;
  padding: .6rem 1.1rem;
  text-decoration: none;
  transition: background .18s;
  white-space: nowrap;
}

.cruise-schedule-page .cs-next-call__cta:hover {
  background: var(--cs-coral-dark);
}

.cruise-schedule-page .cs-next-call__secondary {
  background: rgba(255, 255, 255, .12);
  border-radius: var(--cs-radius-sm);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  font-weight: 700;
  padding: .6rem 1rem;
  text-decoration: none;
  transition: background .18s;
  white-space: nowrap;
}

.cruise-schedule-page .cs-next-call__secondary:hover {
  background: rgba(255, 255, 255, .18);
}

.cruise-schedule-page .cs-next-call__aside {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   FILTERS  – Redesigned
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cruise-schedule-filters {
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-md);
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.4rem;
}

/* Primary search row */
.cruise-schedule-page .cs-filters__primary {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr auto;
  margin-bottom: 1rem;
}

.cruise-schedule-page .cs-search-field {
  position: relative;
}

.cruise-schedule-page .cs-search-field svg {
  color: var(--cs-muted);
  height: 18px;
  left: .9rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
}

.cruise-schedule-page .cs-search-field input {
  background: var(--cs-seafoam);
  border: 1.5px solid rgba(0, 103, 120, .2);
  border-radius: var(--cs-radius-md);
  color: var(--cs-ink);
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: .65rem .9rem .65rem 2.4rem;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
  box-sizing: border-box;
}

.cruise-schedule-page .cs-search-field input:focus {
  border-color: var(--cs-teal);
  box-shadow: 0 0 0 3px rgba(0, 103, 120, .15);
  outline: none;
}

/* Quick-range chip strip */
.cruise-schedule-page .cs-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .9rem;
}

.cruise-schedule-page .cs-chip {
  align-items: center;
  background: var(--cs-seafoam);
  border: 1.5px solid rgba(0, 103, 120, .2);
  border-radius: 999px;
  color: var(--cs-teal);
  cursor: pointer;
  display: inline-flex;
  font-size: .8rem;
  font-weight: 700;
  gap: .3rem;
  line-height: 1;
  padding: .38rem .85rem;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
  white-space: nowrap;
}

.cruise-schedule-page .cs-chip:hover,
.cruise-schedule-page .cs-chip:focus-visible {
  background: var(--cs-teal);
  border-color: var(--cs-teal);
  color: #ffffff;
}

.cruise-schedule-page .cs-chip--active {
  background: var(--cs-teal);
  border-color: var(--cs-teal);
  color: #ffffff;
}

.cruise-schedule-page .cs-chip:focus-visible {
  outline: 3px solid var(--cs-coral);
  outline-offset: 2px;
}

/* Advanced filters row – collapsed on mobile by default */
.cruise-schedule-page .cs-advanced-toggle {
  background: none;
  border: none;
  color: var(--cs-teal);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.cruise-schedule-page .cs-advanced-toggle:hover { color: var(--cs-navy); }

.cruise-schedule-page .cs-filters__advanced {
  border-top: 1px solid var(--cs-line);
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
  padding-top: 1rem;
}

.cruise-schedule-page .cs-filters__advanced.cs-hidden {
  display: none;
}

/* Reuse existing .cruise-schedule-filter-field label / input styles
   but override colours and sizing for the new design */
.cruise-schedule-page .cruise-schedule-filter-field label {
  color: var(--cs-ink);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.cruise-schedule-page .cruise-schedule-filter-field input,
.cruise-schedule-page .cruise-schedule-filter-field select {
  background: #fff;
  border: 1.5px solid rgba(13, 45, 58, .16);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink);
  min-height: 44px;
}

.cruise-schedule-page .cruise-schedule-filter-field input:focus,
.cruise-schedule-page .cruise-schedule-filter-field select:focus {
  border-color: var(--cs-teal);
  box-shadow: 0 0 0 3px rgba(0, 103, 120, .14);
}

/* Footer row */
.cruise-schedule-page .cs-filters__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: space-between;
  margin-top: .9rem;
}

.cruise-schedule-page .cs-result-count {
  color: var(--cs-muted);
  font-size: .85rem;
  margin: 0;
}

.cruise-schedule-page .cs-result-count strong {
  color: var(--cs-teal);
  font-size: 1rem;
}

.cruise-schedule-page .cs-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Apply / Clear buttons – scoped to filter form only */
.cruise-schedule-page .cs-btn-apply {
  background: var(--cs-navy);
  border: none;
  border-radius: var(--cs-radius-sm);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  min-height: 44px;
  padding: .55rem 1.2rem;
  transition: background .18s;
}

.cruise-schedule-page .cs-btn-apply:hover { background: var(--cs-teal); }

.cruise-schedule-page .cs-btn-clear {
  background: transparent;
  border: 1.5px solid var(--cs-line);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-slate);
  display: none;   /* shown via .cs-filters--active */
  font-size: .82rem;
  font-weight: 700;
  min-height: 44px;
  padding: .55rem 1rem;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}

.cruise-schedule-page .cs-btn-clear:hover {
  border-color: var(--cs-teal);
  color: var(--cs-teal);
}

/* Show "Clear all" when any filter is active */
.cruise-schedule-page .cs-filters--active .cs-btn-clear { display: inline-flex; align-items: center; }

/* Busy-day checkbox in new design */
.cruise-schedule-page .cs-busy-check {
  align-items: center;
  display: inline-flex;
  gap: .45rem;
}

.cruise-schedule-page .cs-busy-check input[type="checkbox"] {
  accent-color: var(--cs-teal);
  height: 18px;
  width: 18px;
}

.cruise-schedule-page .cs-busy-check span {
  color: var(--cs-ink);
  font-size: .85rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   MONTH NAVIGATION STRIP
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cs-month-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.cruise-schedule-page .cs-month-nav::-webkit-scrollbar {
  height: 3px;
}

.cruise-schedule-page .cs-month-nav::-webkit-scrollbar-track {
  background: transparent;
}

.cruise-schedule-page .cs-month-nav::-webkit-scrollbar-thumb {
  background: var(--cs-line);
  border-radius: 99px;
}

.cruise-schedule-page .cs-month-nav__btn {
  background: var(--cs-card-bg);
  border: 1.5px solid var(--cs-line);
  border-radius: 999px;
  color: var(--cs-slate);
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  padding: .38rem .85rem;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
  white-space: nowrap;
}

.cruise-schedule-page .cs-month-nav__btn:hover {
  background: var(--cs-seafoam);
  border-color: var(--cs-teal);
  color: var(--cs-teal);
}

.cruise-schedule-page .cs-month-nav__btn[aria-current="true"] {
  background: var(--cs-navy);
  border-color: var(--cs-navy);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   SCHEDULE LIST – Date groups
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cs-schedule-section {
  /* override the default panel chrome for this page */
}

.cruise-schedule-page .cs-schedule-section .panel-header h2 {
  color: var(--cs-navy);
}

.cruise-schedule-page .cruise-schedule-days {
  display: grid;
  gap: 2rem;
}

/* Month group heading */
.cruise-schedule-page .cs-month-heading {
  align-items: center;
  border-bottom: 2px solid var(--cs-navy);
  color: var(--cs-navy);
  display: flex;
  font-size: .8rem;
  font-weight: 800;
  gap: .6rem;
  letter-spacing: .1em;
  margin: .5rem 0 1.25rem;
  padding-bottom: .45rem;
  text-transform: uppercase;
}

/* Date group */
.cruise-schedule-page .cruise-schedule-day {
  scroll-margin-top: 4rem;
}

.cruise-schedule-page .cruise-schedule-day h3 {
  align-items: baseline;
  color: var(--cs-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.05rem;
  gap: .45rem;
  margin: 0 0 .75rem;
}

.cruise-schedule-page .cruise-schedule-day__count {
  color: var(--cs-muted);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Busy day badge on date heading */
.cruise-schedule-page .cs-day-busy-badge {
  align-items: center;
  background: rgba(232, 93, 38, .12);
  border: 1px solid rgba(232, 93, 38, .35);
  border-radius: 999px;
  color: #b84215;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  gap: .25rem;
  letter-spacing: .03em;
  padding: .15rem .55rem;
}

/* ═══════════════════════════════════════════════════════════
   CRUISE CALL CARDS  – Complete redesign
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cruise-call-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cruise-schedule-page .cruise-call-card {
  background: var(--cs-card-bg);
  border: 1.5px solid var(--cs-line);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem 1.1rem 1rem;
  position: relative;
  transition: box-shadow .18s, border-color .18s;
}

.cruise-schedule-page .cruise-call-card:hover {
  border-color: rgba(0, 103, 120, .28);
  box-shadow: var(--cs-shadow-md);
}

.cruise-schedule-page .cruise-call-card--unknown-time {
  border-color: rgba(138, 90, 19, .28);
}

/* Topline: status + port */
.cruise-schedule-page .cruise-call-card__topline {
  align-items: center;
  display: flex;
  gap: .4rem;
  justify-content: space-between;
  margin-bottom: .55rem;
}

.cruise-schedule-page .cruise-call-card__status {
  background: var(--cs-seafoam);
  border-radius: 999px;
  color: var(--cs-teal);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .2rem .6rem;
  text-transform: uppercase;
}

/* Status variants */
.cruise-schedule-page .cruise-call-card__status--in-port {
  background: rgba(5, 128, 76, .1);
  color: #065c3a;
}

.cruise-schedule-page .cruise-call-card__status--today {
  background: rgba(0, 103, 120, .15);
  color: var(--cs-teal);
}

.cruise-schedule-page .cruise-call-card__port {
  color: var(--cs-muted);
  font-size: .72rem;
  text-align: right;
  white-space: nowrap;
}

/* Ship name – strongest element */
.cruise-schedule-page .cruise-call-card__ship {
  color: var(--cs-navy);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .15rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cruise-schedule-page .cruise-call-card__ship a {
  color: inherit;
  text-decoration: none;
}

.cruise-schedule-page .cruise-call-card__ship a:hover {
  color: var(--cs-teal);
  text-decoration: underline;
}

/* Cruise line */
.cruise-schedule-page .cruise-call-card__line {
  color: var(--cs-slate);
  font-size: .85rem;
  margin: 0 0 .75rem;
  overflow-wrap: break-word;
}

.cruise-schedule-page .cruise-call-card__line a {
  color: var(--cs-teal);
  text-decoration: none;
}

.cruise-schedule-page .cruise-call-card__line a:hover {
  text-decoration: underline;
}

/* Source notice – condensed */
.cruise-schedule-page .cruise-call-card__source-note {
  background: rgba(138, 90, 19, .07);
  border-left: 2px solid rgba(138, 90, 19, .4);
  border-radius: 0 4px 4px 0;
  color: var(--cs-amber);
  font-size: .73rem;
  line-height: 1.45;
  margin: 0 0 .75rem;
  padding: .25rem .55rem;
}

/* Structured time facts grid */
.cruise-schedule-page .cruise-call-card__facts {
  border-top: 1px solid var(--cs-line);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;
  padding-top: .7rem;
}

/* Remove old .cruise-call-card__facts div border for new grid */
.cruise-schedule-page .cruise-call-card__facts div {
  border-top: none;
  padding-top: 0;
}

.cruise-schedule-page .cruise-call-card__facts dt {
  color: var(--cs-muted);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .07em;
  margin-bottom: .2rem;
  text-transform: uppercase;
}

.cruise-schedule-page .cruise-call-card__facts dd {
  color: var(--cs-ink);
  font-size: .88rem;
  font-weight: 750;
  margin: 0;
}

/* Duration pill */
.cruise-schedule-page .cruise-call-card__duration {
  background: var(--cs-seafoam);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-teal);
  font-size: .75rem;
  font-weight: 800;
  grid-column: 1 / -1;
  margin: .6rem 0 0;
  padding: .22rem .6rem;
  text-align: center;
  width: 100%;
}

/* Time not published */
.cruise-schedule-page .cruise-call-card__time-note {
  color: var(--cs-amber);
  font-size: .78rem;
  font-weight: 700;
  margin: .6rem 0 0;
}

/* Action row */
.cruise-schedule-page .cruise-call-card__actions {
  border-top: 1px solid var(--cs-line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
  padding-top: .75rem;
}

/* Plan my cruise day – primary */
.cruise-schedule-page .cruise-call-card__planner-link {
  background: var(--cs-coral);
  border-radius: var(--cs-radius-sm);
  color: #ffffff;
  flex: 1 1 100%;
  font-size: .8rem;
  font-weight: 800;
  min-height: 40px;
  padding: .5rem .8rem;
  text-align: center;
  text-decoration: none;
  transition: background .18s;
}

.cruise-schedule-page .cruise-call-card__planner-link:hover {
  background: var(--cs-coral-dark);
}

/* Add to calendar */
.cruise-schedule-page .cruise-call-card__calendar-link {
  align-items: center;
  border: 1.5px solid var(--cs-line);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-teal);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  gap: .3rem;
  min-height: 40px;
  padding: .4rem .75rem;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}

.cruise-schedule-page .cruise-call-card__calendar-link:hover {
  border-color: var(--cs-teal);
}

/* View ship secondary link */
.cruise-schedule-page .cruise-call-card__ship-link {
  align-items: center;
  border: 1.5px solid var(--cs-line);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-slate);
  display: inline-flex;
  flex: 1 1 auto;
  font-size: .78rem;
  font-weight: 700;
  min-height: 40px;
  padding: .4rem .7rem;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}

.cruise-schedule-page .cruise-call-card__ship-link:hover {
  border-color: var(--cs-teal);
  color: var(--cs-teal);
}

/* No results state */
.cruise-schedule-page .cs-no-results {
  background: var(--cs-card-bg);
  border: 1.5px solid var(--cs-line);
  border-radius: var(--cs-radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
}

.cruise-schedule-page .cs-no-results__icon {
  color: var(--cs-muted);
  font-size: 2rem;
  margin-bottom: .5rem;
}

.cruise-schedule-page .cs-no-results p {
  color: var(--cs-slate);
  margin: .35rem 0;
}

.cruise-schedule-page .cs-no-results a {
  color: var(--cs-teal);
}

/* ═══════════════════════════════════════════════════════════
   CRUISE-DAY PLANNING SECTION
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page .cs-planning {
  background: var(--cs-seafoam);
  border: 1px solid rgba(0, 103, 120, .16);
  border-radius: var(--cs-radius-lg);
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.6rem;
}

.cruise-schedule-page .cs-planning h2 {
  color: var(--cs-navy);
  font-size: 1.2rem;
  margin: 0 0 .45rem;
}

.cruise-schedule-page .cs-planning__intro {
  color: var(--cs-slate);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 72ch;
}

.cruise-schedule-page .cs-planning__grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cruise-schedule-page .cs-planning-card {
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-md);
  padding: 1rem 1.1rem;
  text-decoration: none;
}

.cruise-schedule-page .cs-planning-card:hover {
  border-color: rgba(0, 103, 120, .32);
  box-shadow: var(--cs-shadow-sm);
}

.cruise-schedule-page .cs-planning-card__icon {
  color: var(--cs-teal);
  font-size: 1.25rem;
  margin-bottom: .4rem;
}

.cruise-schedule-page .cs-planning-card__title {
  color: var(--cs-navy);
  font-size: .9rem;
  font-weight: 800;
  margin: 0 0 .2rem;
}

.cruise-schedule-page .cs-planning-card__desc {
  color: var(--cs-slate);
  font-size: .8rem;
  line-height: 1.45;
  margin: 0;
}

/* Return-timing note */
.cruise-schedule-page .cs-return-timing {
  background: rgba(138, 90, 19, .07);
  border-radius: var(--cs-radius-sm);
  border-left: 3px solid rgba(138, 90, 19, .35);
  color: var(--cs-amber);
  font-size: .82rem;
  line-height: 1.5;
  margin-top: 1.1rem;
  padding: .6rem .9rem;
}

/* Practical info panel */
.cruise-schedule-page .details-panel.cruise-schedule-panel {
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.cruise-schedule-page .details-panel.cruise-schedule-panel .panel-header {
  background: var(--cs-card-bg);
  border-bottom: 1px solid var(--cs-line);
  padding: 1.1rem 1.4rem;
}

.cruise-schedule-page .details-panel.cruise-schedule-panel .panel-header h2 {
  color: var(--cs-navy);
  font-size: 1.1rem;
  margin: 0;
}

.cruise-schedule-page .details-panel.cruise-schedule-panel .panel-content {
  padding: 1.2rem 1.4rem;
}

.cruise-schedule-page .cruise-schedule-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY CTA  – Safer implementation
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .cruise-schedule-page .mobile-sticky-cta {
    background: rgba(13, 45, 58, .97);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  }

  .cruise-schedule-page .mobile-sticky-cta__primary {
    background: var(--cs-coral);
    border-radius: var(--cs-radius-sm);
    color: #ffffff;
    font-size: .85rem;
  }

  .cruise-schedule-page .mobile-sticky-cta__secondary {
    background: rgba(255, 255, 255, .12);
    border-radius: var(--cs-radius-sm);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOCUS STATES – WCAG 2.2 AA
   ═══════════════════════════════════════════════════════════ */

.cruise-schedule-page a:focus-visible,
.cruise-schedule-page button:focus-visible,
.cruise-schedule-page input:focus-visible,
.cruise-schedule-page select:focus-visible {
  outline: 3px solid var(--cs-coral);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   SUMMARY SECTION – Override existing with richer card
   ═══════════════════════════════════════════════════════════ */

/* Hide the default cruise-schedule-summary in favour of cs-next-call */
.cruise-schedule-page .cruise-schedule-summary {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – Tablet
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  .cruise-schedule-page .cs-next-call {
    grid-template-columns: 1fr;
  }

  .cruise-schedule-page .cs-next-call__aside {
    display: none;
  }

  .cruise-schedule-page .cs-filters__advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – Mobile (≤768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .cruise-schedule-page .details-main {
    padding-top: 1.25rem;
  }

  .cruise-schedule-page .cs-next-call {
    grid-template-columns: 1fr;
    padding: 1.2rem 1.1rem;
  }

  .cruise-schedule-page .cs-next-call__aside {
    display: none;
  }

  .cruise-schedule-page .cs-next-call__times {
    gap: .1rem .85rem;
  }

  .cruise-schedule-page .cs-filters__primary {
    grid-template-columns: 1fr;
  }

  .cruise-schedule-page .cs-filters__advanced {
    grid-template-columns: 1fr;
  }

  .cruise-schedule-page .cs-advanced-toggle {
    display: block;
    margin-top: .6rem;
  }

  .cruise-schedule-page .cruise-call-grid {
    grid-template-columns: 1fr;
  }

  .cruise-schedule-page .cruise-call-card__facts {
    grid-template-columns: 1fr 1fr;
  }

  .cruise-schedule-page .cs-planning__grid {
    grid-template-columns: 1fr;
  }

  .cruise-schedule-page .cruise-schedule-links {
    flex-direction: column;
  }

  .cruise-schedule-page .cruise-schedule-links .btn {
    text-align: center;
  }

  /* Ensure source notes are compact on mobile */
  .cruise-schedule-page .cruise-call-card__source-note {
    font-size: .71rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – Desktop wide (≥1280px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .cruise-schedule-page .cruise-call-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cruise-schedule-page .cs-filters__advanced {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .cruise-schedule-page *,
  .cruise-schedule-page *::before,
  .cruise-schedule-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */

@media print {
  .cruise-schedule-page .mobile-sticky-cta,
  .cruise-schedule-page .cs-next-call__actions,
  .cruise-schedule-page .cruise-call-card__actions { display: none !important; }
}