/* ============================================================
   16-blog.css — post archive and single post
   (sidebar widgets live in 17-sidebar.css)
   ============================================================

   Replaces css/blog3.css, which predated the 2026-08-29 rebuild and was
   carried across untouched. Design spec:
   docs/superpowers/specs/2026-09-15-blog-css-refactor-design.md

   THE LAYOUT IS UNCHANGED. Every measurement, clamp and spacing value here
   came across from blog3.css as-is. What changed is the code around them:
   colour comes from tokens, the selectors are written once instead of three
   times, and the file is inside bin/verify-css.sh rather than exempted from it.

   Markup contract — emitted by home.php, archive.php and search.php:

     .fl-archive.container
       .fl-content.fl-content-left
         .rw-masonry-grid-container.rw-blog-layout3
           article
             .rw-post-image                  <- only when the post has a thumb
               .rw-post-image-child           (background-image, inline style)
                 a > .rw-overlay-item-container > i.fas.fa-link
             .rw-post-content-wrapper[.rw-full-width]
               h2.entry-title > a
               .entry-meta > p
               .rw-blog-excerpt > p
               .post-meta-categories > a
       .fl-sidebar.fl-sidebar-right

   `.rw-full-width` is added by the template when the post has NO featured
   image, so the two card variants are distinguished in markup, not by :has().

   WHY THE BODY CLASSES ARE GONE. blog3.css wrote every archive rule three
   times, once each for `.blog`, `.search` and `.archive`. All three templates
   put `.rw-blog-layout3` on the grid container, so the class alone is
   sufficient and 93 selector lines collapse to 31. If a fourth template ever
   needs these cards, it gets them by adding that class, not by extending a
   selector list.
*/


/* ── Containers and alignment ────────────────────────────────
   THESE TWO RULES ARE WHY THE BLOG NOW LINES UP WITH ITS TITLE BAND, and the
   reasoning is worth keeping because the obvious version of it is wrong.

   The band splits the job across two elements: .rw-band__inner pads with
   --section-padding-lr, .rw-band__content caps at --row-content-width and
   centres. Its content box is therefore
   min(--row-content-width, viewport - 2 * --section-padding-lr).

   Here there is only ONE element, so it has to do both jobs — and because
   box-sizing is border-box site-wide, `max-width: 1100px` plus padding gives a
   content box NARROWER than 1100, not equal to it. That is exactly the trap
   that left /reviews/ 120px short. The padding is therefore added back into
   the max-width, which makes the content box resolve to --row-content-width
   with the padding outside it.

   The padding MUST be --section-padding-lr and not blog3.css's
   `calc(var(--section-padding-lr) + 20px)`. The +20px version was 80px against
   the band's 60px, so the two could never agree: the content box sat 60px right
   of the heading and 120px narrower (measured, 1504px viewport). Matching the
   band's padding token makes them agree at EVERY width rather than at one
   hand-tuned one — below the cap both resolve to `viewport - 2 * padding`, and
   above it both resolve to --row-content-width centred.

   The row's -15px margin and the column's +15px padding cancel, so the grid
   gutter needs no allowance here. */
.fl-archive.container,
.single .post-container {
    max-width: calc(var(--row-content-width) + 2 * var(--section-padding-lr));
    margin-inline: auto;
    padding: 50px var(--section-padding-lr);

}

.single .fl-page-content {
    background-color: var(--surface-alt);
}

.fl-archive .fl-content,
.single .post-container .fl-content {
    margin: 20px 0;
}

/* Tighter vertical rhythm on the archive between 769px and 1380px, restored
   above it. Carried over from blog3.css, which expressed it as
   `padding: 20px 35px` / `padding: 50px calc(…)` — i.e. it also moved the
   HORIZONTAL padding to 35px in that range. Only the block axis is kept:
   changing the inline padding here would re-break the alignment above, since
   the band goes on using --section-padding-lr throughout.

   The single-post container was never in the 769px rule, only in the 1380px
   one, so it keeps 50px at every width. That asymmetry is preserved. */
@media (min-width: 769px) {
    .fl-archive.container {
        padding-block: 20px;
    }
}

@media (min-width: 1380px) {
    .fl-archive.container {
        padding-block: 50px;
    }
}


/* ── Archive grid ────────────────────────────────────────────
   Named "masonry" by the template but laid out as a single flex column; the
   masonry class is shared with the testimonials archive, which does use
   Isotope. Nothing here initialises a masonry library. */
