/**
 * TUF Shop By Category — front-end styles
 * Restyled to match the Ultimate Finish ".uf-clean" design system
 * (off-white canvas, lifted white cards, Futura/Ultimate Finish type,
 *  skewed red slash accents, pill buttons).
 *
 * All rules stay scoped under .tuf-sbc — no selectors, class names or
 * structure have changed, so plugin markup/JS keeps working as-is.
 * Requires uf-base.css to be loaded for the two brand webfonts; if it
 * isn't, the fallback stacks below keep everything readable.
 */

.tuf-sbc {
    /* --- legacy tokens kept so any inline/PHP styles still resolve --- */
    --red: #DC0000;
    --dark: #1d1d1f;
    --mid: #6e6e73;
    --light-bg: #F4F4F2;
    --border: #e4e4e1;
    --white: #ffffff;

    /* --- uf-clean design system tokens --- */
    --bg: #F4F4F2;
    --card: #ffffff;
    --ink: #1d1d1f;
    --grey: #6e6e73;
    --line: #e4e4e1;
    --radius: 18px;
    --radius-lg: 24px;
    --shadow: 0 18px 40px -16px rgba(18, 18, 28, .18), 0 6px 16px -8px rgba(18, 18, 28, .08);
    --shadow-sm: 0 10px 26px -12px rgba(18, 18, 28, .16), 0 3px 8px -5px rgba(18, 18, 28, .08);

    /* Content cap on wide desktops — background stays full-bleed.
       Matches .wrap.uf-wide in ufbase.css. Lower this one number to
       bring the grid in further; nothing below the cap is affected. */
    --uf-max: 1520px;

    --display: 'Ultimate Finish', 'Arial Narrow', sans-serif;
    --body: 'Futura Std', -apple-system, BlinkMacSystemFont, 'Century Gothic', 'Segoe UI', sans-serif;
}

.tuf-sbc * {
    box-sizing: border-box;
}

.tuf-sbc.cat-section {
    /* Matches the uf-clean canvas. Swap to `transparent` if the section
       sits on a band that already provides its own background. */
    background: var(--bg);
    /* Full-bleed background, content capped at --uf-max and centred.
       max() keeps the clamp gutters on small screens and grows them once
       the viewport passes the cap — no wrapper element needed. */
    padding-block: 20px 24px;
    padding-inline: max(clamp(14px, 4vw, 40px), calc((100% - var(--uf-max)) / 2));
    font-family: var(--body);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ── SECTION HEADER ───────────────────────────── */
.tuf-sbc .section-header {
    margin-bottom: 36px;
}

/* Eyebrow with the skewed red slash */
.tuf-sbc .eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: var(--body);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--grey);
    margin-bottom: 18px;
}

.tuf-sbc .eyebrow::before {
    content: "";
    width: 6px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--red);
    transform: skewX(-20deg);
}

.tuf-sbc .section-header h2 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: .005em;
    line-height: 1.04;
}

.tuf-sbc .section-header p {
    font-size: 1rem;
    color: var(--grey);
    margin: 0 0 18px;
    line-height: 1.7;
    max-width: 62ch;
}

/* Accent line now reads as the brand slash rather than a flat bar */
.tuf-sbc .accent-line {
    width: 44px;
    height: 4px;
    background: var(--red);
    transform: skewX(-20deg);
    border-radius: 1px;
}

/* ── GRIDS ────────────────────────────────────── */
/* Slightly wider gaps so the card shadows have room to breathe */
.tuf-sbc .cat-grid-top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.tuf-sbc .cat-grid-bottom {
    display: grid;
    grid-template-columns: repeat(var(--tuf-sbc-bottom-cols, 8), 1fr);
    gap: 14px;
    margin-bottom: 40px;
}

/* ── SHARED TILE — lifted white card ──────────── */
.tuf-sbc .cat-tile {
    background: var(--card);
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    display: block;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tuf-sbc .cat-tile:hover,
.tuf-sbc .cat-tile:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(220, 0, 0, .28);
    text-decoration: none;
}

.tuf-sbc .cat-tile:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/* Top tile is a div (not <a>) because subcategory pills are their own links */
.tuf-sbc .cat-tile--top {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
}

.tuf-sbc .cat-tile__media {
    display: block;
    text-decoration: none;
}

/* ── IMAGES ───────────────────────────────────── */
/* Boxes track the native 792x320 artwork ratio, so images fill the tile
   edge to edge at every width with no cropping. */
.tuf-sbc .cat-img {
    width: 100%;
    aspect-ratio: 792 / 320;
    height: auto;
    overflow: hidden;
    display: block;
    background: var(--bg);
}

.tuf-sbc .cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
}

.tuf-sbc .cat-tile:hover .cat-img img {
    transform: scale(1.05);
}

.tuf-sbc .cat-grid-bottom .cat-img {
    aspect-ratio: 792 / 320;
}

/* ── BODY ─────────────────────────────────────── */
.tuf-sbc .cat-body {
    padding: 18px 20px 20px;
}

.tuf-sbc .cat-grid-bottom .cat-body {
    padding: 12px 13px 14px;
}

