/* ==========================================================================
   Voyara — Single Article page (menu 268)
   ========================================================================== */

/* ---- Article Masthead (wnNGO) --------------------------------------------
   Design: #FAF6F0 bg py=56/32, Inner 820px centered:
   breadcrumb (top) → cat eyebrow #C2562F Geist Mono 12 → title Playfair 46/700/lh1.12
   → meta row (avatar + name 14/600 + dot + date/readtime 14 muted)
   -------------------------------------------------------------------------*/
.t4-masthead {
  background: var(--voy-bg) !important;
  border-bottom: 0 !important;
  padding-block: 56px 32px !important;
}
.t4-masthead .t4-masthead-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
/* ---- Masthead breadcrumb (pen p9yKv: fs=13 muted, gap=8, Home/cat/title) -- */
.t4-masthead .voy-art-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--voy-font-body);
  font-size: 13px;
  color: var(--voy-muted);
}
.t4-masthead .voy-art-bc-item {
  color: var(--voy-muted);
  text-decoration: none;
}
.t4-masthead .voy-art-bc-item:hover { color: var(--voy-text); }
.t4-masthead .voy-art-bc-current { color: var(--voy-text); }
/* .pen breadcrumb separator = lucide chevron-right, not a literal "/". Hide the text glyph, draw a CSS chevron. */
.t4-masthead .voy-art-bc-sep { font-size: 0; line-height: 0; display: inline-flex; align-items: center; }
.t4-masthead .voy-art-bc-sep::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-top: 1.5px solid var(--voy-muted); border-right: 1.5px solid var(--voy-muted);
  transform: rotate(45deg);
}

.t4-masthead .voy-art-cat {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-primary);
}
.t4-masthead .voy-masthead-title {
  font-family: var(--voy-font-head);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--voy-heading);
  margin: 0;
}
/* Meta row (pen dayWT): avatar + [name / date·readtime] vertical stack, gap=12 */
.t4-masthead .voy-art-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--voy-font-body);
  font-size: 14px;
  color: var(--voy-muted);
  justify-content: center;
}
/* Who column (pen N1k3Z): vertical, gap=1 */
.t4-masthead .voy-art-meta-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.t4-masthead .voy-art-meta .voy-art-author {
  color: var(--voy-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
/* Sub line (date · readtime): Inter 13 muted (pen G8Xyzh fontSize:13) */
.t4-masthead .voy-art-sub {
  font-size: 13px;
  color: var(--voy-muted);
  line-height: 1.3;
}
.t4-masthead .voy-art-dot {
  color: var(--voy-muted);
}
.t4-masthead .voy-art-meta .voy-art-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Hero image (V9u07X: 1140×480 r22, #FAF6F0 bg py=0/40) -------------- */
.voy-article-hero {
  background: var(--voy-bg);
  padding: 0 48px 40px;
}
.voy-article-hero-img {
  display: block;
  width: 100%;
  max-width: 1140px;
  height: 480px;
  object-fit: cover;
  border-radius: var(--voy-r-lg);
  margin: 0 auto;
}

/* ---- Article body prose (SJDiz: 760px col py=8/72 gap22) -----------------
   P: Inter 18 #2B2420 lh1.7
   H2: Playfair 28/700 #1A1512 lh1.2
   Blockquote: left bar #C2562F 3px
   Lists: gap11
   -------------------------------------------------------------------------*/
.voy-article-body {
  background: var(--voy-bg);
  padding-block: 8px 72px;
}
.voy-article-prose {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--voy-font-body);
  font-size: 18px;       /* .pen prose body: 18px */
  line-height: 1.72;     /* ~31px */
  color: var(--voy-text);
}
.voy-article-prose p,
.item-page .article-body p {
  font-family: var(--voy-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--voy-text);
  margin: 0;
}
.voy-article-prose h2,
.item-page .article-body h2 {
  font-family: var(--voy-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--voy-heading);
  margin: 0;
}
.voy-article-prose h3,
.item-page .article-body h3 {
  font-family: var(--voy-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
}
/* In-body H1 sample (Typography page) — Playfair, not the unstyled 16px Inter reset */
.voy-article-prose h1,
.item-page .article-body h1 {
  font-family: var(--voy-font-head);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--voy-heading);
  margin: 0;
}
/* Inline code chip — Geist Mono, subtle chip bg (not Bootstrap pink) */
.voy-article-prose :not(pre) > code {
  font-family: var(--voy-font-mono);
  font-size: .88em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--voy-elevated);
  border: 1px solid var(--voy-border);
  color: var(--voy-primary);
}
/* Fenced code block — Geist Mono on the always-dark surface */
.voy-article-prose pre code,
.item-page .article-body pre code {
  font-family: var(--voy-font-mono);
  font-size: 14px;
}
/* Teal secondary button sample (Typography page): T4 paints `.btn.btn-secondary`
   teal via var(--color-secondary); make the on-teal label white, not the low-contrast
   text token. Scoped to article body so light-bg filter/stools buttons are unaffected. */
.voy-article-prose .btn.btn-secondary,
.item-page .btn.btn-secondary {
  color: var(--voy-on-primary) !important;
}
/* Blockquote: left bar 3px #C2562F, pl16, italic */
.voy-article-prose blockquote,
.item-page .article-body blockquote {
  border-left: 4px solid var(--voy-primary);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  margin: 8px 0;
  font-family: var(--voy-font-head);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--voy-heading);
}
/* Checklist items with lucide check icon */
.voy-article-prose ul,
.item-page .article-body ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* Teal lucide-check checklist (pen S3GKf: icon #1F6F6B 20px + text Inter 17/lh1.6,
   gap 12, no bullet disc). Editor-safe: SVG via background-image (no ::before tick → P61). */
