/* =========================================
   MODULE: BLOG DETAIL — light theme
   ========================================= */

/* Your Care Solutions brand override — scoped to each top-level section here
   (they're siblings, not nested) so the rest of the theme (nav, footer,
   buttons) keeps its existing tokens untouched. */
.post-header, .post-hero-img, .post-body, .post-author, .post-related {
  --clr-black:     #1f2a30;
  --clr-accent:    #29AAE2;
  --clr-accent-dk: #1f7faa;
  --clr-teal:      #0c6e62;
  --clr-teal-dk:   #084a42;
  --clr-mid:       #f7f5f0;
  --clr-mid-dk:    #e3e8e9;
  --clr-muted:     #59666d;
  --clr-border:    #e3e8e9;
  --font-display:  "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:     "Inter", "Segoe UI", system-ui, sans-serif;
}

/* POST HEADER */
.post-header { background: var(--clr-white); padding-top: calc(6rem + clamp(2rem, 4vh, 4rem)); padding-bottom: clamp(3rem, 5vh, 4rem); }
.post-header__inner { display: flex; flex-direction: column; gap: 1.75rem; max-width: 860px; }
.post-header__meta-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--clr-border); padding-bottom: 1.25rem; }
.post-header__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-muted); transition: color var(--duration-fast); }
.post-header__back:hover { color: var(--clr-accent); }
.post-header__category { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: #ffffff; background: var(--clr-accent); padding: 0.3rem 0.75rem; }
.post-header__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.0; letter-spacing: 0.01em; color: var(--clr-black); opacity: 0; transform: translateY(20px); animation: postFadeUp 0.8s var(--ease-out-expo) 0.15s forwards; }
.post-header__byline { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: postFadeUp 0.6s var(--ease-out-expo) 0.35s forwards; }
.post-header__author-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--clr-accent); color: #ffffff; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.post-header__author-info { display: flex; flex-direction: column; gap: 0.15rem; }
.post-header__author-name { font-size: 0.85rem; color: var(--clr-black); font-weight: 400; }
.post-header__date-read { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--clr-muted); }
.post-header__share { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.post-header__share-btn { background: none; border: 1px solid var(--clr-border); color: var(--clr-muted); font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.9rem; cursor: pointer; transition: border-color var(--duration-fast), color var(--duration-fast); }
.post-header__share-btn:hover { border-color: var(--clr-teal); color: var(--clr-teal); }
.post-header__share-confirm { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-teal); }
@keyframes postFadeUp { to { opacity: 1; transform: translateY(0); } }

/* HERO IMAGE */
.post-hero-img { background: var(--clr-white); padding-bottom: clamp(3rem, 5vh, 5rem); }
.post-hero-img__wrap { overflow: hidden; max-height: 520px; background: var(--clr-mid); }
.post-hero-img__img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 21/9; }

/* ARTICLE BODY */
.post-body { background: var(--clr-white); padding-bottom: clamp(4rem, 8vh, 7rem); }
.post-body__inner { display: grid; grid-template-columns: 200px 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }

/* TOC */
.post-toc { position: sticky; top: 6rem; border-top: 2px solid var(--clr-teal); padding-top: 1rem; }
.post-toc__heading { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: 0.75rem; }
.post-toc__list { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; counter-reset: toc; }
.post-toc__link { display: block; font-size: 0.8rem; color: var(--clr-muted); padding: 0.35rem 0; border-bottom: 1px solid var(--clr-border); transition: color var(--duration-fast), padding-left var(--duration-fast); line-height: 1.4; }
.post-toc__link:hover, .post-toc__link.is-active { color: var(--clr-teal); padding-left: 0.5rem; }