.rw-masonry-grid-container {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.rw-blog-layout3 article {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-strong);
    border-radius: var(--rw-small-radius);
    overflow: hidden;
}


/* ── Archive card: featured image ────────────────────────────
   Present only when the post has a thumbnail. The image is a background on
   .rw-post-image-child rather than an <img>, set inline by the template, so
   it is sized here by min-height and cover.

   NOTE FOR ANYONE ADDING POSTS: the template asks for a `blog-grid-image`
   size that is not registered anywhere (the theme's only add_image_size is
   commented out at functions.php:293), so wp_get_attachment_image_src falls
   back to the full-size file. Not a CSS problem and not fixed here, but it
   means these cards download a full-resolution image. */
.rw-blog-layout3 .rw-post-image {
    width: 100%;
    min-height: clamp(200px, 25vw, 320px);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.rw-blog-layout3 .rw-post-image-child {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .5s;
}

.rw-blog-layout3 .rw-post-image:hover .rw-post-image-child,
.rw-blog-layout3 .rw-post-image:focus .rw-post-image-child {
    transform: scale(1.2);
}

/* The scrim and the link icon are both hidden at rest and revealed together.
   rgba() rather than a token deliberately: this is an opacity black behind a
   hover overlay, not a brand colour, and tokenising it would put a one-off in
   01-tokens.css that travels to every clone of this theme. */
.rw-blog-layout3 .rw-post-image-child::before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all .5s;
}

/* `color` was `#fff !important` in blog3.css. The !important was never needed:
   02-base.css colours every <a> at 0-0-1 and this selector is 0-3-1, so it
   already wins. Dropping it is what lets this file live under the harness's
   important-discipline check. */
.rw-blog-layout3 .rw-post-image a {
    display: none;
    font-size: 35px;
    color: var(--white);
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    inset: 0;
    height: 50px;
    cursor: pointer;
}

.rw-blog-layout3 .rw-post-image:hover .rw-post-image-child::before,
.rw-blog-layout3 .rw-post-image:focus .rw-post-image-child::before,
.rw-blog-layout3 .rw-post-image:hover a,
.rw-blog-layout3 .rw-post-image:focus a {
    display: flex;
}

.rw-blog-layout3 .rw-post-image:hover a .rw-overlay-item-container,
.rw-blog-layout3 .rw-post-image:focus a .rw-overlay-item-container {
    margin: auto;
}


/* ── Archive card: text ──────────────────────────────────────
   Title colour follows 12-cards.css:138,144 — every other card on this site
   takes its title from the flow and hovers to --accent-dark. blog3.css used
   #2F3F52 and #01A8F8, neither of which is in the palette; they are mapped
   here by ROLE rather than by colour distance, which is why the hover is red
   and not the nearest blue. */
.rw-blog-layout3 .rw-post-content-wrapper {
    width: 100%;
    padding: 20px;
}

/* Fluid title: 19px at 320px → 22px at 1100px */
.rw-blog-layout3 h2.entry-title {
    font-size: clamp(19px, calc(18px + 0.4vw), 22px);
    padding: 0;
    margin-bottom: 7px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
}

.rw-blog-layout3 h2.entry-title a {
    color: var(--text);
}

.rw-blog-layout3 h2.entry-title a:hover {
    color: var(--accent-dark);
}

.rw-blog-layout3 .entry-meta {
    padding: 0 0 7px;
    font-size: 12px;
}

.rw-blog-layout3 .entry-meta p {
    margin: 0;
    font-size: 12px;
}

.rw-blog-layout3 .rw-blog-excerpt {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-strong);
}

/* Fluid excerpt: 14px at 320px → 15px at 1100px */
.rw-blog-layout3 .rw-blog-excerpt p {
    font-size: clamp(14px, calc(13px + 0.3vw), 15px);
    margin-bottom: 0;
}

.rw-blog-layout3 .post-meta-categories {
    font-size: 12px;
    padding: 20px 0 0;
    text-transform: uppercase;
    font-weight: 600;
}

.rw-blog-layout3 .rw-comments-cats-meta {
    font-weight: 700;
    margin-right: 92px;
    margin-top: 20px;
    position: relative;
    overflow: visible;
}


/* ── Archive card: side-by-side ──────────────────────────────
   44% + 66% = 110%, which is not a typo introduced here — it is what
   blog3.css declared. Both are flex children with the default flex-shrink: 1,
   so they shrink proportionally and resolve to roughly 40/60. The declared
   values are kept rather than "corrected" to 40/60 because the shrunk result
   also depends on content and min-width:auto, so rewriting them is a
   behaviour change dressed up as a tidy-up. Flagged, not silently altered. */
