/* ═══════════════════════════════════════════════════════════════════════════
   CMS Media List — numbered list with image + text, used for guides,
   references, and step-by-step content (e.g. fabric type guide).

   HTML usage:
     <div class="cms-media-list" role="list">
       <div class="cms-media-list__item" role="listitem">
         <span class="cms-media-list__number" aria-hidden="true">01</span>
         <figure class="cms-media-list__media">
           <img src="…" alt="…" loading="lazy" decoding="async">
         </figure>
         <div class="cms-media-list__content">
           <h3 class="cms-media-list__title">WOOL</h3>
           <p class="cms-media-list__body">
             <strong>The King of Tailoring:</strong>
             Natural fiber from sheep prized for its drape…
           </p>
           <p class="cms-media-list__meta"><strong>Best for:</strong> Suits · Blazers</p>
         </div>
       </div>
     </div>

   Variants:
     .cms-media-list--gold   — gold filled number badge
     .cms-media-list--lg     — wider image column (image-first guides)

   Typography note:
     First <strong> inside .cms-media-list__body is treated as a subtitle
     label (displayed as a block in gold uppercase). The rest of the
     paragraph renders as normal body text on the line below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── List wrapper ─────────────────────────────────────────────────────────── */

.cms-media-list {
    margin: 0;
    padding: 0;
}

/* ── Row — mobile first (3-col compact) ───────────────────────────────────── */

.cms-media-list__item {
    display: grid;
    grid-template-columns: 44px 96px 1fr;
    grid-template-areas: "num img cont";
    column-gap: var(--space-4);
    row-gap: 0;
    align-items: start;
    padding-block: var(--space-8);
    border-top: 1px solid var(--border-light);
}

.cms-media-list__item:last-child {
    border-bottom: 1px solid var(--border-light);
}

/* ── Number badge — outline style for refined look ────────────────────────── */

.cms-media-list__number {
    grid-area: num;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-medium);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 300;
    letter-spacing: 0;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

.cms-media-list--gold .cms-media-list__number {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--bg-primary);
}

/* ── Image ────────────────────────────────────────────────────────────────── */

.cms-media-list__media {
    grid-area: img;
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cms-media-list__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}

@media (hover: hover) {
    .cms-media-list__item:hover .cms-media-list__media img {
        transform: scale(1.05);
    }
}

/* ── Content column ───────────────────────────────────────────────────────── */

.cms-media-list__content {
    grid-area: cont;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */

.cms-media-list__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 var(--space-1);
}

/* ── Inline tagline — first <strong> in body rendered as a labelled subtitle */

.cms-media-list__body > strong:first-child {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: var(--space-2);
}

/* ── Body text ────────────────────────────────────────────────────────────── */

.cms-media-list__body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Meta / "Best for" row ────────────────────────────────────────────────── */

.cms-media-list__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    margin: var(--space-1) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.cms-media-list__meta strong {
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* ── Tablet ≥ 640px ───────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .cms-media-list__item {
        grid-template-columns: 48px 160px 1fr;
        column-gap: var(--space-8);
        padding-block: var(--space-10);
    }

    .cms-media-list__number {
        width: 48px;
        height: 48px;
    }

    .cms-media-list__content {
        gap: var(--space-3);
    }

    .cms-media-list__title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-2);
    }

    .cms-media-list__body {
        font-size: var(--text-sm);
    }
}

/* ── Desktop ≥ 1024px — single column, larger image ──────────────────────── */

@media (min-width: 1024px) {
    .cms-media-list__item {
        grid-template-columns: 52px 220px 1fr;
        column-gap: var(--space-10);
        padding-block: var(--space-12);
    }

    .cms-media-list__number {
        width: 52px;
        height: 52px;
    }

    .cms-media-list__title {
        font-size: var(--text-2xl);
        letter-spacing: 0.04em;
    }

    .cms-media-list__body {
        font-size: var(--text-base);
        line-height: 1.75;
    }

    .cms-media-list__content {
        gap: var(--space-3);
        max-width: 680px;
    }
}

/* ── Wide ≥ 1200px — 2 cards per row ─────────────────────────────────────── */

@media (min-width: 1200px) {
    .cms-media-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-12);
    }

    /* Item internals scale down to fit the narrower column (~544px each) */
    .cms-media-list__item {
        grid-template-columns: 52px 160px 1fr;
        column-gap: var(--space-6);
        padding-block: var(--space-10);
    }

    .cms-media-list__title { font-size: var(--text-xl); }
    .cms-media-list__body  { font-size: var(--text-sm); line-height: 1.7; }
    .cms-media-list__content { max-width: none; }

    /* Close the bottom border on both items in the last row.
       Works correctly for even-count lists (e.g. 10 items, 5 rows). */
    .cms-media-list__item:last-child { border-bottom: none; }
    .cms-media-list__item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border-light);
    }
}

