/* ─────────────────────────────────────────────────────────────────────────
   High Stone blog — loaded AFTER the site's cascade, so every value here is
   one of the site's own custom properties. Nothing invents a colour, a font
   or a spacing step: the blog has to be indistinguishable from the site.

   Also contains the guards that stop WordPress's generated markup (blocks,
   captions, galleries, admin bar) from breaking the design.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Listing grid ─────────────────────────────────────────────────────── */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.post-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-paper-alt));
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.post-card__media--empty { display: block; width: 100%; height: 100%; }

.post-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    flex: 1;
}

.post-card__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-copper-text);
    margin: 0;
}

.post-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.25;
    margin: 0;
}
.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-primary-dark); }

.post-card__excerpt { font-size: var(--text-sm); margin: 0; max-width: none; }

.post-card__meta {
    margin: auto 0 0;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.post-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}
.post-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 var(--space-4);
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    background: var(--color-surface);
}
.post-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.post-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}
.post-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ── Single post ──────────────────────────────────────────────────────── */
.post-single__meta {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
}

/* Article body: the site's reading measure and rhythm, applied to whatever
   markup the editor produces. */
.post-body { font-size: var(--text-base); }
.post-body > * { max-width: 68ch; }
.post-body > p { margin-bottom: var(--space-5); }
.post-body h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin: var(--space-12) 0 var(--space-4);
}
.post-body h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin: var(--space-10) 0 var(--space-3);
}
.post-body h4 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
/* base.css resets list-style for the site's custom lists; editor content
   needs real bullets and numbers back. */
.post-body ul { list-style: disc; margin: 0 0 var(--space-5) var(--space-6); padding-left: var(--space-4); }
.post-body ol { list-style: decimal; margin: 0 0 var(--space-5) var(--space-6); padding-left: var(--space-4); }
.post-body ul ul { list-style: circle; margin-block: var(--space-2); }
.post-body li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.post-body li::marker { color: var(--color-copper-text); }
.post-body a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.post-body strong { color: var(--color-text); }

.post-body blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body blockquote cite { display: block; margin-top: var(--space-3); font-size: var(--text-sm); font-style: normal; color: var(--color-copper-text); }

.post-body img { border-radius: var(--radius-lg); }
.post-body figure { margin: var(--space-8) 0; max-width: none; }
.post-body figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}
.post-body hr { margin: var(--space-12) 0; border: 0; border-top: 1px solid var(--color-border); }

.post-body table {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
    margin: var(--space-8) 0;
    font-size: var(--text-sm);
}
.post-body th, .post-body td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.post-body th { font-weight: var(--weight-semibold); color: var(--color-text); }

.post-body code {
    font-size: 0.92em;
    padding: 0.15em 0.4em;
    background: var(--color-paper-alt);
    border-radius: var(--radius-sm);
}
.post-body pre {
    margin: var(--space-8) 0;
    padding: var(--space-5);
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; color: inherit; }

/* Tags + the standing editorial note */
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-10); }
.post-tag {
    font-size: var(--text-xs);
    padding: 6px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    color: var(--color-text-secondary);
}
.post-tag:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.post-note { margin-top: var(--space-10); }
.post-note p { font-size: var(--text-sm); margin: 0; }

/* ── Search form ──────────────────────────────────────────────────────── */
.post-search { display: flex; gap: var(--space-3); margin-top: var(--space-6); max-width: 30rem; }
.post-search input[type="search"] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--text-sm);
}
.post-search input[type="search"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── WordPress output guards ──────────────────────────────────────────── */
/* Block alignments would otherwise escape the reading measure. */
.post-body .alignwide,
.post-body .alignfull { max-width: none; }
.post-body .alignfull { margin-inline: calc(50% - 50vw); width: 100vw; }
.post-body .alignleft { float: left; margin: 0 var(--space-6) var(--space-4) 0; max-width: 45%; }
.post-body .alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); max-width: 45%; }
.post-body .aligncenter { margin-inline: auto; }
.post-body .wp-caption { max-width: 100%; }
.post-body .wp-caption-text { font-size: var(--text-sm); color: var(--color-text-secondary); text-align: center; }
.post-body .wp-block-image { margin-block: var(--space-8); }
.post-body .wp-block-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Give editor "buttons" the site's real button, not WordPress's. */
.post-body .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
}
.post-body .wp-block-button__link:hover { background: var(--color-primary-dark); }
.post-body .wp-block-embed, .post-body .wp-block-embed iframe { max-width: 100%; }
.post-body .wp-block-embed__wrapper { position: relative; }
.post-body .wp-block-separator { margin: var(--space-12) auto; border: 0; border-top: 1px solid var(--color-border); }
.post-body .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The admin bar is fixed; keep it off the sticky site header. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .post-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .post-body h2 { font-size: var(--text-2xl); }
    .post-body .alignleft, .post-body .alignright { float: none; max-width: 100%; margin-inline: 0; }
    .post-body .alignfull { margin-inline: 0; width: 100%; }
}