/**
 * blog.css — Blog index, single post, archives
 * Heptalume Child Theme
 */

/* ── Local aliases ── */
:root {
    --blog-container: 1100px;
    --blog-gap:       28px;
    --blog-cols:      3;
}

.blog-container {
    max-width: var(--blog-container);
    margin:    0 auto;
    padding:   0 24px;
}

/* ============================================================
   BLOG HERO / ARCHIVE HEADER
   ============================================================ */
.blog-hero {
    padding:   80px 0 52px;
    border-bottom: 1px solid var(--border);
    background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,151,106,.05) 0%, transparent 70%);
}

.blog-hero__tag {
    display:        inline-block;
    font:           400 .72rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom:  14px;
}

.blog-hero__title {
    font:          600 clamp(2rem,4vw,3.2rem)/1.1 var(--ff-heading);
    color:         var(--text);
    margin-bottom: 14px;
}

.blog-hero__title em { font-style: italic; color: var(--gold); }

.blog-hero__desc {
    font:      400 1rem/1.7 var(--ff-body);
    color:     var(--text-2);
    max-width: 520px;
}

/* Archive taxonomy label pill */
.blog-hero__taxonomy {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      rgba(200,151,106,.08);
    border:          1px solid rgba(200,151,106,.25);
    border-radius:   100px;
    color:           var(--gold);
    font:            400 .72rem/1 var(--ff-mono);
    letter-spacing:  .08em;
    margin-bottom:   20px;
    padding:         5px 14px;
    text-transform:  uppercase;
}

/* ============================================================
   CATEGORY FILTER TABS
   ============================================================ */
