/* =============================================
   Single Post V3 — strommeninc.com
   Covers: single.php (native blog post template).
   Card / grid / badge classes come from blog-overhaul.css
   (loaded sitewide); this file styles the single-post-only
   pieces: hero, meta, content column, share, nav, related header.
   ============================================= */

/* --- Container overrides (match blog/archive behavior) --- */
body.single-post .ast-container {
    max-width: 1240px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
body.single-post #primary {
    margin: 1.5em 0 2.5em !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* --- Two-column article layout ---
   A single centred 780px column left ~330px of dead margin either side at
   1440 and read as a narrow strip floating in the page. Anchoring the article
   with a left rail (author + sticky contents) fills that space and gives the
   text a left edge to sit against, instead of widening the measure past what's
   comfortable to read. */
.strommen-single-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.strommen-single-rail {
    position: sticky;
    top: 96px;             /* clears the fixed site header */
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 24px;
    border-right: 1px solid #e6e4e9;
    scrollbar-width: thin;
}

/* --- author card --- */
.strommen-single-author {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
}
.strommen-single-author img,
.strommen-single-author .strommen-avatar-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Initials badge for authors with no tutor crop. Inline styles from
   strommen-author-avatar.php set the colour and size; these are the bits that
   don't vary. */
.strommen-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    overflow: hidden;
}
/* The wrapper's fixed 48px wins over the inline px from the PHP helper. */
.strommen-single-author .strommen-avatar-initials { font-size: 19px !important; }
.strommen-single-author-meta {
    display: flex;
    flex-direction: column;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b6b7b;
    min-width: 0;
}
.strommen-single-author-name {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 0.9rem;
}

/* --- table of contents --- */
.strommen-toc-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 12px;
}
.strommen-toc ul { list-style: none; margin: 0; padding: 0; }
.strommen-toc li { margin: 0 0 10px; line-height: 1.4; }
.strommen-toc a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    color: #2b2b3a !important;
    text-decoration: none;
}
.strommen-toc a:hover { color: #D81818 !important; text-decoration: underline; }
/* h3s indent and step down, so the outline reads as a hierarchy */
.strommen-toc-l3 { padding-left: 14px; }
.strommen-toc-l3 a { font-size: 0.82rem; color: #6b6b7b !important; }

/* --- Hero --- */
.strommen-single-hero {
    max-width: 100%;
    margin: 0 0 28px;
    text-align: left;
}

.strommen-single-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #D81818 !important;
    text-decoration: none !important;
    margin-bottom: 16px;
}
.strommen-single-eyebrow::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 3px;
    background: #D81818;
    margin-right: 12px;
}

.strommen-single-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    text-transform: none;
    margin: 0 0 16px;
}

.strommen-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b6b7b;
}
.strommen-single-meta a {
    color: #6b6b7b !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.strommen-single-meta a:hover {
    color: #D81818 !important;
}

/* --- Featured image ---
   Two things were wrong here sitewide and they compounded each other:

   1. width:100%/height:auto renders the image at its own aspect ratio. 86 of
      325 published posts have a PORTRAIT featured image, and the worst (the
      Spanish conjugation series, 384x1200) were being upscaled to 980px wide
      and ~3,000px tall — an entire screen of image before any text.
   2. The wrapper was 980px while .strommen-single-content is 780px. Both are
      centred, so the image and the body text started at different x positions
      and the column read as misaligned.

   Fix: match the text column width and crop to a fixed banner height. Now every
   post gets the same masthead regardless of what shape the image is.
   Per-post overrides go in the block below. */
.strommen-single-featured {
    max-width: 100%;
    margin: 0 0 36px;
}
.strommen-single-featured img {
    width: 100%;
    /* 240px, not 300. Garrett signed off on a 230px band on the Rome post; the
       first version of this sitewide rule used 300 and silently made that post
       taller again than the height he'd already approved. Keep the global
       default close to the number that was accepted. */
    height: 240px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 14px;
    display: block;
}

@media (max-width: 782px) {
    .strommen-single-featured img { height: 170px; }
}

/* Portrait sources are almost always infographics (the conjugation series is
   384x1200), where the title sits at the top and a centred crop shows a
   meaningless middle slice of a verb table. Anchor those to the top and give
   them a little more height, since a tall graphic has more to say.
   Body class comes from mu-plugins/strommen-featured-image-fit.php. */
