/* ==========================================================================
   Blog index (blogs.php)
   Kept in its own file rather than appended to myhome.css, so it cannot
   collide with concurrent work on the main stylesheet. Values are the site's
   own tokens: base #c27266, surface #f3f3ed, border #eaeae2, Inter.
   ========================================================================== */

.blogx-head { max-width: 60ch; margin: 0 0 26px; }
.blogx-head h1 {
    /* Lighter than the site's usual display weight. Two bold headings stacked
       either side of the filter row read as heavy, so the size carries the
       hierarchy here and the weight stays quiet. */
    font-size: clamp(26px, 3.2vw, 35px);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: #221f1d;
    margin: 0 0 10px;
    text-wrap: balance;
}
.blogx-head p { font-size: 16px; line-height: 1.65; color: #8b857f; margin: 0; }

/* ---- category filters ---- */
.blogx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.blogx-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1;
    color: #4a4542;
    background: #fff;
    border: 1px solid #eaeae2;
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.blogx-chip span {
    font-size: 10.5px;
    color: #86868b;
    font-variant-numeric: tabular-nums;
}
.blogx-chip:hover { border-color: #c27266; color: #221f1d; }
.blogx-chip.is-on { background: #c27266; border-color: #c27266; color: #fff; }
.blogx-chip.is-on span { color: rgba(255,255,255,.75); }

/* ---- section heading above the grid ---- */
.blogx-subhead {
    /* A section label, not a second headline: it competes with the h1 above it
       if it carries the same weight. */
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.008em;
    color: #8b857f;
    margin: 0 0 20px;
    text-wrap: balance;
}
@media (max-width: 575px) { .blogx-subhead { margin-bottom: 16px; font-size: 14.5px; } }

/* ---- grid ---- */
.blogx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.blogx-card {
    display: flex; flex-direction: column;
    border: 1px solid #eaeae2; border-radius: 10px;
    overflow: hidden; background: #fff;
    text-decoration: none; color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.blogx-card:hover {
    transform: translateY(-3px);
    border-color: #c27266;
    box-shadow: 0 10px 26px rgba(34,31,29,.09);
}
.blogx-card-img { aspect-ratio: 3 / 2; overflow: hidden; background: #e4e1da; }
.blogx-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blogx-card:hover .blogx-card-img img { transform: scale(1.04); }
.blogx-card-body { padding: 17px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.blogx-card-body h3 {
    font-size: 17px; font-weight: 620; line-height: 1.32;
    letter-spacing: -0.02em; color: #221f1d; margin: 0; text-wrap: balance;
}
.blogx-card-body p { font-size: 14px; line-height: 1.6; color: #86868b; margin: 0; flex: 1 1 auto; }

/* ---- shared meta line ---- */
.blogx-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 11.5px; color: #86868b;
}
.blogx-meta .blogx-cat { color: #a85a4e; font-weight: 600; }
.blogx-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.blogx-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: #a85a4e; margin-top: 2px;
}
.blogx-more svg { transition: transform .18s ease; }
.blogx-card:hover .blogx-more svg { transform: translateX(3px); }

.blogx-empty {
    border: 1px dashed #eaeae2; border-radius: 10px;
    padding: 44px 20px; text-align: center; color: #86868b; font-size: 15px;
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .blogx-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 575px) {
    .blogx-grid { grid-template-columns: 1fr; gap: 16px; }
    .blogx-head p { font-size: 15.5px; }
    .blogx-chips { gap: 7px; margin-bottom: 26px; }
    .blogx-chip { font-size: 12.5px; padding: 7px 13px; }
}

.blogx-card:focus-visible,
.blogx-chip:focus-visible { outline: 2px solid #c27266; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .blogx-card, .blogx-card-img img, .blogx-more svg {
        transition: none !important;
    }
    .blogx-card:hover { transform: none; }
}