/* Purpose: Blog index (Figma 56:1889). Toolbar (count/search/category) + 3-col article grid
   + pagination. Hero reuses .about-hero from about.css. Mobile-first. */

/* Neutralise a stray inline rule ".blog .container { padding-bottom: 50px }" that some
   plugin injects on the Posts page — it was adding 50px to EVERY .container (topbar, catbar,
   content), breaking the header. Reset it, then restore the header rows' own padding so the
   header is identical to every other page. body.blog wins on specificity + is scoped to blog. */
body.blog .container { padding-bottom: 0; }
body.blog .topbar__inner { padding-bottom: 10px; }                 /* mobile topbar */
@media (min-width: 1200px) {
    body.blog .topbar__inner,
    body.blog .catbar__inner { padding-bottom: var(--space-4); }   /* desktop header rows */
}
/* Restore the footer's own bottom padding (the reset above zeroed it). Matches footer.css. */
body.blog .site-footer__top { padding-bottom: 72px; }
body.blog .site-footer__bottom-inner { padding-bottom: 24px; }

/* Blog hero subtext is title-case in Figma. */
.blog-hero .about-hero__sub { text-transform: capitalize; }
/* Figma wraps the title to two lines ("The AlphaStar" / "Journal.") — constrain the block. */
.blog-hero .about-hero__title { max-width: 640px; }

.blog-listing {
    background: var(--color-bg);
    padding: var(--space-16) 0;
}

/* ============================================================
   TOOLBAR — Figma 56:2166
   ============================================================ */
.blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid #e7e8eb;
    margin-bottom: var(--space-8);
}
.blog-toolbar__count {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}
.blog-toolbar__count-num { font-weight: var(--weight-medium); color: var(--color-text); }

.blog-toolbar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.blog-toolbar__search,
.blog-toolbar__select {
    font-family: var(--font-body);
    font-size: 14px;
    height: 40px;
    background: #fff;
    border: 1px solid rgba(11, 30, 56, 0.1);
    border-radius: 0;
    padding: 0 14px;
    color: var(--color-text);
    transition: border-color var(--duration-base) var(--ease-out);
}
.blog-toolbar__search { width: 240px; max-width: 100%; }
.blog-toolbar__search::placeholder { color: #757575; }
.blog-toolbar__search:focus-visible,
.blog-toolbar__select:focus-visible { outline: none; border-color: var(--color-gold); }
.blog-toolbar__select {
    width: 160px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    /* chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230b1e38' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ============================================================
   ARTICLE GRID — Figma 56:2278
   ============================================================ */
.js-blog-results { position: relative; transition: opacity var(--duration-base) var(--ease-out); }
.js-blog-results.is-loading { opacity: 0.45; pointer-events: none; }

.blog-grid {
    display: grid;
    /* minmax(0,1fr), not 1fr: stops a card's track from expanding to an oversized featured
       image (e.g. a full-res original when its resized versions aren't available) — which
       otherwise blows one column out to the image's natural width and squashes the rest. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.blog-card { display: flex; min-width: 0; }
.blog-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e7e8eb;
}
.blog-card__media {
    display: block;
    aspect-ratio: 380 / 300;
    overflow: hidden;
    background: var(--color-primary);
}
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) var(--ease-out);
}
.blog-card__img--placeholder { background: linear-gradient(135deg, #16305a, #0b1e38); }
.blog-card__link:hover .blog-card__img { transform: scale(1.04); }

.blog-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    flex: 1;
}
.blog-card__meta {
    display: flex;
    gap: var(--space-2);
    font-size: 12px;
    line-height: 1.67;
    text-transform: uppercase;
}
.blog-card__cat { font-family: var(--font-body); color: var(--color-gold); }
.blog-card__date { font-family: var(--font-body); font-weight: var(--weight-light); color: var(--color-text-muted); }

.blog-card__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 18px;
    line-height: 1.44;
    color: var(--color-primary);
    margin: 0;
}
.blog-card__excerpt {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 12px;
    line-height: 1.67;
    color: var(--color-text-muted);
    margin: 0;
}
.blog-card__cta {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 14px;
    line-height: 1.57;
    text-transform: uppercase;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-gold);
    padding: var(--space-3) 0;
    margin-top: auto;
    transition: color var(--duration-base) var(--ease-out);
}
.blog-card__link:hover .blog-card__cta { color: var(--color-gold); }

@media (min-width: 600px)  { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================
   PAGINATION — Figma 56:2227
   ============================================================ */
.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(11, 30, 56, 0.1);
}
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text);
    background: #fff;
    border: 1px solid rgba(11, 30, 56, 0.1);
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    text-transform: uppercase;
    letter-spacing: 1.1px;
    padding: 0 14px;
    gap: 6px;
}
.blog-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    min-width: auto;
}
.blog-pagination a.page-numbers:hover {
    background: var(--color-primary);
    color: var(--color-on-navy);
    border-color: var(--color-primary);
}
.blog-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-navy);
    font-weight: var(--weight-semibold);
}

.blog-empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-muted);
    padding: var(--space-10) 0;
    text-align: center;
}
.blog-empty a { color: var(--color-gold); }

/* ---- Mobile trim ---- */
@media (max-width: 599px) {
    .blog-listing { padding: var(--space-10) 0; }
    .blog-toolbar { gap: var(--space-3); }
    .blog-toolbar__controls { width: 100%; }
    .blog-toolbar__search { flex: 1 1 auto; }
}