/* ==========================================================================
   Blog index — the archive at /iptv-blog/

   Same token set as article.css so the index and the articles read as one
   system, and the same reason for not using Tailwind: landing.css is 186 KB
   with a global preflight reset, and template-standalone never loaded it, which
   is why the old hand-written list rendered as unstyled text.
   ========================================================================== */

:root {
    --a-ink:        var(--dv2-ink, #0B1F33);
    --a-body:       var(--dv2-body, #4A5C70);
    --a-muted:      #6B7A93;
    --a-paper:      var(--dv2-bg, #F7FBFF);
    --a-surface:    var(--dv2-surface, #FFFFFF);
    --a-line:       #E1EBF5;
    --a-brand:      var(--dv2-blue, #1089F2);
    --a-brand-deep: #0A5FBA;
    --a-brand-ink:  #063A73;
    --a-tint:       var(--dv2-surface-tint, #E2EFFD);
    --a-tint-line:  #CFE4FA;
    --a-e1: 0 1px 2px rgb(13 42 89 / .05);
    --a-e2: 0 2px 4px rgb(13 42 89 / .04), 0 14px 32px -20px rgb(13 42 89 / .22);
    --a-e3: 0 18px 40px -24px rgb(13 42 89 / .34);
}

body.ibostr-blog {
    background: var(--a-paper);
    color: var(--a-body);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

.ibostr-blog *,
.ibostr-blog *::before,
.ibostr-blog *::after { box-sizing: border-box; }

.blog-shell {
    width: min(100% - 2.5rem, 74rem);
    margin-inline: auto;
}

/* ---------------------------------------------------------------- masthead - */

.blog-masthead {
    padding: 2.5rem 0 2rem;
    background: linear-gradient(180deg, var(--a-tint) 0%, var(--a-paper) 100%);
}

.blog-title {
    font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 700;
    color: var(--a-ink);
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}

/* Editorial standfirst. Sourced from the page excerpt, never the content —
   the content is the legacy hand-written index this template replaces. */
.blog-intro {
    margin: 1.125rem 0 0;
    max-width: 60ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--a-body);
    overflow-wrap: break-word;
}

/* ----------------------------------------------------------------- filters - */

.blog-filter {
    position: sticky;
    top: 5rem;
    z-index: 20;
    padding: .875rem 0;
    background: color-mix(in srgb, var(--a-paper) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--a-line);
}

.blog-filter__row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.blog-filter__row::-webkit-scrollbar { display: none; }

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    flex: none;
    min-height: 40px;
    padding: 0 .9375rem;
    border-radius: 999px;
    border: 1px solid var(--a-line);
    background: var(--a-surface);
    color: var(--a-body);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.blog-chip span {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--a-muted);
    font-variant-numeric: tabular-nums;
}

.blog-chip:hover { color: var(--a-brand-deep); border-color: var(--a-tint-line); }

.blog-chip.is-active {
    background: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    color: #fff;
}

.blog-chip.is-active span { color: rgb(255 255 255 / .72); }

/* -------------------------------------------------------------------- grid - */

.blog-body { padding: 2.25rem 0 4.5rem; }

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.blog-card {
    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: 14px;
    overflow: hidden;
    min-width: 0;
    box-shadow: var(--a-e1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: var(--a-tint-line);
    box-shadow: var(--a-e3);
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--a-tint);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.blog-card:hover .blog-card__media img { transform: scale(1.03); }

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.125rem;
    flex: 1;
}

.blog-card__kicker {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--a-brand-deep);
}

.blog-card__title {
    font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.32;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--a-ink);
    margin: 0;
    text-wrap: balance;
}

.blog-card__excerpt {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--a-body);
    margin: 0;
}

.blog-card__meta {
    margin-top: auto;
    padding-top: .375rem;
    display: flex;
    align-items: center;
    gap: .4375rem;
    font-size: .8125rem;
    color: var(--a-muted);
}

/* The newest post leads: full width, larger type, longer excerpt. */
@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .blog-card--lead { grid-column: 1 / -1; }
    .blog-card--lead .blog-card__link { flex-direction: row; }
    .blog-card--lead .blog-card__media { flex: 0 0 52%; aspect-ratio: 16 / 10; }
    .blog-card--lead .blog-card__body { padding: 1.75rem; justify-content: center; gap: .625rem; }
    .blog-card--lead .blog-card__title { font-size: 1.5rem; line-height: 1.22; }
    .blog-card--lead .blog-card__excerpt { font-size: 1rem; }
}

@media (min-width: 1024px) {
    .blog-masthead { padding: 3rem 0 2.5rem; }
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .blog-card--lead .blog-card__title { font-size: 1.75rem; }
    .blog-card__title { font-size: 1.125rem; }
}

/* ----------------------------------------------------------------- pager --- */

.blog-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.75rem;
}

.blog-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 .875rem;
    border-radius: 10px;
    border: 1px solid var(--a-line);
    background: var(--a-surface);
    color: var(--a-body);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease;
}

.blog-pager .page-numbers:hover { color: var(--a-brand-deep); border-color: var(--a-tint-line); }

.blog-pager .page-numbers.current {
    background: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    color: #fff;
}

.blog-pager .page-numbers.dots { border: 0; background: none; min-width: 1.5rem; }

.blog-empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--a-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ibostr-blog * { transition-duration: .01ms !important; }
    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-card__media img { transform: none; }
}

/* ── Page body copy, printed under the card grid ──────────────────────────────
   template-blog.php renders the index and then the page's own article. Before
   that, ~2,600 words sat in the database unrendered. These rules only set
   readable measure and rhythm; the markup comes from the editor, so selectors
   stay generic and scoped to .blog-longform. */
.blog-longform {
    padding: 2.5rem 0 3.5rem;
    border-top: 1px solid #E1EBF5;
    background: #fff;
}
.blog-longform .blog-shell > * { max-width: 46rem; }
.blog-longform h2 {
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #0B1F33;
    margin: 2.25rem 0 .75rem;
}
.blog-longform h3 {
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1.125rem;
    color: #0B1F33;
    margin: 1.75rem 0 .5rem;
}
.blog-longform p,
.blog-longform li { font-size: 1rem; line-height: 1.75; color: #4A5C70; }
.blog-longform p { margin: 0 0 1rem; }
.blog-longform ul,
.blog-longform ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.blog-longform li { margin-bottom: .4rem; }
.blog-longform a { color: #0B6BCB; text-decoration: underline; text-underline-offset: 2px; }
.blog-longform a:hover { color: #084F98; }
.blog-longform img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-longform table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0 0 1.25rem; }
.blog-longform th,
.blog-longform td { border: 1px solid #E1EBF5; padding: .5rem .625rem; text-align: left; }
.blog-longform th { background: #F7FBFF; color: #0B1F33; font-weight: 700; }
@media (min-width: 1024px) {
    .blog-longform { padding: 3.25rem 0 4.5rem; }
}