/* CONTENT */
.post-content { max-width: 68ch; }
.post-content section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.post-content__lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--clr-black); line-height: 1.7; font-weight: 400; margin-bottom: 1.5rem; }
.post-content p { font-size: clamp(0.95rem, 1.4vw, 1.05rem); color: var(--clr-muted); line-height: 1.8; font-weight: 300; margin-bottom: 1.25rem; }
.post-content h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.75rem); letter-spacing: 0.02em; line-height: 1.05; color: var(--clr-black); margin-bottom: 1.25rem; margin-top: 0.5rem; scroll-margin-top: calc(var(--nav-height, 5rem) + 1.5rem); }
.post-content__quote { border-left: 3px solid var(--clr-accent); padding: 1.25rem 1.5rem; margin: 2rem 0; background: rgba(41,170,226,0.08); }
.post-content__quote p { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.8rem); letter-spacing: 0.02em; line-height: 1.2; color: var(--clr-black); margin-bottom: 0; font-weight: 400; }
.post-content__image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.post-content__image-pair figure { display: flex; flex-direction: column; gap: 0.5rem; }
.post-content__image-pair img { width: 100%; height: auto; object-fit: contain; background: var(--clr-mid); aspect-ratio: 9/16; }
.post-content__image-pair figcaption { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--clr-muted); text-transform: uppercase; }
.post-content__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2rem 0; border: 1px solid var(--clr-border); }
.post-content__stat { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1.25rem; border-right: 1px solid var(--clr-border); }
.post-content__stat:last-child { border-right: none; }
.post-content__stat--accent { background: var(--clr-accent); }
.post-content__stat--accent .post-content__stat-num, .post-content__stat--accent .post-content__stat-lbl { color: #ffffff; }
.post-content__stat-num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--clr-black); line-height: 1; }
.post-content__stat-lbl { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted); }
.post-content__list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0; }
.post-content__list li { font-size: clamp(0.95rem, 1.4vw, 1.05rem); color: var(--clr-muted); line-height: 1.6; font-weight: 300; padding-left: 1.5rem; position: relative; }
.post-content__list li::before { content: "→"; position: absolute; left: 0; color: var(--clr-teal); font-size: 0.9rem; }
.post-content__tags { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--clr-border); margin-top: 2rem; }
.post-content__tag-label { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-muted); margin-right: 0.4rem; }
.post-content__tag { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted); border: 1px solid var(--clr-border); padding: 0.3rem 0.75rem; transition: border-color var(--duration-fast), color var(--duration-fast); }
.post-content__tag:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

/* AUTHOR */
.post-author { background: var(--clr-mid); padding-block: clamp(3rem, 5vh, 4rem); border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); }
.post-author__inner { display: flex; align-items: flex-start; gap: 1.5rem; max-width: 700px; }
.post-author__avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--clr-accent); color: #ffffff; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.post-author__info { display: flex; flex-direction: column; gap: 0.5rem; }
.post-author__name { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--clr-black); }
.post-author__bio { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.65; font-weight: 300; }

/* RELATED */
.post-related { background: var(--clr-white); padding-block: clamp(4rem, 7vh, 6rem); }
.post-related__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--clr-border); }
.post-related__heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: 0.02em; color: var(--clr-black); }
.post-related__all { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-muted); transition: color var(--duration-fast); }
.post-related__all:hover { color: var(--clr-accent); }
.post-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-related__card { border: 1px solid var(--clr-border); transition: border-color var(--duration-fast); }
.post-related__card:hover { border-color: var(--clr-accent); }
.post-related__card-link { display: flex; flex-direction: column; height: 100%; }
.post-related__card-media { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--clr-mid); }
.post-related__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-out-expo); }
.post-related__card-link:hover .post-related__card-media img { transform: scale(1.05); }
.post-related__card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; flex: 1; }
.post-related__card-date { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted); }
.post-related__card-title { font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: 0.02em; line-height: 1.1; color: var(--clr-black); transition: color var(--duration-fast); }
.post-related__card-link:hover .post-related__card-title { color: var(--clr-accent); }

@media (max-width: 900px) {
  .post-body__inner { grid-template-columns: 1fr; }
  .post-toc { position: static; border-top: none; border-bottom: 1px solid var(--clr-border); padding-bottom: 1.5rem; margin-bottom: 0.5rem; }
  .post-toc__list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
  .post-toc__link { border: 1px solid var(--clr-border); padding: 0.3rem 0.6rem; font-size: 0.7rem; }
  .post-content__stats { grid-template-columns: repeat(2, 1fr); }
  .post-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .post-header__share { display: none; }
  .post-content__image-pair { grid-template-columns: 1fr; }
  .post-content__stats { grid-template-columns: 1fr 1fr; }
  .post-related__grid { grid-template-columns: 1fr; }
}