/*
 * Living Coastal — Post Header (Phase B) — LOCKED COMPOSITION 2026-07-20
 *
 * WPCodeBox 2 → CSS Snippets:
 *   Title:   CSS — Post Header
 *   Run on:  Frontend
 *   Activate: yes
 *
 * Transcribed from the approved visual source of truth
 * (scratchpad/header-3forms.html → artifact 1848022c). One layout, three hero
 * forms (Wide / Standard / None). Geometry, sizes, spacing and colors come from
 * that mock; fonts are the brand fonts (Montserrat headings / Mulish body) — the
 * mock used system-ui only as a stand-in.
 *
 * Composition:
 *   - Breadcrumb, title, deck and byline all sit in a centered 880px reading
 *     column (.lc-col), left-aligned within it. (820 at the 07-20 lock; widened
 *     to 880 on 07-22 to match Blog Style Guide v1.1.)
 *   - Title is always on white, ABOVE the image — never overlaid.
 *   - Hero: fixed 340px crop (196px mobile). Wide = full header width; Standard
 *     = 880px content width. Aside card (.lc-aside-card) floats the bottom-right
 *     corner at bottom:-54px in BOTH.
 *   - None form: no hero; the aside becomes a gold-accent deck line under title.
 *   - Mobile (<=640px): the card drops to position:static full-width below the
 *     image (the covering-the-screen bug this comp fixed).
 *
 * Brand tokens: navy #334376 / gold #d0a667 / teal #26a9e1.
 */

/* section.lc-post-header (0,1,1 specificity) beats Bricks's .brxe-section default,
   which ships 100px top/bottom padding — far too much for a post header. */
section.lc-post-header {
  width: 100%;
  padding: 24px 0 28px;
}

/* Outer padding wrapper — caps the wide-hero breakout width and centers it. */
.lc-hdr-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 34px;
}

/* The centered reading column: breadcrumb, title, deck, byline all live here,
   left-aligned to its left edge. Two .lc-col blocks (top: bc+title+deck,
   bottom: byline) straddle the hero; in None mode the hero is empty so they
   read as one continuous column. */
.lc-col {
  max-width: 880px;   /* v1.1 2026-07-22: 820→880 to match the wider blog reading column */
  margin: 0 auto;
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.lc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  color: #5a6473;
  margin: 0 0 11px;
}
.lc-bc-home {
  color: #26a9e1;
  font-weight: 600;
  text-decoration: none;
}
.lc-bc-home:hover,
.lc-bc-home:focus {
  color: #334376;   /* navy on hover; no underline (per Brad's no-hover-underline pref) */
}
.lc-bc-sep {
  color: #c7ccd8;
}
.lc-bc-crumb {
  color: #5a6473;
}
/* A crumb becomes a link only when its category has a "Hub URL" set (2026-07-23).
   Deliberately quieter than .lc-bc-home — teal would make the trail read as three
   competing links. Grey at rest with the same navy hover shift, no underline
   (Brad's standing no-hover-underline pref). */
a.lc-bc-crumb--link {
  color: #5a6473;
  font-weight: 600;
  text-decoration: none;
}
a.lc-bc-crumb--link:hover,
a.lc-bc-crumb--link:focus {
  color: #334376;
}

/* ─── Title ──────────────────────────────────────────────────────────────── */
.lc-post-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #1b2333;
  margin: 0;
  max-width: 790px;    /* ~90% of the 880 column on desktop (intentional whitespace + a
                          more balanced wrap); no effect on mobile where the column is <790 */
  text-wrap: pretty;
}

/* ─── Deck line (None form — replaces the floating card) ─────────────────── */
.lc-deck {
  max-width: 880px;   /* v1.1: matches .lc-col reading width */
  margin: 16px 0 0;
  padding: 3px 0 3px 18px;
  border-left: 4px solid #d0a667;
  font-family: 'Mulish', sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: #33405a;
}

/* ─── Hero (Wide / Standard) ─────────────────────────────────────────────── */
.lc-hero {
  position: relative;
  margin: 22px 0 0;
}
/* Standard = constrained to the reading column; Wide = full .lc-hdr-in width. */
.lc-hero--std {
  max-width: 880px;   /* v1.1: matches .lc-col reading width */
  margin-left: auto;
  margin-right: auto;
}
.lc-hero-crop {
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
}
.lc-featured-image,
.lc-hero-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Floating aside card ────────────────────────────────────────────────── */
.lc-aside-card {
  position: absolute;
  bottom: -54px;              /* hangs below the image to reveal more of it */
  right: 22px;
  z-index: 2;
  width: 322px;
  padding: 20px 24px;
  background: linear-gradient(150deg, #334376, #26a9e1);
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 30, 60, 0.30);
}
.lc-accent-bar {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: #d0a667;
  margin-bottom: 12px;
}
.lc-aside-text {
  font-family: 'Mulish', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
}

/* ─── Byline (bottom column) ─────────────────────────────────────────────── */
.lc-byline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  margin: 42px 0 0;          /* independent of the card: card is bottom-right,
                                byline is bottom-left — they share the band */
}
.lc-byline-avatar {
  width: 68px;              /* was 52 — sized to match the 3-line text block (~74px) for balance */
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e7ee;
  flex-shrink: 0;
}
.lc-byline-body {
  min-width: 0;
}
.lc-byline-namerow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.lc-byline-name {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1b2333;
  text-decoration: none;
}
.lc-byline-name:hover,
.lc-byline-name:focus {
  color: #26a9e1;
}
.lc-cat-pill {
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #334376;
  background: #eef1f7;
  padding: 2px 9px;
  border-radius: 20px;
}
.lc-byline-cred {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  color: #5a6473;
  margin: 3px 0 0;
}
.lc-byline-meta {
  font-family: 'Mulish', sans-serif;
  font-size: 12.5px;
  color: #5a6473;
  margin: 2px 0 0;
}
.lc-updated {
  font-weight: 600;
}

/* ─── None mode: settle the lone byline ──────────────────────────────────────
   In Wide/Standard the byline's 42px top gap is tuned to drop it to the bottom
   of the hero band, balanced by the floating aside card on the right. None mode
   has neither hero nor card, so that gap reads as the byline "floating alone."
   The `.lc-deck` line renders in None mode ONLY, so :has(.lc-deck) scopes this
   to None with zero effect on the other two modes. Tighten the gap and add a
   hairline rule so the byline reads as a deliberate end-of-header, sharing the
   column's left edge with the breadcrumb/title/deck above it (chosen 2026-07-23,
   option B over a centered byline — centering broke the header's single left
   edge). Specificity (0,3,0) also carries the divider through the mobile query. */
.lc-hdr-in:has(.lc-deck) .lc-byline {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e4e7ee;
}

/* ─── Mobile (≤640px) — the critical fix ─────────────────────────────────── */
/* The card MUST leave the float and flow full-width below the image, or it
   covers the screen on phones (the bug this composition fixed). A normal media
   query is fine live — the demo used a container query only to show phone +
   desktop side by side on one page. */
@media (max-width: 640px) {
  section.lc-post-header {
    padding: 18px 0 22px;
  }
  .lc-hdr-in {
    padding: 0 16px;
  }
  .lc-post-title {
    font-size: 24px;
  }
  .lc-hero {
    margin-top: 16px;
  }
  .lc-hero-crop {
    height: 196px;
  }
  .lc-aside-card {
    position: static;
    width: auto;
    margin-top: 13px;
    box-shadow: 0 8px 20px rgba(20, 30, 60, 0.18);
  }
  .lc-byline {
    margin-top: 22px;
  }
  .lc-deck {
    font-size: 17px;
  }
}