/* ==========================================================
   BLOG.CSS — Camille Market Insight
   Blog archive grid + single post styling
   ========================================================== */

/* ── Toolbar: search + category filters ── */
.blog-toolbar {
    display:        flex;
    flex-direction: column;
    gap:            22px;
    margin-bottom:  40px;
    padding-bottom: 32px;
    border-bottom:  .5px solid rgba(0,0,0,.09);
}

.blog-search {
    display:      flex;
    align-items:  center;
    gap:          10px;
    max-width:    440px;
    padding:      4px 6px 4px 16px;
    background:   #fff;
    border:       1.5px solid rgba(0,0,0,.1);
    transition:   border-color .2s, box-shadow .2s;
}
.blog-search:focus-within { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(227,24,55,.1); }
.blog-search__icon { flex-shrink: 0; color: var(--color-stone); }
.blog-search__input {
    flex:        1;
    min-width:   0;
    border:      none;
    outline:     none;
    background:  transparent;
    font-family: var(--font-sans);
    font-size:   14px;
    color:       var(--color-ink);
    padding-block: 10px;
}
.blog-search__input::placeholder { color: rgba(64,64,64,.45); }
.blog-search__btn {
    flex-shrink:    0;
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #fff;
    background:     var(--crimson);
    border:         none;
    padding:        11px 18px;
    cursor:         pointer;
    transition:     background .2s;
}
.blog-search__btn:hover { background: var(--crimson-dark); }

.blog-filters {
    display:      flex;
    flex-wrap:    wrap;
    gap:          8px;
}
.blog-filter-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-sans);
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  .02em;
    color:           var(--color-ink);
    background:      var(--navy-pale);
    padding:         8px 16px;
    text-decoration: none;
    transition:      background .2s, color .2s;
}
.blog-filter-pill:hover { background: rgba(227,24,55,.12); color: var(--crimson); }
.blog-filter-pill.is-active { background: var(--crimson); color: #fff; }
.blog-filter-pill__count {
    font-size:   10.5px;
    font-weight: 400;
    opacity:     .7;
}

.blog-filter-summary {
    font-family:   var(--font-sans);
    font-size:     13px;
    color:         var(--color-stone);
    margin-bottom: 28px;
}
.blog-filter-summary a { color: var(--crimson); text-decoration: underline; text-underline-offset: 2px; }

/* ── Archive grid ── */
.blog-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}

.blog-card {
    background:  #fff;
    border:      .5px solid rgba(0,0,0,.06);
    display:     flex;
    flex-direction: column;
    transition:  all .4s cubic-bezier(.165,.84,.44,1);
}
.blog-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,.08); border-color: rgba(227,24,55,.2); }

.blog-card__thumb-link { display: block; overflow: hidden; }
.blog-card__thumb {
    width:      100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.165,.84,.44,1);
}
.blog-card:hover .blog-card__thumb { transform: scale(1.05); }
.blog-card__thumb--placeholder {
    display:    block;
    background: linear-gradient(135deg, var(--navy-pale) 0%, var(--crimson-pale) 100%);
}

.blog-card__body { padding: 32px 32px 28px; display: flex; flex-direction: column; flex: 1; }

.blog-card__cat {
    display:        inline-block;
    font-family:    var(--font-sans);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--crimson);
    margin-bottom:  14px;
}

.blog-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-ink); line-height: 1.3; margin-bottom: 12px; }
.blog-card h3 a { color: inherit; }
.blog-card h3 a:hover { color: var(--crimson); }

.blog-card p { font-family: var(--font-sans); font-size: 14px; font-weight: 300; color: var(--color-stone); line-height: 1.8; margin-bottom: 24px; flex: 1; }

.blog-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding-top:     18px;
    border-top:      .5px solid rgba(0,0,0,.07);
}
.blog-card__date {
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    400;
    color:          var(--color-stone);
}

/* ── Pagination ── */
.blog-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    flex-wrap:       wrap;
    margin-top:      56px;
}
.blog-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding-inline:  12px;
    font-family:     var(--font-sans);
    font-size:       13px;
    font-weight:     600;
    color:           var(--color-ink);
    border:          .5px solid rgba(0,0,0,.12);
    transition:      background .2s, color .2s, border-color .2s;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.blog-pagination .page-numbers.dots { border: none; }

.blog-empty { text-align: center; padding-block: 40px; }
.blog-empty p { font-family: var(--font-sans); font-size: 16px; color: var(--color-stone); }

/* ==========================================================
   SINGLE POST — editorial layout
   Isolated from Astra (its stylesheet is dequeued on single
   posts, see camille_isolate_blog_from_astra()) — every rule
   below owns its own typography, no inherited resets assumed.
   ========================================================== */

/* ── Cover ── */
.post-cover {
    position:   relative;
    min-height: 70vh;
    display:    flex;
    align-items:flex-end;
    overflow:   hidden;
    background: var(--navy);
}
.post-cover__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.post-cover__img--placeholder {
    background: linear-gradient(135deg, var(--navy) 0%, var(--crimson-dark) 100%);
}
.post-cover__scrim {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.88) 100%);
}
.post-cover__inner {
    position:      relative;
    z-index:       1;
    padding-block: 64px 48px;
}
.post-cover__cat {
    display:        inline-block;
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          #fff;
    background:     var(--crimson);
    padding:        5px 14px;
    margin-bottom:  20px;
}
.post-cover__title {
    font-family:   var(--font-heading);
    font-size:     clamp(2rem, 5vw, 3.25rem);
    font-weight:   700;
    line-height:   1.15;
    color:         #fff;
    margin-bottom: 24px;
    max-width:     880px;
}
.post-cover__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         14px;
}
.post-cover__sep { color: rgba(255,255,255,.4); }
.post-meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-family: var(--font-sans);
    font-size:   13px;
    font-weight: 400;
    color:       rgba(255,255,255,.75);
}
.post-author-chip {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
}
.post-author-chip__avatar { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); display: block; }
.post-author-chip__name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #fff; }
.post-author-chip:hover .post-author-chip__name { color: var(--crimson-pale); }

