/* ============================================================
   BLOG
   Scoped to .blog-* and .post-* so nothing here collides with
   the existing site rules. Uses the tokens already defined in
   style.css (--navy, --pop, --ink-soft, --off-white, etc.).
   ============================================================ */

/* ---------- Article hero headline ----------
   The blog INDEX keeps the site's native hero h1 (big, uppercase,
   gold) because "Before You Say That" is a short brand mark and
   that treatment is correct for it.

   ARTICLE headlines are sentence-length, so they have to opt out of
   three global rules that would otherwise win:
     h1,h2,h3,h4        -> text-transform: uppercase
     .hero h1           -> font-size: clamp(48px, 8vw, 100px)  (0,1,1)
     .hero-inner-page h1 -> word-spacing: 100vw on mobile      (0,1,1)
   A bare .post-hero-h1 class is (0,1,0) and loses to all of them, so
   this is deliberately written at (0,2,2) to win everywhere. Media
   queries do not add specificity, so this one rule beats their
   mobile overrides too. */
.hero-inner-page h1.post-hero-h1 {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-weight: 900;
  color: var(--gold);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;   /* opt out of the global h1 uppercase */
  word-spacing: normal;   /* opt out of the mobile one-word-per-line hack */
  text-wrap: balance;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .hero-inner-page h1.post-hero-h1 {
    font-size: clamp(25px, 5.4vw, 32px);
    max-width: 18ch;
  }
}
.blog-hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 22px;
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.blog-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.blog-hero-meta span + span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pop);
  flex: 0 0 auto;
}

/* ---------- Article shell ----------
   The global .wrap is only a max-width centering box (no padding);
   each section supplies its own gutter. Without the horizontal
   padding here, body copy runs edge-to-edge on phones. */
.post-shell { padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 40px) clamp(40px, 6vw, 72px); }
.post-col { max-width: 720px; margin: 0 auto; }

.post-lead-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Standfirst / intro paragraph */
.post-standfirst {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}

/* ---------- Body copy ----------
   Left-aligned rather than justified (the .pa-main justify works
   for short practice blurbs, but opens rivers in long-form). */
.post-body { font-size: 16px; line-height: 1.8; color: var(--ink-soft); }
.post-body > * + * { margin-top: 20px; }
.post-body p { text-align: left; text-wrap: pretty; }
.post-body strong { color: var(--navy); font-weight: 700; }

.post-body h2 {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-top: 44px;
  text-transform: none;
  text-align: left;
  text-wrap: balance;
}
.post-body h3 {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 30px;
  letter-spacing: -.005em;
}

.post-body ul { list-style: none; margin: 0; padding: 0; }
.post-body ul li {
  position: relative;
  padding: 5px 0 5px 24px;
  line-height: 1.75;
}
.post-body ul li + li { margin-top: 2px; }
.post-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pop);
}

.post-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pop); }
.post-body a:hover { color: var(--pop); }

/* Pull-quote / callout */
.post-callout {
  border-left: 3px solid var(--pop);
  background: var(--off-white);
  padding: 20px 24px;
  margin-top: 32px;
}
.post-callout p {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  text-align: left;
}

/* ---------- Founder video ----------
   No native controls on purpose: the avatar reads as real at
   normal size but shows artifacts when zoomed or fullscreened.
   Click-to-play is handled by hoxieToggleVideo(). */
.post-video {
  position: relative;
  margin: clamp(32px, 5vw, 48px) 0 0;
  cursor: pointer;
  background: var(--navy-dark);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.post-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* clicks belong to the figure, not the player */
}
.post-video .playbtn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(51, 48, 56, .74);
  border: 2px solid rgba(255, 255, 255, .9);
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
  pointer-events: none;
}
.post-video:hover .playbtn { background: var(--pop); transform: translate(-50%, -50%) scale(1.06); }
.post-video .playbtn svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.post-video.is-playing .playbtn { opacity: 0; }
/* No mp4 yet: drop the play button + pointer so it reads as a still photo. */
.post-video.is-unavailable { cursor: default; }
.post-video.is-unavailable .playbtn { display: none; }
.post-video figcaption {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding-top: 14px;
}
.post-video-wrap { margin: clamp(32px, 5vw, 48px) 0 0; }
.post-video-wrap .post-video { margin-top: 0; }

/* ---------- In-article CTA ---------- */
.post-cta {
  margin-top: clamp(36px, 5vw, 52px);
  background: var(--navy);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
}
.post-cta h2 {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  text-wrap: balance;
}
.post-cta p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  max-width: 46ch;
  margin: 0 auto 22px;
}
.post-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Author strip ---------- */
.post-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.post-author img {
  width: 60px; height: 60px;
  object-fit: cover;
  object-position: top center;
  flex: 0 0 auto;
}
.post-author-name {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}
.post-author-role {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pop);
  margin-top: 3px;
}
.post-author p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Legal note under each article ---------- */
.post-legal {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--off-white);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.post-legal strong { color: var(--navy); }

/* ---------- Blog index ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(32px, 4vw, 44px);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--pop);
}
.blog-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.blog-card-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.blog-card-cat {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pop);
}
.blog-card h2 {
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.blog-card p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.blog-card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.blog-card-foot .blog-card-more { color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.blog-card:hover .blog-card-more { color: var(--pop); }
.blog-card-video {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pop);
}
.blog-card-video svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- Back link ---------- */
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Gotham', 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 26px;
}
.post-back:hover { color: var(--pop); }
.post-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-body { font-size: 15.5px; }
  .post-author { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card, .post-video .playbtn { transition: none; }
  .blog-card:hover { transform: none; }
}