/* Shared styling for every blog post (what-to-expect, what-is-therapy, and anything copied from _post-template.html).
   Edit here once and all posts change together. Uses the colors/fonts defined in each page's :root. */

/* Hero label (category link) */
.page-eyebrow { position: relative; z-index: 1; font-size: 0.85rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--green-pale); margin-bottom: 1.2rem; display: block; text-decoration: none; }
a.page-eyebrow:hover { color: var(--white); }

/* "All writing" / Previous / Next links under the hero */
.post-nav { max-width: 900px; margin: 0 auto; padding: 2rem 3rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; }
.post-back { display: inline-block; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.post-back:hover { color: var(--green-light); }

/* Video */
.video-wrap { max-width: 900px; margin: 0 auto; padding: 1.6rem 3rem 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--black) center / cover no-repeat; border: 1.5px solid var(--green); box-shadow: 8px 8px 0 var(--green); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-soon { display: flex; align-items: center; justify-content: center; color: var(--green-pale); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(13,13,13,0.35); border: none; cursor: pointer; color: var(--white); font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; }
.video-play:hover { background: rgba(13,13,13,0.15); }
.video-play svg { width: 72px; height: 72px; }
.video-note { margin-top: 1.4rem; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gray); text-align: center; }

/* Written post */
.post-body { max-width: 680px; margin: 0 auto; padding: 2rem 3rem; }
.post-body p { font-size: 1.02rem; line-height: 1.95; color: #444; margin-bottom: 1.4rem; }
.post-body a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.post-body h2 { color: var(--green); line-height: 1.3; margin: 2.6rem 0 1.2rem; }
.post-body p.post-pull { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 300; font-style: italic; line-height: 1.35; color: var(--green); margin: 2.2rem 0; }
.post-body ul, .post-body ol { margin: 0 0 1.4rem 1.5rem; }
.post-body li { font-size: 1.02rem; line-height: 1.95; color: #444; margin-bottom: 0.3rem; }
.post-rule { border: none; border-top: 1px solid var(--rule); margin: 2.6rem 0 1.4rem; }
.post-body p.post-disclaimer { font-size: 0.85rem; line-height: 1.8; font-style: italic; color: var(--gray); }

@media (max-width: 900px) {
  .post-nav { padding: 2rem 2rem 0; }
  .video-wrap { padding: 1.6rem 2rem 0; }
  .post-body { padding: 2rem 2rem; }
}