/* =========================================================================
   L'Atelier de MIA — Sizing (Phase 3)

   Quiet measurement tables. No Roman numerals, no decorative surfaces.
   Hairline rules between rows; 11px muted label-caps in the header.
   Tokens only — no raw hex.
   ========================================================================= */

/* -------------------------- TABLE ---------------------------------- */

.sizing-table {
    width: 100%;
    margin: 0 0 var(--space-7);
    border-collapse: collapse;
    text-align: left;
    font-family: var(--type-body-editorial-font);
    font-size: var(--type-body-editorial-size);
    color: var(--fg);
}

.sizing-table thead th {
    padding: 0 var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--hairline);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
    text-align: left;
}

.sizing-table thead th:first-child {
    padding-left: 0;
}

.sizing-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--hairline);
    vertical-align: baseline;
}

.sizing-table tbody td:first-child {
    padding-left: 0;
    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    color: var(--fg);
}

.sizing-table tbody tr:last-child td {
    border-bottom: 0;
}

/* -------------------------- MOBILE SHIFT --------------------------- */
/* Small screens — quieter padding, slightly smaller type. */

@media (max-width: 700px) {
    .sizing-table {
        font-size: 17px;
    }
    .sizing-table thead th,
    .sizing-table tbody td {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    .sizing-table thead th:first-child,
    .sizing-table tbody td:first-child {
        padding-left: 0;
    }
    .sizing-table tbody td:first-child {
        font-size: 20px;
    }
}

/* -------------------------- HOW TO MEASURE ------------------------- */
/* Three quiet tiles — no decorative numbering, no ornaments. */

.sizing-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin: 0;
}

@media (min-width: 700px) {
    .sizing-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sizing-step {
    margin: 0;
}

.sizing-step__label {
    display: block;
    margin-bottom: var(--space-3);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

.sizing-step__title {
    margin: 0 0 var(--space-3);

    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    line-height: 1.25;
    color: var(--fg);
}

.sizing-step__title em {
    font-style: italic;
}

.sizing-step__body {
    margin: 0;

    font-family: var(--type-body-editorial-font);
    font-size: var(--type-body-editorial-size);
    font-weight: var(--type-body-editorial-weight);
    line-height: 1.55;
    color: var(--fg);
}

/* -------------------------- COUTURE NOTE --------------------------- */
/* Sits below the two tables and the three steps — a single paragraph
   with a hairline border at the top. */

.sizing-couture {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline);
}