/* ============================================================
   CruiseClarify — shared mobile stylesheet
   One place for phone-size refinements across all pages.
   Distributed to every page via the masthead region
   (scripts/build-header.py stamps the <link>), and loaded
   after each page's inline styles so rules here win ties.
   Scope: phones only — nothing here applies above 767px wide.
   ============================================================ */

/* ---------- 1. Article pages (main.article-wrap) ---------- */
@media (max-width: 600px) {

    /* Quick-answer block: tighter frame, same words */
    .article-wrap .quick-answer {
        padding: 1rem 1.05rem;
        margin-bottom: 1rem;
    }
    .article-wrap .quick-answer p {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 0.6rem;
    }
    .article-wrap .quick-answer .qa-title { margin-bottom: 0.45rem; }

    /* Table of contents: vertical list -> one swipeable chip row */
    .toc { padding: 0.6rem 0.75rem; }
    .toc ul {
        display: flex;
        grid-template-columns: none;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }
    .toc ul::-webkit-scrollbar { display: none; }
    .toc li, .toc ul li, nav.toc ul li {
        flex: 0 0 auto;
        margin: 0;
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
        list-style: none;
        border-radius: 0;
    }
    .toc a {
        display: inline-block;
        padding: 0.38rem 0.75rem;
        border: 1px solid var(--border, #ddd);
        border-radius: 999px;
        background: var(--card, #fff);
        font-size: 0.82rem;
        white-space: nowrap;
        text-decoration: none;
    }

    /* Article data tables: never push the page sideways — scroll in their box */
    .article-wrap table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
    .article-wrap table th,
    .article-wrap table td {
        padding: 0.45rem 0.55rem;
    }

    /* Stacked table cards: tables tagged t-stack render each row as a card —
       title on top, labelled value lines below it, long text at full width.
       Desktop keeps the normal grid; the tags are added by the one-time
       labelling pass (data-label = column header). */
    .article-wrap table.t-stack { display: block; overflow-x: visible; border: none; }
    .article-wrap table.t-stack thead,
    .article-wrap table.t-stack tr.t-head { display: none; }
    .article-wrap table.t-stack tbody { display: block; }
    .article-wrap table.t-stack caption { display: block; text-align: left; margin-bottom: 0.5rem; }
    .article-wrap table.t-stack tr {
        display: block;
        border: 1px solid var(--border, #ddd);
        border-radius: 10px;
        background: var(--card, #fff);
        padding: 0.6rem 0.85rem 0.55rem;
        margin-bottom: 0.55rem;
    }
    .article-wrap table.t-stack td,
    .article-wrap table.t-stack tbody th {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        border: none;
        padding: 0.14rem 0;
        font-size: 0.9rem;
        line-height: 1.5;
        text-align: left;
        white-space: normal;
    }
    .article-wrap table.t-stack tr td,
    .article-wrap table.t-stack tr:nth-child(even) td { background: transparent; }
    .article-wrap table.t-stack td:first-child:not([data-label]),
    .article-wrap table.t-stack tbody th {
        font-weight: 600;
        font-size: 0.98rem;
        padding-bottom: 0.3rem;
    }
    .article-wrap table.t-stack td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted, #6b7280);
    }

    /* Vertical rhythm: same content, less dead air */
    .article-wrap h2 { margin-top: 1.9rem; margin-bottom: 0.7rem; }
    .article-wrap h3 { margin-top: 1.3rem; margin-bottom: 0.5rem; }
    .article-wrap p { margin-bottom: 0.85rem; }
    .faq-item { padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; }
}

/* ---------- 2. Tool-page title bands + onboard cost reference ---------- */
@media (max-width: 767px) {

    /* Title band: smaller stage, faster to the numbers */
    .site-header h1 { font-size: 1.7rem; line-height: 1.15; margin-bottom: 0.5rem; }
    .site-header p { font-size: 0.92rem; line-height: 1.5; }

    /* "How to read it" guide card: tighter typography */
    .table-guide { padding: 0.85rem 0.95rem; }
    .table-guide li { font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.4rem; }

    /* Line cards: one compact row per cruise line (was ~200px, now ~80px) */
    .ocr-line-card {
        padding: 0.55rem 0.8rem 0.4rem;
        margin-bottom: 0.45rem;
    }
    .ocr-line-card-top { gap: 0.45rem; align-items: center; }
    .ocr-compare-label { min-height: 36px; min-width: 38px; margin: 0 0 0 -0.2rem; }

    /* Name left, price right, on the same line */
    .ocr-line-card-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.6rem;
        row-gap: 0.1rem;
    }
    .ocr-line-card-name { font-size: 0.95rem; flex: 1 1 auto; min-width: 0; }
    .ocr-line-card-name .badge { font-size: 0.62rem; margin-top: 0; }
    .ocr-line-card-total { margin-top: 0; }
    .ocr-line-card-total .total { font-size: 1.08rem; }
    .ocr-line-card-total .total-cap,
    .ocr-line-card-total .total-note { font-size: 0.75rem; }

    /* Bottom row: two clearly different actions on one line.
       Left: "View details ▾" — plain text toggle, normal weight.
       Right: "Open calculator →" — a bordered pill button, so shape and
       weight (not colour) say "this one leaves the page". */
    .ocr-line-details { margin-top: 0.15rem; padding-top: 0; border-top: none; }
    .ocr-line-details > summary { min-height: 38px; font-size: 0.82rem; gap: 0.75rem; }
    .ocr-line-details > summary .ocr-details-show,
    .ocr-line-details > summary .ocr-details-hide { font-weight: 500; }
    .ocr-line-details > summary .ocr-card-calc {
        margin: 0 0 0 auto;
        padding: 0.3rem 0.8rem;
        border: 1.5px solid var(--accent-mid, #9dbfae);
        border-radius: 999px;
        background: var(--card, #fff);
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
    }
    /* Keep the ▾ caret with "View details", not after the Calculate link */
    .ocr-line-details > summary::after { content: none; }
    .ocr-line-details > summary .ocr-details-show::after { content: "\25BE"; font-size: 0.7rem; margin-left: 0.35rem; }
    .ocr-line-details[open] > summary .ocr-details-hide::after { content: "\25B4"; font-size: 0.7rem; margin-left: 0.35rem; }

    /* Section bands: less air around group labels */
    .ocr-mobile-band { margin: 0.8rem 0 0.35rem; }
    .ocr-mobile-band.ocr-mobile-section { margin-top: 1.1rem; }

    /* Side-by-side comparison (up to 3 lines): freeze the category column
       while the table scrolls sideways — same behaviour as the full table's
       cruise-line column. Opaque backgrounds so rows slide underneath cleanly. */
    /* Side padding must live inside the cells, not the scroll container —
       otherwise scrolled-out columns peek through the padding gutter
       to the left of the pinned category column. */
    .compare-modal-inner { padding: 16px 0; }
    .compare-modal-title { margin-left: 16px; }
    .compare-close { margin-right: 16px; }
    .compare-table th:first-child,
    .compare-table td:first-child { padding-left: 16px; }
    /* Let long category labels wrap so the frozen column stays narrow and
       the line columns keep most of the screen */
    .compare-table th:first-child,
    .compare-table td:first-child {
        white-space: normal;
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }
    .compare-table th:first-child,
    .compare-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 0 rgba(11, 29, 45, 0.08);
    }
    .compare-table th:first-child { background: var(--paper, #f3f1ec); z-index: 3; }
    .compare-table tr:nth-child(even) td:first-child { background: #faf9f7; }
}