/* ═══════════════════════════════════════════════════════════════════════════
   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;
    }
}