body.has-featured-tall .strommen-single-featured img {
    height: 300px;
    object-position: center top;
}
@media (max-width: 782px) {
    body.has-featured-tall .strommen-single-featured img { height: 200px; }
}

/* --- Per-post crop overrides ---
   Only needed when the default 35% anchor lands badly on a specific image. */

/* Rome guide: 2014 Da Baffetto kitchen shot. At 35% the pizzaioli lose their
   heads; 30% keeps them. Height restated explicitly — this is the size Garrett
   approved, and it must not drift when the global default changes. */
body.postid-3955 .strommen-single-featured img {
    height: 230px;
    object-position: center 30%;
}
@media (max-width: 782px) {
    body.postid-3955 .strommen-single-featured img { height: 165px; }
}

/* --- Content column ---
   820px is ~78 characters at this font size — still inside the readable range
   (past ~85 the eye loses its place returning to the next line), but less of a
   strip against the 1240px blog index you arrive from. */
.strommen-single-content {
    max-width: 100%;   /* the grid column already sets the measure (~840px) */
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2b2b3a;
}

/* Anchored headings must clear the fixed header when jumped to from the TOC. */
.strommen-single-content h2[id],
.strommen-single-content h3[id] { scroll-margin-top: 100px; }

/* --- Wide media breakout ---
   Prose wants a narrow measure; maps, galleries and the shareable block want
   room. Before this, the Rome map split 780px into a 439px map and a 325px
   list — cramped for 21 pins across a city.

   Widen those blocks out of the column without touching the text width. Uses a
   margin offset rather than the usual translateX(-50%): Leaflet positions its
   own panes with transforms, and a transformed ancestor creates a containing
   block that breaks popups and controls. */
.strommen-single-content .rome-map,
.strommen-single-content .rome-new26,
.strommen-single-content .gallery {
    width: 100%;
    max-width: none;
}

/* --- Mobile: rail stacks above the article --- */
@media (max-width: 1024px) {
    .strommen-single-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .strommen-single-rail {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid #e6e4e9;
    }
    /* Long contents lists shouldn't push the article off the first screen. */
    .strommen-toc { max-height: 210px; overflow-y: auto; }
}
.strommen-single-content h2,
.strommen-single-content h3,
.strommen-single-content h4 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1a1a2e;
    text-transform: none;
    line-height: 1.2;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
.strommen-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.strommen-single-content a {
    color: #D81818;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.strommen-single-content blockquote {
    border-left: 4px solid #F0D818;
    margin: 1.5em 0;
    padding: 0.4em 0 0.4em 1.2em;
    color: #44445a;
    font-style: italic;
}

/* --- Footer: tags + share --- */
.strommen-single-footer {
    max-width: 780px;
    margin: 36px auto 0;
    padding-top: 24px;
    border-top: 1px solid #ececf1;
}
.strommen-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.strommen-single-tags a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #44445a !important;
    background: #f4f4f5;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.strommen-single-tags a:hover {
    background: #1a1a2e;
    color: #fff !important;
}
.strommen-single-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.strommen-single-share-label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #1a1a2e;
    margin-right: 4px;
}
.strommen-single-share a {
    display: inline-block;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a2e !important;
    border: 1.5px solid #1a1a2e;
    border-radius: 24px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.strommen-single-share a:hover {
    background: #D81818;
    border-color: #D81818;
    color: #fff !important;
}

/* --- Prev / Next nav --- */
.strommen-single-nav {
    max-width: 780px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.strommen-single-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.strommen-single-nav a:hover {
    border-color: #1a1a2e;
    transform: translateY(-2px);
}
.strommen-single-nav-next {
    text-align: right;
}
.strommen-single-nav-dir {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #D81818;
}
.strommen-single-nav-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a2e;
}

/* --- Related section --- */
.strommen-single-related {
    max-width: 1240px;
    margin: 56px auto 0;
}
.strommen-single-related-eyebrow {
    display: flex;
    align-items: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #D81818;
    margin: 0 0 10px;
}
.strommen-single-related-eyebrow::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 3px;
    background: #D81818;
    margin-right: 12px;
}
.strommen-single-related-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #1a1a2e;
    text-transform: none;
    margin: 0 0 24px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .strommen-single-nav {
        grid-template-columns: 1fr;
    }
    .strommen-single-nav-next {
        text-align: left;
    }
    .strommen-single-content {
        font-size: 1rem;
    }
}