/* =====================================================================
 *  Article tables: the figures in a body cell render as chips, so a row
 *  such as "49.50 EUR, 4.5 stars, 11,296 reviews" reads at a glance.
 *  Markup from article_table_cell_html() (app/Helpers/article_block_helper.php);
 *  loaded by app/Views/article/detail.php only when the article has a table.
 *  Spec: docs/specs/2026-09-09-article-table-chips.md
 * ===================================================================== */

/* A cell that is nothing but figures: a wrapping row of chips, no commas. */
.iw-tchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* A sentence with figures in it keeps its text; the chips sit inline. */
.iw-tcell { line-height: 1.75; }
.iw-tcell .iw-tchip { margin: 0 1px; vertical-align: baseline; }

.iw-tchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--font-body), serif;
    font-size: 0.86em; font-weight: 600; line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--color-surface-container-low, #f6f3ee);
    color: var(--color-on-surface, #1f1a17);
    box-shadow: inset 0 0 0 1px rgba(86, 19, 113, 0.12);
}
.iw-tchip--price,
.iw-tchip--count {
    background: #f3ecf7;
    color: var(--color-primary, #561371);
    box-shadow: inset 0 0 0 1px rgba(86, 19, 113, 0.22);
}
.iw-tchip--rating {
    background: #fff4d6;
    color: #6f4700;
    box-shadow: inset 0 0 0 1px rgba(160, 110, 0, 0.28);
}
.iw-tchip--rating .iw-tchip-glyph { color: #d99a06; font-size: 0.95em; line-height: 1; }
.iw-tchip--reviews {
    color: var(--color-on-surface-variant, #49454f);
}
.iw-tchip--time {
    background: #e8f2f1;
    color: #1f5c57;
    box-shadow: inset 0 0 0 1px rgba(31, 92, 87, 0.22);
}
.iw-tchip--months {
    background: #eef3e6;
    color: #3f5f1c;
    box-shadow: inset 0 0 0 1px rgba(63, 95, 28, 0.22);
}

/* The word "stars" stays for screen readers; the glyph carries it on screen. */
.iw-tchip-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
    .iw-tchip { white-space: normal; }
}

/* A cell that names a partner tour: the title links out and a "Book via"
   row carries one button per platform (the route page's tour card, laid
   out in a table cell). Markup from article_table_tour_cell_html(). */
.iw-ttour { display: flex; flex-direction: column; gap: 7px; }
.iw-ttour__title {
    font-weight: 600; line-height: 1.4;
    color: var(--color-on-surface, #1f1a17);
    text-decoration: none;
}
.iw-ttour__title:hover { color: var(--color-primary, #561371); text-decoration: underline; }
.iw-ttour__book { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.iw-ttour__via {
    font-family: var(--font-label), serif;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-on-surface-variant, #49454f);
}
.iw-ttour__cta {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid rgba(86, 19, 113, 0.32); border-radius: 999px;
    padding: 3px 10px;
    font-family: var(--font-label), serif; font-size: 11px; font-weight: 700; line-height: 1.5;
    color: var(--color-primary, #561371); text-decoration: none; white-space: nowrap;
    background: var(--color-surface-container-lowest, #fff);
    transition: background 120ms ease, border-color 120ms ease;
}
.iw-ttour__cta:hover { border-color: var(--color-primary, #561371); background: #f3ecf7; }
.iw-ttour__cta:focus-visible { outline: 2px solid var(--color-primary, #561371); outline-offset: 2px; }
.iw-ttour__ext { font-size: 10px; }