/* ============================================================
   Soofos — Blog archive styles
   Matches Blog.dc.html (2026-07-20 design pass).
   All values reference CSS custom properties from tokens.css
   (canonical brand) and assets/css/tokens.css (legacy alias
   bridge). No raw hex / px / em values.
   Class prefix: sf-blog-*
   ============================================================ */

/* ---------- visually hidden helper (used for form labels) ---------- */
.sf-blog-visually-hidden,
.sf-visually-hidden {
    position: absolute;
    width: .0625rem;   /* 1px visually-hidden recipe, expressed in rem */
    height: .0625rem;
    padding: 0;
    margin: -.0625rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Archive / category shared layout shell ---------- */
.sf-blog-wrap {
    max-width: calc(var(--soofos-space-3xl) * 25); /* 1200 */
    margin: 0 auto;
    padding: var(--soofos-space-2xl) var(--soofos-space-2xl) 0;
    font-family: var(--font);
    color: var(--body);
    background: var(--page);
}

/* ---------- Header row (H1 + sub on left, search pill on right) ---------- */
.sf-blog-header {
    display: flex;
    align-items: flex-end;
    gap: var(--soofos-space-2xl);
    flex-wrap: wrap;
    margin: 0 0 var(--soofos-space-xl);
}
.sf-blog-header__lead { flex: 1; min-width: 20rem; }
.sf-blog-header__title {
    font-size: 2.25rem;   /* 36px H1 */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    letter-spacing: -.0375rem;  /* -.6px */
    line-height: 1.15;
    margin: 0;
}
.sf-blog-header__sub {
    font-size: .90625rem;  /* 14.5px */
    color: var(--muted);
    margin-top: var(--soofos-space-sm);
    line-height: 1.5;
}
.sf-blog-search {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-btn);
    padding: .6875rem 1rem;  /* 11px 16px */
    min-width: 17.5rem;       /* 280px */
    color: var(--muted-2);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sf-blog-search:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}
.sf-blog-search__icon { flex: none; color: var(--muted-2); }
.sf-blog-search__placeholder {
    font-size: var(--soofos-player-text-md);
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-semibold);
}

/* ---------- Topic chips row (reuses partial — chip styles below) ---------- */
.sf-blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--soofos-space-sm);
    margin-bottom: var(--soofos-space-2xl);
}
.sf-blog-chip {
    padding: var(--soofos-space-sm) 1rem;
    border: medium solid var(--input-border);
    background: var(--white);
    border-radius: var(--r-btn);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-bold);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sf-blog-chip:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}
.sf-blog-chip--active {
    border-color: var(--blue);
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
}

/* ---------- Featured article (page 1 only) ---------- */
.sf-blog-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    overflow: hidden;
    margin-bottom: var(--soofos-space-2xl);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .12s;
}
.sf-blog-featured:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-.125rem);
}
.sf-blog-featured__img-wrap {
    min-height: 18.75rem;     /* 300px */
    overflow: hidden;
    background: var(--blue-fill);
}
.sf-blog-featured__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-blog-featured__body {
    padding: var(--soofos-space-2xl) calc(var(--soofos-space-2xl) + var(--soofos-space-xs));
    display: flex;
    flex-direction: column;
}
.sf-blog-featured__badges {
    display: flex;
    gap: var(--soofos-space-sm);
    align-items: center;
}
.sf-blog-featured__label {
    font-size: var(--soofos-player-text-xs);
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-extrabold);
    letter-spacing: .04rem;
}
.sf-blog-featured__title {
    font-size: 1.625rem;     /* 26px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    line-height: 1.22;
    margin: var(--soofos-space-md) 0 var(--soofos-space-sm);
}
.sf-blog-featured__excerpt {
    font-size: var(--soofos-player-text-lg);   /* 14px */
    color: var(--muted);
    line-height: 1.65;
}
.sf-blog-featured__meta {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    margin-top: auto;
    padding-top: var(--soofos-space-lg);
}
.sf-blog-featured__read {
    margin-left: auto;
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--deep-blue);
}

/* ---------- Latest grid ---------- */
.sf-blog-grid__heading {
    font-size: 1.125rem;   /* 18px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    margin: var(--soofos-space-2xl) 0 var(--soofos-space-md);
}
.sf-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--soofos-space-lg);
}
.sf-blog-card {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .12s;
}
.sf-blog-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-.125rem);
}
.sf-blog-card__img-wrap {
    height: 9.375rem;        /* 150px */
    overflow: hidden;
    background: var(--blue-fill);
}
.sf-blog-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-blog-card__body {
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.sf-blog-card__title {
    font-size: .9375rem;     /* 15px */
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
    line-height: 1.35;
    margin: var(--soofos-space-sm) 0 var(--soofos-space-xs);
}
.sf-blog-card__meta {
    font-size: .75rem;       /* 12px */
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-bold);
    margin-top: auto;
}

/* ---------- Author avatar (initial circle) — used by featured + cards ---------- */
.sf-blog-avatar {
    width: 1.75rem;          /* 28px */
    height: 1.75rem;
    border-radius: 50%;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-black);
    font-size: var(--soofos-player-text-xs);   /* 11px */
    display: grid;
    place-items: center;
    flex: none;
}
.sf-blog-featured__meta .sf-blog-avatar {
    width: 1.875rem;         /* 30px */
    height: 1.875rem;
    font-size: var(--soofos-player-text-sm);   /* 12px */
}