.voy-article-prose ul.voy-checklist,
.item-page .article-body ul.voy-checklist {
  list-style: none;
  padding-left: 0;
  gap: 14px;
}
.voy-article-prose ul.voy-checklist li,
.item-page .article-body ul.voy-checklist li {
  position: relative;
  padding-left: 32px;
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--voy-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F6F6B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: 20px 20px;
}
html.t4-dark .voy-article-prose ul.voy-checklist li,
html.t4-dark .item-page .article-body ul.voy-checklist li {
  color: var(--voy-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2346A39D' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.voy-article-prose ol,
.item-page .article-body ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* Tags wrapper: reuse the prose container centering without re-applying the
   .voy-article-prose flex/typography rules (which were doubling up on the tags). */
.voy-article-tags-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 48px;
}
/* Tags row (RMQrf: r-pill chips, gap:10, padding=[7,14], no border).
   Given a "Topics" eyebrow + a hairline top rule so the pills read as a
   deliberate end-of-article footer, not an orphaned chip under the prose. */
.voy-article-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--voy-border);
}
.voy-article-tags-label {
  font-family: var(--voy-font-mono, 'Geist Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-muted);
  margin-right: 4px;
}
.voy-article-tag {
  display: inline-block;
  background: var(--voy-elevated);
  border: none;
  border-radius: var(--voy-r-pill);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--voy-text);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.voy-article-tag:hover { background: var(--voy-border); color: var(--voy-primary); }

/* ---- Author box (slQqb: py=0/72, card r22 #F2EBE1 p26 gap20 flex row) --- */
.voy-author-box-wrap {
  background: var(--voy-bg);
  padding: 0 48px 72px;
}
/* .voy-author-box styles live in jpages.css (already done) */
/* Role/title span not in pen design (AMCXZ: kicker → name → bio only) — D4 */
.voy-author-box__role { display: none !important; }

/* ---- Related articles (wfLUv: #F2EBE1 bg py=72, Inner 1140, 3-col grid) - */
.voy-related {
  background: var(--voy-elevated);
  padding-block: 72px;
}
.voy-related-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
}
.voy-related-title {
  font-family: var(--voy-font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0 0 32px;
}
.voy-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Related card parity — pen bYLB0: media h=200, body pad=20, title lh=1.25 (D1–D3) */
.voy-related-grid .voy-card__media {
  height: 200px !important;
  aspect-ratio: unset !important;
}
.voy-related-grid .voy-card__body {
  padding: 20px !important;
}
.voy-related-grid .voy-card__title {
  line-height: 1.25 !important;
}

/* ---- CTA band (uH8lZ: #1F6F6B teal py=64, Inner 760px center) ----------- */
.voy-art-cta {
  background: var(--voy-secondary);
  padding-block: 64px;
  text-align: center;
}
.voy-art-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.voy-art-cta .voy-art-cta-title {
  font-family: var(--voy-font-head);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.voy-art-cta .voy-art-cta-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0;
}
.voy-art-cta .btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--voy-secondary);
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.voy-art-cta .btn-white:hover { background: rgba(255,255,255,0.9); color: var(--voy-secondary); }