@media (min-width: 600px) {

    .rw-blog-layout3 article {
        flex-direction: row;
    }

    .rw-blog-layout3 .rw-post-image {
        width: 44%;
    }

    .rw-blog-layout3 .rw-post-content-wrapper {
        width: 66%;
    }

    .rw-blog-layout3 .rw-post-content-wrapper.rw-full-width {
        width: 100%;
    }

}


/* ── Sidebar ─────────────────────────────────────────────────
   Widget styling lives in 17-sidebar.css, not here — it is not blog-only kit
   (the same widgets appear in Beaver Builder sidebar modules on any page).
   This file keeps only the two COLUMN rules below, which are about the blog's
   8/4 split rather than about widgets.

   A three-rule stopgap briefly sat here (list-style: none, a 10px gap between
   items, an accent hover). All three are superseded: 17-sidebar.css gives the
   list bordered rows that must sit flush, so the 10px gap actively fought it. */
@media (min-width: 992px) {

    .fl-content-left {
        border-right: none;
        padding-right: 15px;
    }

    .fl-sidebar-right {
        padding-left: 15px;
    }

}


/* ── Pagination ──────────────────────────────────────────────
   wp-pagenavi is active but cannot be verified on this site: it needs more
   published posts than posts_per_page and there are two. These rules are
   carried across faithfully and are UNVERIFIED — see spec §5.3. */
.wp-pagenavi {
    text-align: center;
}

@media (min-width: 600px) {

    a.page.smaller,
    a.page.larger,
    span.extend {
        display: none;
    }

    .wp-pagenavi a,
    .wp-pagenavi span {
        font-size: 14px;
    }

}


/* ── Single post ─────────────────────────────────────────────
   Fluid heading: 22px at 320px → 32px at 1280px.

   NOTE: h1.fl-post-title is the in-content title. On this site the visible
   heading comes from the .rw-section--page-title band above the content, so
   this rule is mostly dormant — it still applies on any template that renders
   the post title inline. */
.single .rw-post-image {
    margin-bottom: 20px;
}

.single h1.fl-post-title {
    margin-bottom: 10px;
    font-size: clamp(22px, calc(19px + 1vw), 32px);
    font-weight: 700;
}

.single .rw-post-meta {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.single .rw-post-meta p {
    margin-bottom: 0;
}

.single .rw-author-date {
    width: 50%;
    font-size: 12px;
    color: var(--text-muted);
}

.single .rw-author-date p {
    font-size: 12px;
}

.single .rw-comments-meta {
    width: 50%;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
}

.single .rw-comments-meta .post-meta-categories {
    margin-right: 5px;
}

.single .fl-post-thumb {
    text-align: center;
    margin-bottom: 20px;
}

.single .fl-post-thumb img {
    border-radius: var(--rw-small-radius);
}

.single .fl-post-header {
     margin-bottom: 20px;
}

.single .rw-blog-content {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.single .rw-blog-tags {
    display: inline-block;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.single .rw-blog-tags a {
    background: var(--surface-muted);
    padding: 7px 12px;
    margin: 0 5px 5px 0;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.single .rw-blog-tags a:hover {
    background: var(--surface-alt);
    color: var(--brand-dark);
    text-decoration: none;
}

.single .fl-post-meta-bottom {
    margin-bottom: 20px;
}

.single .rw-post-navigation {
    display: flex;
    padding: 20px 0;
    margin-bottom: 20px;
}

.single .rw-previous,
.single .rw-next {
    width: 50%;
    font-size: 14px;
    color: var(--text-muted);
}

.single .rw-next {
    text-align: right;
}

.single iframe {
    border: none;
}

.single .fl-post-meta {
    font-size: 12px;
}


/* ── Single post: Beaver Builder and comments ────────────────
   For posts whose body is built with the builder rather than the editor. */
.single .fl-post-content .fl-row-content-wrap .fl-col-group .fl-module-photo {
    margin-left: 0;
    margin-right: 30px;
}

.fl-builder .container.fl-content-full .fl-comments {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 992px) {

    .fl-builder.fl-full-width .container.fl-content-full .fl-comments {
        margin: 0;
    }

}

@media (min-width: 1100px) {

    .fl-builder.fl-full-width .container.fl-content-full .fl-comments {
        width: 100%;
    }

}