/* ── CATEGORY NAME (works as both a div and an <a>) ── */
.tuf-sbc .cat-name {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--display);
    font-size: 1.24rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.14;
    letter-spacing: .005em;
    text-decoration: none;
    border-bottom: none;
    transition: color .2s ease;
}

/* Slash is pinned to the cap-height of the first line so it sits at the
   same level whether the title runs to one line or three. */
.tuf-sbc .cat-name::before {
    content: "";
    width: 5px;
    height: .78em;
    margin-top: .2em;
    flex: 0 0 auto;
    background: var(--red);
    transform: skewX(-14deg);
    border-radius: 1px;
}

.tuf-sbc a.cat-name:hover,
.tuf-sbc a.cat-name:focus,
.tuf-sbc .cat-tile:hover .cat-name {
    color: var(--red);
    text-decoration: none;
}

.tuf-sbc .cat-grid-bottom .cat-name {
    font-size: .68rem;
    gap: 7px;
    margin-bottom: 0;
    line-height: 1.16;
}

.tuf-sbc .cat-grid-bottom .cat-name::before {
    width: 4px;
    margin-top: .19em;
}

/* ── DESCRIPTION ──────────────────────────────── */
.tuf-sbc .cat-desc {
    font-size: .9rem;
    color: var(--grey);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Bottom-row tiles are name + image only — descriptions stay hidden.
   To bring them back, swap `display: none` for `display: block` here
   (and in the 900px block below). */
.tuf-sbc .cat-grid-bottom .cat-desc {
    display: none;
    font-size: .78rem;
    line-height: 1.5;
    margin-top: 5px;
    margin-bottom: 0;
}

/* ── SUBCATEGORY PILLS ────────────────────────── */
.tuf-sbc .cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tuf-sbc .cat-tag {
    font-family: var(--body);
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--grey);
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tuf-sbc a.cat-tag:hover,
.tuf-sbc a.cat-tag:focus {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    text-decoration: none;
}

.tuf-sbc a.cat-tag:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* ── BROWSE ALL — uf-clean ghost pill button ──── */
.tuf-sbc .browse-all-wrap {
    text-align: center;
}

.tuf-sbc .btn-browse {
    display: inline-block;
    font-family: var(--body);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: #d51f1f;
    border: 1px solid #d51f1f;
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
    padding: 17px 44px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.tuf-sbc .btn-browse:hover,
.tuf-sbc .btn-browse:focus {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.tuf-sbc .btn-browse:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
}

/* ── EDITOR NOTICE ────────────────────────────── */
.tuf-sbc-notice {
    padding: 14px 18px;
    background: #FAEEDA;
    border-left: 3px solid #EF9F27;
    border-radius: 0 10px 10px 0;
    color: #854F0B;
    font-family: var(--body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 13px;
    line-height: 1.5;
}

/* ── REDUCED MOTION ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tuf-sbc .cat-tile,
    .tuf-sbc .cat-img img,
    .tuf-sbc .btn-browse {
        transition: none;
    }

    .tuf-sbc .cat-tile:hover,
    .tuf-sbc .btn-browse:hover {
        transform: none;
    }

    .tuf-sbc .cat-tile:hover .cat-img img {
        transform: none;
    }
}

/* ── TABLET (1100px and below) ────────────────── */
/* Bottom row drops to 4 columns so tiles don't get too cramped */
@media (max-width: 1100px) {
    .tuf-sbc .cat-grid-bottom {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── MOBILE / SMALL TABLET (900px and below) ──── */
@media (max-width: 900px) {
    .tuf-sbc.cat-section {
        padding-block: 18px 22px;
    }

    .tuf-sbc .cat-grid-top {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* All bottom tiles remain visible — 3 columns on small tablet */
    .tuf-sbc .cat-grid-bottom {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 32px;
    }

    .tuf-sbc .cat-grid-bottom .cat-desc {
        display: none;
        font-size: .74rem;
        margin-top: 4px;
        margin-bottom: 0;
    }

    .tuf-sbc .cat-grid-bottom .cat-body {
        padding: 12px 13px 14px;
    }

    .tuf-sbc .cat-grid-bottom .cat-name {
        margin-bottom: 4px;
    }

    .tuf-sbc .cat-grid-top .cat-name {
        font-size: 1.14rem;
    }

    /* Trim subcategory pills to first 3 on tighter screens to avoid wrap weirdness */
    .tuf-sbc .cat-grid-top .cat-tag:nth-child(n+4) {
        display: none;
    }
}

/* ── SMALL MOBILE (600px and below) ──────────── */
@media (max-width: 600px) {
    .tuf-sbc .cat-grid-bottom {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── EXTRA SMALL (420px and below) ───────────── */
@media (max-width: 420px) {
    .tuf-sbc.cat-section {
        padding-block: 16px 20px;
        padding-inline: clamp(12px, 3.5vw, 16px);
    }

    .tuf-sbc .cat-grid-top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tuf-sbc .cat-grid-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tuf-sbc .section-header h2 {
        font-size: 1.75rem;
    }

    .tuf-sbc .btn-browse {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 16px 24px;
    }
}