/* ---- Masthead inner — suppress T4 base padding (4rem 0 at md+) -----------
   The outer .t4-masthead already carries the correct 56px/32px padding via
   the rule above. The inner wrapper must be zero-padded so it doesn't double. */
.t4-masthead .t4-masthead-inner {
  padding: 0 !important;
}
/* Masthead inner gap: 20px between breadcrumb/cat/title/meta (pen sOMSc gap:20) */
.t4-masthead .t4-masthead-detail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

/* ---- Suppress T4 main-body top/bottom padding on single article ----------
   T4 base scss adds padding:3rem 0 at md+ which creates a 48px gap above/
   below the article body sections (pen spec: no gap, content flows directly). */
body.item-268 #t4-main-body,
body.view-article #t4-main-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Full-bleed breakout for body / related / author-box / CTA ------------
   These sections are emitted inside the T4 col (.t4-col → item-page → 1108px)
   which carries a 16px BS gutter. Break them out to full-viewport using the
   negative-margin + 100vw technique. This lets the inner prose column's own
   padding-inline (20px mobile) land the text at exactly 20px from the edge
   instead of the container-gutter-stacked 36px.                                */
.voy-article-hero,
.voy-article-body,
.voy-related,
.voy-art-cta {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
}
.voy-author-box-wrap {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  padding-inline: 48px !important;
}

/* ---- Hide joomla chrome -------------------------------------------------- */
.item-page .article-info,
.item-page .article-aside,
.item-page .page-header h2,
.item-page .icons { display: none !important; }