/* ── Large variant ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .cms-media-list--lg .cms-media-list__item {
        grid-template-columns: 48px 220px 1fr;
    }
}

@media (min-width: 1024px) {
    .cms-media-list--lg .cms-media-list__item {
        grid-template-columns: 52px 300px 1fr;
    }
}

@media (min-width: 1200px) {
    .cms-media-list--lg .cms-media-list__item {
        grid-template-columns: 52px 180px 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Editorial variant — content-matched image, alternating layout on wide
   screens. Usage:  class="cms-media-list cms-media-list--editorial"
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile-first: number + image stacked, content below ────────────────── */

.cms-media-list--editorial .cms-media-list__item {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "num img"
        ".   cont";
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    padding-block: var(--space-8);
    align-items: start;
}

/* Number: keep original circle style exactly — no override needed on mobile */

.cms-media-list--editorial .cms-media-list__number {
    grid-area: num;
    position: static;
}

/* Mobile image — spans the full right column, 3:2 landscape */

.cms-media-list--editorial .cms-media-list__media {
    grid-area: img;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cms-media-list--editorial .cms-media-list__media img {
    aspect-ratio: auto;
    height: 100%;
}

/* Content spans below the image (second row, right column) */

.cms-media-list--editorial .cms-media-list__content {
    grid-area: cont;
    gap: var(--space-3);
}

.cms-media-list--editorial .cms-media-list__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    transition: color var(--duration-base) var(--ease);
}

/* Meta: structured definition list ──────────────────────────────────────── */

.cms-media-list__meta-dl {
    margin: var(--space-2) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cms-media-list__meta-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--space-3);
    font-size: var(--text-xs);
    align-items: baseline;
}

.cms-media-list__meta-row dt {
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cms-media-list__meta-row dd {
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Hover ─────────────────────────────────────────────────────────────────── */

@media (hover: hover) {
    .cms-media-list--editorial .cms-media-list__item:hover .cms-media-list__media img {
        transform: scale(1.04);
    }
    .cms-media-list--editorial .cms-media-list__item:hover .cms-media-list__title {
        color: var(--accent-gold);
    }
}

/* ── Tablet ≥ 640px: 3-col [circle | image | content] ───────────────────── */

@media (min-width: 640px) {
    .cms-media-list--editorial .cms-media-list__item {
        grid-template-columns: 48px 220px 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "num img cont";
        column-gap: var(--space-6);
        row-gap: 0;
        padding-block: var(--space-10);
        align-items: center;
    }

    /* Circle badge: restore base look exactly */
    .cms-media-list--editorial .cms-media-list__number {
        width: 48px;
        height: 48px;
        align-self: start;
        margin-top: var(--space-1);
    }

    /* Image: square, height driven by its column width */
    .cms-media-list--editorial .cms-media-list__media {
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: unset;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .cms-media-list--editorial .cms-media-list__media img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .cms-media-list--editorial .cms-media-list__content {
        align-self: center;
        gap: var(--space-3);
    }

    .cms-media-list--editorial .cms-media-list__title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-2);
    }

    .cms-media-list__meta-row {
        grid-template-columns: 100px 1fr;
    }
}

/* ── Desktop ≥ 1024px ─────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .cms-media-list--editorial .cms-media-list__item {
        grid-template-columns: 52px 280px 1fr;
        column-gap: var(--space-8);
        padding-block: var(--space-12);
    }

    .cms-media-list--editorial .cms-media-list__number {
        width: 52px;
        height: 52px;
    }

    .cms-media-list--editorial .cms-media-list__title {
        font-size: var(--text-2xl);
        letter-spacing: 0.04em;
    }

    .cms-media-list--editorial .cms-media-list__body {
        font-size: var(--text-base);
        line-height: 1.8;
    }

    .cms-media-list--editorial .cms-media-list__content {
        max-width: none;
        gap: var(--space-4);
    }

    .cms-media-list__meta-dl {
        gap: var(--space-3);
    }

    .cms-media-list__meta-row {
        grid-template-columns: 110px 1fr;
    }
}

/* ── Wide ≥ 1200px: override 2-col grid wrapper, stay 3-col ─────────────── */

@media (min-width: 1200px) {
    .cms-media-list--editorial {
        display: block;
    }

    .cms-media-list--editorial .cms-media-list__item {
        grid-template-columns: 52px 320px 1fr;
    }

    /* Single-column border: only last item has bottom border */
    .cms-media-list--editorial .cms-media-list__item:nth-last-child(2) {
        border-bottom: none;
    }

    .cms-media-list--editorial .cms-media-list__item:last-child {
        border-bottom: 1px solid var(--border-light);
    }
}