/* ── Body layout: TOC + article ── */
.post-section { padding-top: var(--space-xl); }

.post-layout {
    display:               grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap:                   64px;
    align-items:           start;
    max-width:             1040px;
    margin-inline:         auto;
}
.post-layout--no-toc { display: block; }

.post-toc-wrap { position: sticky; top: 24px; }
.post-toc {
    border:  .5px solid rgba(0,0,0,.09);
    padding: 20px 22px;
}
.post-toc__title {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    font-family:     var(--font-sans);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           var(--color-ink);
    cursor:          default;
    list-style:      none;
}
.post-toc__title::-webkit-details-marker { display: none; }
.post-toc__chev { display: none; flex-shrink: 0; color: var(--color-stone); transition: transform .25s; }
.post-toc[open] .post-toc__chev { transform: rotate(180deg); }

.post-toc__list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-top:     16px;
    padding-top:    16px;
    border-top:     .5px solid rgba(0,0,0,.09);
}
.post-toc__link {
    font-family:     var(--font-sans);
    font-size:       13px;
    font-weight:     400;
    color:           var(--color-stone);
    line-height:     1.5;
    text-decoration: none;
    border-left:     2px solid transparent;
    padding-left:    12px;
    transition:      color .2s, border-color .2s;
}
.post-toc__link:hover { color: var(--crimson); border-left-color: var(--crimson); }
.post-toc__link--h3 { padding-left: 26px; font-size: 12.5px; }

/* ── Article typography ── */
.post-body {
    font-family: var(--font-sans);
    font-size:   17px;
    font-weight: 400;
    line-height: 1.9;
    color:       var(--color-stone);
}
.post-body p { margin-bottom: 1.6rem; }
.post-body h2 {
    font-family:   var(--font-heading);
    font-size:     clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight:   700;
    color:         var(--color-ink);
    line-height:   1.3;
    margin:        2.4em 0 .9em;
    scroll-margin-top: 100px;
}
.post-body h3 {
    font-family:   var(--font-heading);
    font-size:     clamp(1.15rem, 2vw, 1.4rem);
    font-weight:   700;
    color:         var(--color-ink);
    line-height:   1.35;
    margin:        2em 0 .75em;
    scroll-margin-top: 100px;
}
.post-body a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--crimson-dark); }
.post-body img { width: 100%; height: auto; margin-block: 1.75rem; }
.post-body ul, .post-body ol { margin: 0 0 1.6rem; padding-left: 1.4rem; }
.post-body li { margin-bottom: .5rem; }
.post-body blockquote {
    border-left:  3px solid var(--crimson);
    padding:      4px 0 4px 22px;
    margin:       2rem 0;
    font-family:  var(--font-heading);
    font-size:    19px;
    font-style:   italic;
    color:        var(--color-ink);
}
.post-body strong { font-weight: 700; color: var(--color-ink); }
.post-body hr { border: none; border-top: .5px solid rgba(0,0,0,.1); margin: 2.5rem 0; }

/* ── Author card ── */
.post-author-card {
    display:       flex;
    gap:           20px;
    align-items:   flex-start;
    margin-inline: auto;
    margin-top:    64px;
    padding:       28px 30px;
    background:    var(--color-parchment, #f7f5f2);
    border-left:   3px solid var(--crimson);
}
.post-author-card__avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; }
.post-author-card__label {
    display:        block;
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--crimson);
    margin-bottom:  4px;
}
.post-author-card__name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-ink); margin-bottom: 8px; }
.post-author-card__bio { font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--color-stone); line-height: 1.75; }

/* ── Prev / Next ── */
.post-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-inline:   auto;
    margin-top:      40px;
    padding-top:     32px;
    border-top:      .5px solid rgba(0,0,0,.09);
}
.post-nav__link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--font-sans);
    font-size:       13px;
    font-weight:     600;
    color:           var(--color-ink);
    text-decoration: none;
    transition:      color .2s;
}
.post-nav__link:hover { color: var(--crimson); }
.post-nav__back {
    font-family:     var(--font-sans);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           var(--navy);
    background:      var(--navy-pale);
    padding:         10px 20px;
    text-decoration: none;
    transition:      background .2s, color .2s;
}
.post-nav__back:hover { background: var(--crimson); color: #fff; }

/* ── Responsive ── */
@media (max-width: 1000px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .post-layout { grid-template-columns: 1fr; gap: 32px; }
    .post-toc-wrap { position: static; }
    .post-toc__title { cursor: pointer; }
    .post-toc__chev { display: block; }
    .post-toc:not([open]) .post-toc__list { display: none; }
}
@media (max-width: 700px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card__body { padding: 24px 22px 22px; }
    .blog-search { max-width: 100%; }
    .post-cover { min-height: 56vh; }
    .post-cover__inner { padding-block: 40px 32px; }
    .post-author-card { flex-direction: column; align-items: flex-start; }
    .post-nav { flex-wrap: wrap; }
    .post-nav__link span { display: none; }
}