.blog-filters {
    display:      flex;
    gap:          8px;
    flex-wrap:    wrap;
    padding:      28px 0 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.blog-filter-btn {
    background:      transparent;
    border:          1px solid var(--border);
    border-radius:   100px;
    color:           var(--text-2);
    cursor:          pointer;
    font:            400 .78rem/1 var(--ff-mono);
    letter-spacing:  .05em;
    padding:         6px 16px;
    text-decoration: none;
    transition:      border-color .18s, color .18s, background .18s;
    white-space:     nowrap;
}

.blog-filter-btn:hover {
    border-color: rgba(200,151,106,.4);
    color:        var(--text);
}

.blog-filter-btn.active,
.blog-filter-btn[aria-current="true"] {
    background:   rgba(200,151,106,.1);
    border-color: var(--gold);
    color:        var(--gold);
}

/* ============================================================
   POST GRID
   ============================================================ */
.blog-body {
    padding: 0 0 80px;
}

.blog-grid {
    display:               grid;
    grid-template-columns: repeat(var(--blog-cols), 1fr);
    gap:                   var(--blog-gap);
    margin-bottom:         52px;
}

/* Featured post (first item) */
.blog-grid .blog-card:first-child {
    grid-column: span 2;
}

.blog-grid .blog-card:first-child .blog-card__img-wrap {
    aspect-ratio: 16 / 7;
}

.blog-grid .blog-card:first-child .blog-card__title {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

/* ============================================================
   POST CARD
   ============================================================ */
.blog-card {
    background:     var(--bg-1);
    border:         1px solid var(--border);
    border-radius:  12px;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    text-decoration: none;
    transition:     border-color .22s, transform .22s, box-shadow .22s;
}

.blog-card:hover {
    border-color: rgba(200,151,106,.3);
    box-shadow:   0 8px 28px rgba(0,0,0,.3);
    transform:    translateY(-3px);
}

/* Image */
.blog-card__img-wrap {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    flex-shrink:  0;
}

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

.blog-card:hover .blog-card__img-wrap img { transform: scale(1.04); }

.blog-card__img-placeholder {
    width:      100%;
    height:     100%;
    background: radial-gradient(circle at 50%, rgba(200,151,106,.06), transparent 70%),
                var(--bg-2);
    display:    flex;
    align-items:   center;
    justify-content: center;
    font-size:  3rem;
}

/* Body */
.blog-card__body {
    padding:        20px 22px 24px;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            8px;
}

/* Category + date row */
.blog-card__meta {
    display:   flex;
    align-items: center;
    gap:       10px;
    flex-wrap: wrap;
}

.blog-card__cat {
    background:     rgba(200,151,106,.1);
    border:         1px solid rgba(200,151,106,.2);
    border-radius:  100px;
    color:          var(--gold);
    font:           400 .68rem/1 var(--ff-mono);
    letter-spacing: .08em;
    padding:        3px 10px;
    text-decoration: none;
    text-transform: uppercase;
    white-space:    nowrap;
    transition:     border-color .18s;
}

.blog-card__cat:hover { border-color: var(--gold); }

.blog-card__date {
    font:           400 .7rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .04em;
}

.blog-card__read-time {
    font:           400 .7rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .04em;
    margin-left:    auto;
}

/* Title */
.blog-card__title {
    font:          500 1.05rem/1.3 var(--ff-heading);
    color:         var(--text);
    margin:        4px 0 0;
    transition:    color .18s;
}

.blog-card:hover .blog-card__title { color: var(--gold); }

/* Excerpt */
.blog-card__excerpt {
    font:           400 .87rem/1.65 var(--ff-body);
    color:          var(--text-2);
    display:        -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:       hidden;
    margin-top:     4px;
    flex:           1;
}

/* Read more */
.blog-card__more {
    font:           500 .76rem/1 var(--ff-mono);
    color:          var(--gold);
    letter-spacing: .06em;
    margin-top:     12px;
    display:        flex;
    align-items:    center;
    gap:            6px;
    text-transform: uppercase;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.blog-pagination {
    display:         flex;
    justify-content: center;
}

.blog-pagination .nav-links {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 12px;
    background:      var(--bg-1);
    border:          1px solid var(--border);
    border-radius:   6px;
    color:           var(--text-2);
    font:            400 .82rem/1 var(--ff-mono);
    text-decoration: none;
    transition:      border-color .18s, color .18s;
}

.blog-pagination .page-numbers:hover    { border-color: var(--gold); color: var(--gold); }
.blog-pagination .page-numbers.current  { background: rgba(200,151,106,.1); border-color: var(--gold); color: var(--gold); }
.blog-pagination .page-numbers.dots     { border: none; background: none; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post { padding-bottom: 80px; }

/* ── Post header ── */
.post-header {
    padding:       80px 0 52px;
    border-bottom: 1px solid var(--border);
    position:      relative;
    overflow:      hidden;
}

.post-header::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(200,151,106,.05) 0%, transparent 70%);
    pointer-events: none;
}

.post-header__inner { position: relative; z-index: 1; }

.post-header__meta {
    display:    flex;
    align-items: center;
    gap:        12px;
    flex-wrap:  wrap;
    margin-bottom: 18px;
}

.post-header__cat {
    background:     rgba(200,151,106,.1);
    border:         1px solid rgba(200,151,106,.25);
    border-radius:  100px;
    color:          var(--gold);
    font:           400 .7rem/1 var(--ff-mono);
    letter-spacing: .08em;
    padding:        4px 12px;
    text-decoration: none;
    text-transform: uppercase;
}

.post-header__date,
.post-header__read-time {
    font:           400 .75rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .04em;
}

.post-header__sep { color: var(--border); }

.post-header__title {
    font:          600 clamp(2rem,4.5vw,3.4rem)/1.1 var(--ff-heading);
    color:         var(--text);
    margin-bottom: 20px;
    max-width:     800px;
}

.post-header__excerpt {
    font:      400 1.1rem/1.8 var(--ff-body);
    color:     var(--text-2);
    max-width: 640px;
}

/* ── Featured image ── */
.post-featured-img {
    width:         100%;
    aspect-ratio:  16 / 6;
    object-fit:    cover;
    display:       block;
    max-height:    520px;
}

/* ── Post content layout ── */
.post-layout {
    display:   grid;
    grid-template-columns: 1fr 680px 1fr;
    gap:       0;
    padding-top: 52px;
}

.post-layout__sidebar-left  { padding-right: 40px; }
.post-layout__content       { min-width: 0; }
.post-layout__sidebar-right { padding-left: 40px; }

/* Share buttons (left sidebar) */
.post-share {
    position:       sticky;
    top:            100px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    flex-end;
}

.post-share__label {
    font:           400 .68rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    writing-mode:   vertical-rl;
    transform:      rotate(180deg);
}

.post-share__btn {
    width:         36px;
    height:        36px;
    background:    var(--bg-1);
    border:        1px solid var(--border);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--text-2);
    font-size:     .8rem;
    text-decoration: none;
    transition:    border-color .18s, color .18s;
    cursor:        pointer;
}

.post-share__btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── Entry content typography ── */
.entry-content {
    font:     400 1rem/1.85 var(--ff-body);
    color:    var(--text-2);
}

.entry-content > * + * { margin-top: 1.4em; }

.entry-content h2 {
    font:       600 1.6rem/1.2 var(--ff-heading);
    color:      var(--text);
    margin-top: 2.4em;
}

.entry-content h3 {
    font:       600 1.2rem/1.3 var(--ff-heading);
    color:      var(--text);
    margin-top: 2em;
}

.entry-content h4 {
    font:       600 1rem/1.3 var(--ff-body);
    color:      var(--text);
    margin-top: 1.8em;
    letter-spacing: .02em;
}

.entry-content p { color: var(--text-2); }

.entry-content a {
    color:           var(--gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.entry-content a:hover { color: var(--gold-l); }

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
    color:        var(--text-2);
}

.entry-content ul li { list-style-type: disc; }
.entry-content ol li { list-style-type: decimal; }
.entry-content li + li { margin-top: .4em; }

.entry-content blockquote {
    background:   var(--bg-1);
    border-left:  3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    color:        var(--text);
    font:         italic 1.05rem/1.8 var(--ff-heading);
    margin:       2em 0;
    padding:      20px 28px;
}

.entry-content blockquote cite {
    display:    block;
    font:       400 .8rem var(--ff-mono);
    color:      var(--text-2);
    font-style: normal;
    margin-top: 8px;
    letter-spacing: .04em;
}

.entry-content img {
    border-radius: 8px;
    max-width:     100%;
    height:        auto;
    display:       block;
}

.entry-content figcaption {
    font:       400 .8rem/1.4 var(--ff-mono);
    color:      var(--text-2);
    text-align: center;
    margin-top: 8px;
    letter-spacing: .04em;
}

.entry-content hr {
    border:     none;
    border-top: 1px solid var(--border);
    margin:     2.4em 0;
}

.entry-content pre,
.entry-content code {
    background:  var(--bg-1);
    border:      1px solid var(--border);
    border-radius: 6px;
    font:        400 .85em/1.6 var(--ff-mono);
    color:       var(--gold);
}

.entry-content code       { padding: 2px 6px; }
.entry-content pre        { padding: 18px 22px; overflow-x: auto; }
.entry-content pre code   { background: none; border: none; padding: 0; }

/* ── Post footer: tags ── */
.post-tags {
    display:    flex;
    gap:        8px;
    flex-wrap:  wrap;
    align-items: center;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.post-tags__label {
    font:           400 .7rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.post-tag {
    background:     var(--bg-1);
    border:         1px solid var(--border);
    border-radius:  4px;
    color:          var(--text-2);
    font:           400 .72rem/1 var(--ff-mono);
    letter-spacing: .05em;
    padding:        4px 10px;
    text-decoration: none;
    transition:     border-color .18s, color .18s;
}

.post-tag:hover { border-color: var(--gold); color: var(--gold); }

/* ── Author bio ── */
.post-author {
    display:       flex;
    gap:           20px;
    align-items:   flex-start;
    background:    var(--bg-1);
    border:        1px solid var(--border);
    border-radius: 12px;
    margin-top:    48px;
    padding:       28px;
}

.post-author__avatar {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    border:        2px solid var(--border);
}

.post-author__avatar-placeholder {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--bg-2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.6rem;
    flex-shrink:     0;
    border:          2px solid var(--border);
}

.post-author__body {}

.post-author__label {
    font:           400 .68rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom:  4px;
    display:        block;
}

.post-author__name {
    font:          600 1rem/1.2 var(--ff-heading);
    color:         var(--text);
    margin-bottom: 8px;
}

.post-author__bio {
    font:  400 .88rem/1.65 var(--ff-body);
    color: var(--text-2);
}

/* ── Post navigation (prev/next) ── */
.post-nav {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       1px;
    border:    1px solid var(--border);
    border-radius: 10px;
    overflow:  hidden;
    margin-top: 48px;
}

.post-nav__item {
    padding:         22px 24px;
    background:      var(--bg-1);
    text-decoration: none;
    transition:      background .18s;
}

.post-nav__item:hover { background: var(--bg-2); }

.post-nav__item + .post-nav__item { border-left: 1px solid var(--border); }

.post-nav__dir {
    font:           400 .68rem/1 var(--ff-mono);
    color:          var(--text-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom:  6px;
    display:        block;
}

.post-nav__item--next .post-nav__dir { text-align: right; }

.post-nav__title {
    font:      500 .92rem/1.3 var(--ff-body);
    color:     var(--text);
    display:   -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:  hidden;
}

.post-nav__item--next .post-nav__title { text-align: right; }

/* ── Related posts ── */
.post-related {
    margin-top: 60px;
    padding-top: 52px;
    border-top: 1px solid var(--border);
}

.post-related__title {
    font:          600 1.4rem/1.2 var(--ff-heading);
    color:         var(--text);
    margin-bottom: 28px;
}

.post-related__title em { font-style: italic; color: var(--gold); }

.post-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Comments ── */
.post-comments {
    margin-top:    60px;
    padding-top:   52px;
    border-top:    1px solid var(--border);
    max-width:     680px;
}

.comment-list { list-style: none; margin: 0; padding: 0; }

.comment-body {
    background:    var(--bg-1);
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       20px;
    margin-bottom: 16px;
}

.comment-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.comment-author .fn    { font: 600 .9rem var(--ff-body); color: var(--text); }
.comment-metadata time { font: 400 .75rem var(--ff-mono); color: var(--text-2); }

.comment-content p { font: 400 .9rem/1.7 var(--ff-body); color: var(--text-2); }

/* Comment form */
.comment-form label {
    display:     block;
    font:        400 .75rem/1 var(--ff-mono);
    color:       var(--text-2);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width:         100%;
    background:    var(--bg-1);
    border:        1px solid var(--border);
    border-radius: 6px;
    color:         var(--text);
    font:          400 .9rem var(--ff-body);
    padding:       10px 14px;
    outline:       none;
    transition:    border-color .18s;
    box-sizing:    border-box;
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--gold); }

.comment-form textarea { min-height: 120px; resize: vertical; }

.comment-form .submit {
    background:      var(--gold);
    border:          1px solid var(--gold);
    border-radius:   6px;
    color:           var(--bg);
    cursor:          pointer;
    font:            600 .82rem/1 var(--ff-mono);
    letter-spacing:  .08em;
    padding:         12px 24px;
    text-transform:  uppercase;
    transition:      filter .18s;
    margin-top:      8px;
}

.comment-form .submit:hover { filter: brightness(1.1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    :root { --blog-cols: 2; }

    .blog-grid .blog-card:first-child { grid-column: span 2; }

    .post-layout {
        grid-template-columns: 0 1fr 0;
    }

    .post-layout__sidebar-left,
    .post-layout__sidebar-right { display: none; }
}

@media (max-width: 860px) {
    .post-related__grid { grid-template-columns: 1fr 1fr; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__item + .post-nav__item { border-left: none; border-top: 1px solid var(--border); }
    .post-nav__item--next .post-nav__dir,
    .post-nav__item--next .post-nav__title { text-align: left; }
}

@media (max-width: 640px) {
    :root { --blog-cols: 1; }

    .blog-grid .blog-card:first-child { grid-column: span 1; }
    .blog-grid .blog-card:first-child .blog-card__img-wrap { aspect-ratio: 16/9; }
    .blog-grid .blog-card:first-child .blog-card__title { font-size: 1.1rem; }

    .post-header { padding: 60px 0 36px; }
    .post-header__title { font-size: 1.9rem; }
    .post-related__grid { grid-template-columns: 1fr; }

    .post-author { flex-direction: column; gap: 16px; }
}