/* ---------- Pagination (Older / Newer articles) ---------- */
.sf-blog-pagination {
    display: flex;
    justify-content: center;
    margin: var(--soofos-space-xl) 0 0;
    gap: var(--soofos-space-md);
}
.sf-blog-pagination__link {
    padding: var(--soofos-space-md) 1.75rem;
    border: medium solid var(--input-border);
    border-radius: var(--r-btn);
    background: var(--white);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.sf-blog-pagination__link:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}

/* ---------- Audience sections (3 cards under "Browse by what you want to do") ---------- */
.sf-blog-audience {
    padding: var(--soofos-space-3xl) 0 0;
}
.sf-blog-audience__heading {
    font-size: 1.125rem;      /* 18px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    margin: 0 0 var(--soofos-space-md);
}
.sf-blog-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--soofos-space-lg);
}
.sf-blog-audience__card {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .12s;
}
.sf-blog-audience__card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-.125rem);
}
.sf-blog-audience__cover {
    height: 9.375rem;         /* 150px */
    overflow: hidden;
    background: var(--blue-fill);
}
.sf-blog-audience__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.sf-blog-audience__body {
    padding: 1.25rem 1.375rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--soofos-space-sm);
}
.sf-blog-audience__title {
    font-size: 1rem;          /* 16px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 var(--soofos-space-2xs);
}
.sf-blog-audience__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
}
.sf-blog-audience__link {
    display: block;
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    color: var(--body);
    line-height: 1.45;
    text-decoration: none;
    padding-bottom: var(--soofos-space-sm);
    border-bottom: thin solid var(--strip);
    transition: color .15s, border-color .15s;
}
.sf-blog-audience__links li:last-child .sf-blog-audience__link {
    border-bottom: 0;
    padding-bottom: 0;
}
.sf-blog-audience__link:hover {
    color: var(--deep-blue);
    border-bottom-color: var(--blue);
}
.sf-blog-audience__view-all {
    margin-top: auto;
    padding-top: var(--soofos-space-sm);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--deep-blue);
    text-decoration: none;
    transition: color .15s;
}
.sf-blog-audience__view-all:hover { color: var(--blue-hover); }

/* ---------- Newsletter band (navy, with form) ---------- */
.sf-blog-newsletter {
    margin: var(--soofos-space-3xl) 0 calc(var(--soofos-space-3xl) + var(--soofos-space-sm));
    background: var(--ink);
    border-radius: var(--r-card-lg);
    padding: var(--soofos-space-2xl) calc(var(--soofos-space-2xl) + var(--soofos-space-xs));
    display: flex;
    align-items: center;
    gap: var(--soofos-space-2xl);
}
.sf-blog-newsletter__lead { flex: 1; }
.sf-blog-newsletter__title {
    font-size: 1.125rem;     /* 18px */
    font-weight: var(--soofos-font-weight-black);
    color: var(--white);
    margin: 0;
    line-height: 1.2;
}
.sf-blog-newsletter__sub {
    font-size: var(--soofos-player-text-md);  /* 13px */
    color: var(--faint);
    font-weight: var(--soofos-font-weight-semibold);
    margin-top: var(--soofos-space-2xs);
    line-height: 1.5;
}
.sf-blog-newsletter__form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    background: var(--white);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-xs) var(--soofos-space-xs) var(--soofos-space-xs) 1.25rem;
}
.sf-blog-newsletter__input {
    flex: 1;
    border: 0;
    background: transparent;
    font: var(--soofos-font-weight-semibold) var(--soofos-player-text-md) var(--font);
    color: var(--body);
    padding: var(--soofos-space-sm) 0;
    min-width: 0;
}
.sf-blog-newsletter__input::placeholder {
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-semibold);
}
.sf-blog-newsletter__input:focus {
    outline: none;
}
.sf-blog-newsletter__cta {
    border: 0;
    cursor: pointer;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-sm) 1.375rem;
    font: var(--soofos-font-weight-extrabold) var(--soofos-player-text-md) var(--font);
    transition: background .15s;
}
.sf-blog-newsletter__cta:hover { background: var(--blue-hover); }
.sf-blog-newsletter__cta:disabled,
.sf-blog-newsletter__input:disabled { cursor: not-allowed; opacity: .7; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
    .sf-blog-wrap { padding: var(--soofos-space-xl) var(--soofos-space-xl) 0; }
    .sf-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .sf-blog-audience__grid { grid-template-columns: repeat(2, 1fr); }
    .sf-blog-featured { grid-template-columns: 1fr; }
    .sf-blog-featured__img-wrap { min-height: 13.75rem; }
    .sf-blog-newsletter { flex-direction: column; align-items: flex-start; }
    .sf-blog-newsletter__form { width: 100%; }
}
@media (max-width: 37.5rem) {
    .sf-blog-wrap { padding: 1rem 1rem 0; }
    .sf-blog-grid { grid-template-columns: 1fr; }
    .sf-blog-audience__grid { grid-template-columns: 1fr; }
    .sf-blog-header__title { font-size: 1.75rem; }
    .sf-blog-header__lead { min-width: 0; }
    .sf-blog-search { min-width: 0; flex: 1; }
    .sf-blog-featured__title { font-size: 1.375rem; }
    .sf-blog-newsletter { padding: var(--soofos-space-xl); }
}

/* Responsive (2026-07-28 audit, TASK-446): heading + lead get the full row,
   search box drops below (the lead's min-width is overridden to 0 by a
   generic reset, so the intended wrap never triggered). */
@media (max-width: 640px) {
    .sf-blog-header__lead,
    .sf-blog-search {
        flex: 1 1 100%;
    }
}