/*
 * Compare page — server-rendered comparison table.
 *
 * WHY A MODULE STYLESHEET AND NOT TAILWIND UTILITIES. The Gait theme's Tailwind
 * v4 bundle is JIT: a class that appears in a NEW template is not in
 * web/css/styles.css until someone re-runs the theme build. Shipping this block
 * as utilities would mean either an unstyled table or a theme rebuild every time
 * this page changes. It consumes the theme's design tokens (the same @theme
 * custom properties the utilities compile from), so it stays on the design
 * system without owning any colour or size values of its own.
 *
 * Loaded only on the gait_compare_page handle (see layout/gait_compare_page.xml).
 *
 * RTL: logical properties throughout (inset-inline-start, padding-inline,
 * border-inline), so /g_kw_ar/ needs no separate rules — the sticky model column
 * pins to the right and the table scrolls the other way automatically.
 */

/* The page <h1>. It used to carry `text-title-l`, which the theme bundle never
   compiled (no other template uses it), so the main heading rendered at body
   size. Same token, applied directly. */
.gait-compare-page__title {
    font-size: var(--text-title-l);
    line-height: var(--text-title-l--line-height);
}

.gait-compare-models {
    padding-block: 2.5rem 1rem;
}

.gait-compare-models__title {
    font-size: var(--text-title-m);
    line-height: var(--text-title-m--line-height);
    color: var(--color-fg);
}

.gait-compare-models__summary {
    margin-block-start: 0.5rem;
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    color: var(--color-fg-secondary);
    max-width: 70ch;
}

/* The table is wider than a phone by design; it scrolls inside its own box so
   the page body never scrolls sideways. tabindex makes it keyboard-scrollable.
 *
 * ⚠ `contain: paint` IS LOAD-BEARING, NOT AN OPTIMISATION — it is what keeps
 * the RTL page from scrolling sideways. In RTL an overflow-x scroller lays its
 * overflowing content out at NEGATIVE x, and Chrome leaks that inline-start
 * overflow into the ancestors' scrollable area: measured on /g_kw_ar/ with the
 * 10-model iPhone table, documentElement.scrollWidth was 2438px against a
 * 1280px viewport, so the whole page (header included) scrolled off screen.
 * `overflow-x: clip` on the page wrapper does NOT stop it; paint containment
 * does, taking scrollWidth back to 1280. Sticky row headers keep working
 * because they stick to this scroller, which is inside the containment.
 * LTR is unaffected either way. */
.gait-compare-models__scroll {
    margin-block-start: 1.5rem;
    max-inline-size: 100%;
    overflow-x: auto;
    contain: paint;
    -webkit-overflow-scrolling: touch;
}

.gait-compare-models__scroll:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* No `min-inline-size: max-content` here on purpose. It pins every column to
   its longest string, so a full Mac line-up (20 models, chip strings like
   "Apple M4 Pro (12-core CPU, 16-core GPU)") produced a 9,432px table that
   never wrapped. Bounded columns below let long values wrap instead, and the
   table still grows past the scroller when there are many models. */
.gait-compare-models__table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-body-s);
    line-height: var(--text-body-s--line-height);
    color: var(--color-fg-secondary);
}

.gait-compare-models__caption {
    caption-side: top;
    text-align: start;
    padding-block-end: 0.75rem;
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
    color: var(--color-fg-tertiary);
}

.gait-compare-models__table th,
.gait-compare-models__table td {
    text-align: start;
    vertical-align: top;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--color-border-light);
}

/* Row headings stay visible while the model columns scroll past. */
.gait-compare-models__rowhead {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border-inline-end: 1px solid var(--color-border-light);
}

/* Bounded model columns: wide enough to read, narrow enough that 20 of them
   are a scroll rather than a marathon. */
.gait-compare-models__model,
.gait-compare-models__cell {
    min-inline-size: 9rem;
    max-inline-size: 13rem;
}

.gait-compare-models__model {
    color: var(--color-fg);
    font-weight: var(--font-weight-medium);
    border-block-end: 1px solid var(--color-border-dark);
}

.gait-compare-models__img {
    display: block;
    inline-size: auto;
    block-size: 4.5rem;
    max-inline-size: 100%;
    object-fit: contain;
    object-position: left top;
    margin-block-end: 0.5rem;
}

[dir="rtl"] .gait-compare-models__img {
    object-position: right top;
}

.gait-compare-models__name {
    font-size: var(--text-title-s);
    line-height: var(--text-title-s--line-height);
    color: var(--color-fg);
}

a.gait-compare-models__name:hover,
a.gait-compare-models__name:focus-visible {
    color: var(--color-action);
    text-decoration: underline;
}

.gait-compare-models__cell--price {
    color: var(--color-fg);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.gait-compare-models__range {
    display: block;
    font-weight: var(--font-weight-normal);
    color: var(--color-fg-tertiary);
    font-size: var(--text-caption);
}

/* Stock reads as coloured TEXT, not a filled pill — --color-badge-in-stock is
   a foreground token in this theme (.pdp-hero-badge.is-in-stock sets `color`
   with it), so filling a chip with it and printing white on top would be off
   the design system and low-contrast. */
.gait-compare-models__stock {
    display: inline-block;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.gait-compare-models__stock.is-in {
    color: var(--color-badge-in-stock);
}

.gait-compare-models__stock.is-out {
    color: var(--color-fg-tertiary);
}

.gait-compare-models__cta {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-cta);
    background-color: var(--color-action);
    color: var(--color-bg);
    white-space: nowrap;
}

.gait-compare-models__cta:hover,
.gait-compare-models__cta:focus-visible {
    background-color: var(--color-action-hover);
    color: var(--color-bg);
}

.gait-compare-models__notes {
    display: grid;
    gap: 1.5rem 2.5rem;
    margin-block-start: 2rem;
}

@media (min-width: 768px) {
    .gait-compare-models__notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gait-compare-models__subtitle {
    font-size: var(--text-title-s);
    line-height: var(--text-title-s--line-height);
    color: var(--color-fg);
    margin-block-end: 0.5rem;
}

.gait-compare-models__note p,
.gait-compare-models__list {
    font-size: var(--text-body-s);
    line-height: var(--text-body-s--line-height);
    color: var(--color-fg-secondary);
}

.gait-compare-models__list li {
    position: relative;
    padding-inline-start: 1rem;
    margin-block-end: 0.375rem;
}

.gait-compare-models__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-fg-tertiary);
}

/* ------------------------------------------------------------------ iframe */

.gait-compare-embed {
    padding-block-start: 2.5rem;
}

.gait-compare-embed__title {
    font-size: var(--text-title-m);
    line-height: var(--text-title-m--line-height);
    color: var(--color-fg);
}

.gait-compare-embed__note {
    margin-block-start: 0.5rem;
    font-size: var(--text-body-s);
    line-height: var(--text-body-s--line-height);
    color: var(--color-fg-tertiary);
    max-width: 70ch;
}

/* Starting height only — compare-frame.js grows it to the posted content
   height. Kept here because the theme bundle carries no min-h-screen utility. */
.gait-compare-page__frame {
    min-block-size: 60vh;
}