/* Shared stylesheet for the three shuttle CONTENT sections added by the UX
   rebuild of 18 Aug 2026: shuttle_fares_table (.shf), shuttle_rules (.shu)
   and event_timeline (.evt).

   One file, three prefixes, because they are placed together on the same
   event page far more often than apart, and three <link>s for three sections
   on one page is three requests where one does.

   Mobile-first. Every wide thing scrolls inside its own container: the page
   body must never scroll horizontally. */

/* ══ Shuttle fares table (.shf) ═════════════════════════════════════════ */
.shf { padding: 56px 0; }
.shf-title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.015em;
}
.shf-accent { color: var(--primary-color, #0a7d4b); }
.shf-desc { margin: 0 0 22px; max-width: 68ch; line-height: 1.6; color: #4b5563; }
.shf-empty { margin: 0; color: #6b7280; }

.shf-band {
    margin: 26px 0 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
/* The table is CAPPED, not full-bleed. At 1300px with a handful of origins
   the columns drifted so far apart that a row read as four unrelated things;
   with a single active origin (which is exactly where site 90 starts) it was
   one lonely line under a full-width header. A measure keeps the origin, its
   two prices and its button readable as one row. */
.shf-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 860px; }
.shf-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: .96rem;
}
/* A table of one row does not need a header row explaining its columns: the
   prices are already labelled by the row itself. Below three origins the
   header is noise, so it goes and the row grows into a plain statement. */
.shf-wrap.is-single .shf-table thead { display: none; }
.shf-wrap.is-single .shf-table th,
.shf-wrap.is-single .shf-table td { border-bottom: 0; padding-top: 0; }
.shf-wrap.is-single { max-width: 780px; }
.shf-wrap.is-single .shf-origin { white-space: nowrap; }
.shf-wrap.is-single .shf-num::before {
    content: attr(data-label) " ";
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
    margin-right: 6px;
}
.shf-table th, .shf-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e6e8ec;
}
.shf-table thead th {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom-width: 2px;
    white-space: nowrap;
}
.shf-table tbody tr:hover { background: #fafbfc; }
.shf-origin { font-weight: 600; color: #16181d; }
.shf-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shf-act { text-align: right; white-space: nowrap; }
.shf-btn {
    display: inline-block;
    padding: 8px 16px;
    min-height: 40px;
    line-height: 24px;
    border: 1px solid var(--primary-color, #0a7d4b);
    border-radius: 8px;
    color: var(--primary-color, #0a7d4b);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.shf-btn:hover { background: var(--primary-color, #0a7d4b); color: #fff; }
.shf-btn:focus-visible { outline: 2px solid var(--primary-color, #0a7d4b); outline-offset: 2px; }
/* A visually hidden column heading: the Book column needs an accessible name
   without printing a redundant word above every button. */
.shf-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shf-note { margin: 14px 0 0; font-size: .87rem; color: #6b7280; }

/* On a phone the table becomes a stack of cards: a 420px-wide table inside a
   360px scroller CLIPPED the return price and the Book button with no visual
   cue that anything was there (found on the 390 screenshot, perfection pass
   22 Aug 2026). The column headings come back as the data-label kickers. */
@media (max-width: 600px) {
    .shf-wrap, .shf-wrap.is-single { overflow: visible; max-width: none; }
    .shf-table { min-width: 0; display: block; }
    .shf-table thead { display: none; }
    .shf-table tbody { display: flex; flex-direction: column; gap: 10px; }
    .shf-table tr { display: block; padding: 14px 16px; background: #fff; border: 1px solid #e6e8ec; border-radius: 14px; }
    .shf-table tbody tr:hover { background: #fff; }
    .shf-table th, .shf-table td,
    .shf-wrap.is-single .shf-table th, .shf-wrap.is-single .shf-table td { display: block; padding: 0; border-bottom: 0; text-align: left; white-space: normal; }
    .shf-origin, .shf-wrap.is-single .shf-origin { font-size: 1.05rem; margin-bottom: 8px; white-space: normal; }
    .shf-num { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-weight: 600; }
    .shf-num::before, .shf-wrap.is-single .shf-num::before {
        content: attr(data-label);
        font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-right: 10px;
    }
    .shf-act { padding-top: 12px; }
    .shf-btn { display: block; text-align: center; min-height: 44px; line-height: 28px; }
}

/* ══ Shuttle rules (.shu) ═══════════════════════════════════════════════ */
.shu { padding: 56px 0; }
.shu-title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.015em;
}
.shu-accent { color: var(--primary-color, #0a7d4b); }
.shu-desc { margin: 0 0 22px; max-width: 68ch; line-height: 1.6; color: #4b5563; }

/* `align-items: start` is load-bearing. A grid row stretches its items to
   the tallest by default, so "Salita a bordo" (one line) and "Bagagli" (one
   line) were drawn as tall as the four-row cancellation table beside them,
   each with a void of empty card under the text. Two of the three cards were
   90% nothing. Each card is now its own height. */
.shu-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.shu-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
}
.shu-ic {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color, #0a7d4b) 10%, #fff);
    color: var(--primary-color, #0a7d4b);
}
.shu-card-t { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
.shu-card-b { margin: 0; line-height: 1.6; color: #4b5563; }

/* ── The cancellation ladder ────────────────────────────────────────────
   Its own full-width band under the cards, laid out as the steps it is. */
.shu-policy { margin-top: 16px; }
.shu-policy-t {
    margin: 0 0 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
.shu-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #e6e8ec;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
}
.shu-step {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
}
.shu-step-when { color: #4b5563; font-size: .93rem; line-height: 1.4; }
.shu-step-val  { font-weight: 700; color: #16181d; white-space: nowrap; }
/* The last step is the one that costs money: say so quietly. */
.shu-step:last-child .shu-step-val { color: #9aa1ab; }

@media (min-width: 768px) {
    /* Four across, each a column: the ladder reads left to right, from the
       most generous refund to none, which is the shape of the policy. */
    .shu-ladder { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .shu-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        min-height: 92px;
        justify-content: center;
    }
    .shu-step-val { font-size: 1.12rem; }
}

.shu-carriage {
    margin-top: 16px;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #fff;
}
.shu-carriage > summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.shu-carriage > summary::-webkit-details-marker { display: none; }
.shu-carriage > summary::after {
    content: "";
    float: right;
    width: 9px; height: 9px;
    margin-top: 5px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    transition: transform .16s;
}
.shu-carriage[open] > summary::after { transform: rotate(-135deg); margin-top: 9px; }
.shu-carriage > summary:focus-visible { outline: 2px solid var(--primary-color, #0a7d4b); outline-offset: -2px; }
.shu-carriage-body {
    padding: 0 20px 20px;
    line-height: 1.7;
    color: #4b5563;
    font-size: .95rem;
}

/* ══ Event timeline (.evt) ══════════════════════════════════════════════ */
.evt { padding: 56px 0; }
.evt-title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.015em;
}
.evt-accent { color: var(--primary-color, #0a7d4b); }
.evt-desc { margin: 0 0 26px; max-width: 68ch; line-height: 1.6; color: #4b5563; }
.evt-empty { margin: 0; color: #6b7280; }

.evt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* The spine runs through the DOTS, and the dots sit right beside the text
   they mark. The first version put the spine in one gutter, the times in a
   second column and the content in a third, so a dot floated 80px away from
   the moment it belonged to and the eye had to bridge a dead strip. The time
   is now a kicker above its own title, which is where it reads. */
.evt-list::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 22px;
    width: 2px;
    background: #e0e3e8;
}
.evt-item {
    position: relative;
    padding: 0 0 24px 34px;
}
.evt-item:last-child { padding-bottom: 0; }
.evt-dot {
    position: absolute;
    left: 0; top: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c9cdd4;
}
.evt-item.is-hl .evt-dot {
    border-color: var(--primary-color, #0a7d4b);
    background: var(--primary-color, #0a7d4b);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #0a7d4b) 16%, transparent);
}
.evt-time {
    display: block;
    margin-bottom: 1px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: #9aa1ab;
    font-variant-numeric: tabular-nums;
}
.evt-item.is-hl .evt-time { color: var(--primary-color, #0a7d4b); }
.evt-item-t { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.evt-item-b { margin: 4px 0 0; line-height: 1.6; color: #4b5563; max-width: 60ch; }
/* The moment that carries the argument gets weight, not decoration. */
.evt-item.is-hl .evt-item-t { font-size: 1.16rem; }
.evt-foot { margin: 22px 0 0; font-size: .87rem; color: #6b7280; }

/* ══ Tablet and up ══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .shf, .shu, .evt { padding: 72px 0; }
    .shu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .shu-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .evt-list { max-width: 780px; }
}

/* ══ Dark surfaces ══════════════════════════════════════════════════════
   These sections inherit the site's section background, which the operator
   can set dark (secbg_*). Anything hard-coded light gets a companion here. */
.section-dark .shf-table th,
.section-dark .shf-table td { border-color: rgba(255, 255, 255, .14); }
.section-dark .shf-origin,
.section-dark .shu-step-val { color: #fff; }
.section-dark .shf-desc,
.section-dark .shu-desc,
.section-dark .evt-desc,
.section-dark .shu-card-b,
.section-dark .evt-item-b { color: rgba(255, 255, 255, .78); }
.section-dark .shu-card,
.section-dark .shu-step,
.section-dark .shu-carriage { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.section-dark .shf-table tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* ══ Shuttle schedule (.shsch) - the timetable per pickup point (23 Aug 2026) ═ */
.shsch { padding: 64px 0; }
.shsch-title { margin: 0 0 12px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.shsch-accent { color: var(--primary-color, #0a7d4b); }
.shsch-desc { margin: 0 0 26px; max-width: 68ch; line-height: 1.6; color: #4b5563; }
.shsch-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.shsch-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e8ec; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06); }
.shsch-map { display: block; aspect-ratio: 2 / 1; background: #eef1f4; }
.shsch-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shsch-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; flex: 1 1 auto; }
.shsch-kicker { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--primary-color, #0a7d4b); margin-bottom: 4px; }
.shsch-name { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: #16181d; }
.shsch-addr { margin: 4px 0 0; font-size: .93rem; color: #4b5563; line-height: 1.5; }
.shsch-addr a { color: var(--primary-color, #0a7d4b); text-decoration: underline; white-space: nowrap; }
.shsch-instr { margin: 6px 0 0; font-size: .9rem; color: #6b7280; line-height: 1.5; }
.shsch-legs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.shsch-leg { padding: 14px 16px; background: #f7f9fb; border: 1px solid #e6e8ec; border-radius: 14px; }
.shsch-leg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shsch-leg-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #16181d; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.shsch-price { font-size: 1.15rem; font-weight: 800; color: #16181d; white-space: nowrap; }
.shsch-price small { font-size: .78rem; font-weight: 500; color: #6b7280; }
.shsch-day { margin-top: 10px; font-size: .82rem; font-weight: 600; color: #4b5563; }
.shsch-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shsch-time { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: #fff; border: 1px solid #d9e2e8; border-radius: 10px; font-size: .95rem; font-weight: 700; color: #16181d; font-variant-numeric: tabular-nums; }
.shsch-time small { font-size: .74rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.shsch-none { margin: 8px 0 0; font-size: .9rem; color: #6b7280; }
.shsch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; margin-top: auto; border-radius: 10px; background: var(--primary-color, #0a7d4b); color: #fff; font-weight: 700; text-decoration: none; transition: filter .15s; }
.shsch-btn:hover { filter: brightness(.92); color: #fff; }
.shsch-btn:focus-visible { outline: 2px solid var(--primary-color, #0a7d4b); outline-offset: 2px; }
.shsch-note { margin: 16px 0 0; font-size: .87rem; color: #6b7280; }
.shsch-hub { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 28px; background: #16181d; color: #fff; border-radius: 18px; overflow: hidden; }
.shsch-hub-map { display: block; aspect-ratio: 2 / 1; }
.shsch-hub-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shsch-hub-body { padding: 24px; }
.shsch-hub .shsch-kicker { color: rgba(255,255,255,.7); }
.shsch-hub .shsch-name { color: #fff; }
.shsch-hub .shsch-addr, .shsch-hub .shsch-instr { color: rgba(255,255,255,.8); }
.shsch-hub .shsch-addr a { color: #fff; }
@media (min-width: 768px) {
    .shsch { padding: 80px 0; }
    .shsch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .shsch-legs { grid-template-columns: 1fr 1fr; }
    .shsch-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
    .shsch-hub-map { aspect-ratio: auto; min-height: 220px; }
    .shsch-hub-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1100px) {
    .shsch-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
    .shsch-grid:has(.shsch-card:only-child) { grid-template-columns: minmax(0, 760px); }
}