/* ---------------------------------------------------------------------------
   /ferry — departures by island

   Read standing up, often at a dock, often on a bad connection. So the next
   departure time is the largest thing on each card, and every state is carried
   by a word as well as a colour: "gone" has to survive being glanced at in
   sunlight, and colour alone fails that and anyone colour-blind.

   PALETTE. Every colour here resolves to a Destinito token from
   assets/css/ds/tokens/colors.css. This file used to read --accent, --muted,
   --surface, --surface-2 and --link, none of which the app defines — so all
   five silently took their hardcoded fallbacks and the page rendered teal
   chips, slate greys and a blue link inside a navy-and-orange site. That is
   what made it look unrelated to the rest of Destinito. Navy carries
   structure, orange is the spark, and there is no third hue except the
   functional ones that mean a status.
   --------------------------------------------------------------------------- */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* The same navy-to-navy-900 fill .iig-hero uses on the home page, so this
   reads as the site's hero rather than a second idea about what one is.
   Deliberately not the purple of /Events or the red of /Restaurants: those
   predate the token set and are the drift this page should not join. */
.ferry-hero {
    background: linear-gradient(135deg, var(--navy, #003366) 0%, var(--navy-900, #002247) 100%);
    color: var(--white, #fff);
    padding: 2.25rem 0 2rem;
}

/* .iig-theme .container carries a 12px top margin for body content. Inside a
   full-bleed band it just dents the fill, and the band sets its own padding. */
.ferry-hero .container { margin-top: 0; }

.ferry-hero-eyebrow {
    margin: 0 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--orange, #FF7F0E);
}

.ferry-hero-title {
    margin: 0 0 .6rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--white, #fff);
}

.ferry-hero-summary {
    margin: 0;
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.ferry-hero-facts {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
}

.ferry-fact {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.ferry-fact-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white, #fff);
}

.ferry-fact-label {
    font-size: .8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .75);
}

/* The sea-state fact keeps a status colour, because rough water is a status.
   The dot is redundant with the label beside it on purpose — a risk read at a
   glance in sunlight cannot depend on a hue. */
.ferry-fact--sea .ferry-fact-value {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ferry-fact--sea .ferry-fact-value::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: none;
    background: var(--success, #1f8a54);
}

.ferry-fact--amber .ferry-fact-value::before { background: var(--warning, #b8860b); }
.ferry-fact--red   .ferry-fact-value::before { background: var(--danger, #c0392b); }

/* ── Page body ────────────────────────────────────────────────────────────── */

.ferry-page { padding-top: 1.75rem; padding-bottom: 2.5rem; }

.ferry-eyebrow {
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6d88a8);
}

/* ── Next departure cards ─────────────────────────────────────────────────── */

.ferry-next { margin-bottom: 2rem; }

.ferry-next-cards {
    margin: 0;
    padding: 0 0 .25rem;
    list-style: none;
    display: flex;
    gap: .75rem;
    /* Scrolls inside its own box; the page body never scrolls sideways. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.ferry-next-card {
    flex: 0 0 13rem;
    scroll-snap-align: start;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card, #fff);
}

.ferry-next-card--done { opacity: .62; }

.ferry-next-link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    color: inherit;
    text-decoration: none;
    height: 100%;
    border-radius: var(--radius-md, 12px);
}

.ferry-next-link:hover,
.ferry-next-link:focus-visible { background: var(--surface-tinted, #eef2f7); }

.ferry-next-island {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #6d88a8);
}

.ferry-next-time {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--navy, #003366);
}

.ferry-next-time--none { color: var(--text-muted, #6d88a8); }

/* Operator and port are content, not chrome, so they take a navy that clears
   AA on white rather than the muted tint the design system reserves for
   labels. This board gets read outdoors. */
.ferry-next-meta {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--navy-600, #2b5c8f);
}

/* The one live number on the card, and the only orange on it. */
.ferry-next-countdown {
    margin-top: .1rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--orange-press, #cf6403);
}

/* ── Filters ──────────────────────────────────────────────────────────────── */

.ferry-filters {
    margin: 0 0 1.5rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-tinted, #eef2f7);
}

.ferry-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .9rem;
}

.ferry-filter-row + .ferry-filter-row { margin-top: .6rem; }

.ferry-filter-label {
    flex: 0 0 4.5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6d88a8);
}

.ferry-chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ferry-chip {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--border-strong, #b9c7d6);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-card, #fff);
    color: var(--navy, #003366);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ferry-chip:hover { border-color: var(--navy, #003366); }

/* Selected state is navy, not orange: this is structure, and orange stays the
   spark reserved for the live countdown and the hero eyebrow. */
.ferry-chip.is-on {
    background: var(--navy, #003366);
    border-color: var(--navy, #003366);
    color: var(--white, #fff);
}

/* ── Timetable ────────────────────────────────────────────────────────────── */

.ferry-port {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card, #fff);
    overflow: hidden;
}

.ferry-port-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 0;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border, #dbe3ec);
    background: var(--surface-tinted, #eef2f7);
}

.ferry-port-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6d88a8);
}

.ferry-port-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy, #003366);
}

.ferry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    display: block;
    overflow-x: auto;
}

.ferry-table th,
.ferry-table td {
    padding: .6rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border, #dbe3ec);
    white-space: nowrap;
}

.ferry-table tbody tr:last-child th,
.ferry-table tbody tr:last-child td { border-bottom: 0; }

.ferry-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6d88a8);
}

.ferry-table tbody th {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--navy, #003366);
}

.ferry-table tbody td { color: var(--navy-600, #2b5c8f); }

.ferry-table tbody tr:hover { background: var(--surface-tinted, #eef2f7); }

.ferry-table a { color: var(--navy, #003366); font-weight: 600; }

/* Departed sailings stay on the page — proof of the schedule for somebody who
   just missed one — but recede so the eye lands on what is still to come. */
.ferry-row--gone { opacity: .45; }

.ferry-duration,
.ferry-vessel,
.ferry-status-note {
    display: block;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--text-muted, #6d88a8);
    white-space: normal;
}

.ferry-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: var(--radius-pill, 999px);
    font-size: .75rem;
    font-weight: 700;
}

.ferry-badge--soon  { background: var(--orange-050, #fff3e6); color: var(--orange-press, #cf6403); }
.ferry-badge--gone  { background: var(--surface-tinted, #eef2f7); color: var(--text-muted, #6d88a8); }
.ferry-badge--alert { background: #fbe3ea; color: #7d1c39; text-transform: capitalize; }

.ferry-note,
.ferry-empty-day {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--text-muted, #6d88a8);
}

.ferry-note { max-width: 46rem; }

.ferry-more { margin-top: 1.5rem; font-size: .9375rem; }

.ferry-more a {
    color: var(--navy, #003366);
    font-weight: 700;
    text-decoration: none;
}

.ferry-more a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .ferry-hero { padding: 1.75rem 0 1.5rem; }
    .ferry-hero-facts { gap: .75rem 1.25rem; }
    .ferry-next-card { flex-basis: 11rem; }
    .ferry-next-time { font-size: 1.4rem; }
    .ferry-filter-label { flex-basis: 100%; }
    .ferry-table th,
    .ferry-table td { padding: .55rem .75rem; }
}