/* ---- Hide T4 auto-breadcrumb on single article (not in .pen design) ------ */
body.view-article .t4-breadcrumbs,
body.item-268 .t4-breadcrumbs { display: none !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .voy-article-prose,
  .voy-article-tags-wrap { padding-inline: 20px; }
  .voy-related-inner { padding-inline: 20px; }
}
@media (max-width: 991px) {
  .t4-masthead .voy-masthead-title { font-size: 34px; }
  .voy-article-hero-img { height: 300px; }
  .voy-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  /* Masthead (pen h8u9vs): pt=40/pb=28, gap:16 */
  .t4-masthead { padding-block: 40px 28px !important; }
  .t4-masthead .t4-masthead-detail { gap: 16px !important; row-gap: 16px !important; }
  /* [GUTTER-20] Masthead-detail carries a 16px BS container gutter (template.css)
     that leaves the centered masthead column at 16px on mobile. Normalize to the
     canonical 20px side gutter (parity with hero/related/CTA at 20px). */
  .t4-masthead .t4-masthead-detail { padding-inline: 20px !important; }
  /* Title: fs=30, lh=1.15 (pen BUA9h) */
  .t4-masthead .voy-masthead-title { font-size: 30px; line-height: 1.15; }
  /* Meta: avatar 36×36, gap=10 (pen dhmiP: h=36, gap=10) */
  .t4-masthead .voy-art-meta { gap: 10px; }
  .t4-masthead .voy-art-meta .voy-art-avatar { width: 36px !important; height: 36px !important; }
  /* Breadcrumb on mobile: hide Home + first sep, show cat+current only (pen ia5s9) */
  .t4-masthead .voy-art-breadcrumb .voy-art-bc-item:first-child,
  .t4-masthead .voy-art-breadcrumb .voy-art-bc-sep:first-of-type { display: none; }
  /* Author box wrap: 20px padding at mobile (pen ZcVAV padding=[0,20,56,20]) */
  .voy-author-box-wrap { padding-inline: 20px !important; padding-bottom: 56px !important; }
  /* Hero: wrap padding=[0,20,32,20] (pen Y3L38M), img h=240 */
  .voy-article-hero { padding: 0 20px 32px !important; }
  .voy-article-hero-img { height: 240px; }
  /* Prose body (pen CujMS): gap=20, pb=56, padding=[0,20,56,20] */
  .voy-article-body { padding-bottom: 56px !important; }
  .voy-article-prose { gap: 20px; padding-inline: 20px; }
  .voy-article-prose p,
  .item-page .article-body p { font-size: 16px; }
  /* H2 mobile: pen UBEvO/QlzLb fs=23 */
  .voy-article-prose h2,
  .item-page .article-body h2 { font-size: 23px; }
  /* Blockquote mobile: pen byQuH bq-text fs=20 */
  .voy-article-prose blockquote,
  .item-page .article-body blockquote { font-size: 20px; padding-left: 18px; }
  /* Author box: avatar 64×64 (pen Yz4BY h=64 w=64) */
  .voy-author-box__avatar { width: 64px !important; height: 64px !important; }
  /* Related (pen b3XIDw): pt/pb=48, title fs=24 (pen fh7QK) */
  .voy-related { padding-top: 48px !important; padding-bottom: 48px !important; }
  .voy-related-title { font-size: 24px; }
  /* Related grid 1-col (mobile) */
  .voy-related-grid { grid-template-columns: 1fr; }
  /* Related inner: 20px padding-inline at mobile (pen b3XIDw p=[48,20]) */
  .voy-related-inner { padding-inline: 20px; }
  /* CTA (pen LjXs0): pt/pb=56, title fs=27, gap=16, inner pi=20 */
  .voy-art-cta { padding-top: 56px !important; padding-bottom: 56px !important; }
  .voy-art-cta .voy-art-cta-inner { gap: 16px; padding-inline: 20px; }
  .voy-art-cta .voy-art-cta-title { font-size: 27px; }
}

/* ---- Dark mode (single article) ----------------------------------------- */
html.t4-dark .voy-article-body,
html.t4-dark .voy-article-hero,
html.t4-dark .voy-author-box-wrap { background: var(--voy-bg); }
html.t4-dark .voy-article-prose p,
html.t4-dark .item-page .article-body p { color: var(--voy-text); }
html.t4-dark .voy-article-prose h2,
html.t4-dark .voy-article-prose h3,
html.t4-dark .item-page .article-body h2,
html.t4-dark .item-page .article-body h3 { color: var(--voy-heading); }
html.t4-dark .voy-article-prose blockquote,
html.t4-dark .item-page .article-body blockquote { color: var(--voy-heading); }
html.t4-dark .voy-article-tag { background: var(--voy-elevated); border-color: var(--voy-border); color: var(--voy-text); }
html.t4-dark .voy-related { background: var(--voy-elevated); }
html.t4-dark .voy-related .voy-card { background: var(--voy-surface); border-color: var(--voy-border); }
html.t4-dark .voy-art-cta { background: var(--voy-secondary); }

/* Author byline → author-detail link: inherit, no underline (relinked masthead.php) */
.voy-art-author-link { color: inherit; text-decoration: none; }
.voy-art-author-link:hover { color: #C2562F; text-decoration: none; }
html.t4-dark .voy-art-author-link:hover { color: #D86A3F; }
.voy-art-avatar-link { display: inline-flex; text-decoration: none; }