/* ==========================================================================
   Voyara — Blog page (menu 266 / category-list 267)
   Loaded AFTER template.css via index.php per-page map.
   All tokens already defined in _voyara.scss :root.
   ========================================================================== */

/* ---- Masthead (b8LeJj nXmeG) -------------------------------------------
   Design: #FAF6F0 bg, centered column 760px, py=90/28
   Eyebrow: Geist Mono 13 #C2562F ls2 UPPERCASE
   Title: Playfair 54/700/lh1.1 #1A1512
   Subtitle: Inter 18 #8A7E72 lh1.6
   -------------------------------------------------------------------------*/
.t4-masthead {
  background: var(--voy-bg) !important;
  border-bottom: 0 !important;
  padding-block: 90px 28px !important;
}
.t4-masthead .t4-masthead-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.t4-masthead .voy-masthead-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--voy-primary);
  display: block;
}
.t4-masthead .voy-masthead-title {
  font-family: var(--voy-font-head);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--voy-heading);
  margin: 0;
}
.t4-masthead .voy-masthead-sub {
  font-family: var(--voy-font-body);
  font-size: 18px;
  font-weight: normal;
  line-height: 1.6;
  color: var(--voy-muted);
  max-width: 680px;
  margin: 0;
}

/* ---- Featured hero card (a3O8Dc) ----------------------------------------
   Design: white card r22 border #E5DCD0, horizontal split:
   left = 620×440 image | right = text column gap40 p=[40,40,40,8]
   Container band: #FAF6F0 py=12/80  ← pen ZaoAE padding=[12,48,80,48]
   Full-bleed: break out of T4 col container (like contact/canvas pages).
   Selectors cover both .blog-featured (featured view) and .voy-blog (category view).
   -------------------------------------------------------------------------*/
.blog-featured > .blog-items.items-leading,
.voy-blog .items-leading {
  background: var(--voy-bg);
  padding: 12px 0 80px; /* D1: pb=80px per pen ZaoAE */
  /* FIX-FULLBLEED: break out of T4 column (1108px) → full viewport width */
  margin-left: calc(50% - 50vw);
  width: 100vw;
  position: relative;
}
.blog-featured > .blog-items.items-leading .blog-item,
.voy-blog .items-leading .blog-item {
  /* pen a3O8Dc width=1140: blog-item centers the card at 1140px within full-bleed band */
  max-width: 1140px;
  margin: 0 auto;
  /* No inline padding — the full-bleed band centering achieves the pen ZaoAE [12,48,80,48] effect */
  padding-inline: 0;
  padding-bottom: 40px;
  box-sizing: border-box;
}
.blog-featured > .blog-items.items-leading .blog-item .blog-item-content,
.voy-blog .items-leading .blog-item-content {
  width: 100%;
}
/* The featured voy-card hero is horizontal flex on ≥992 */
.blog-featured > .blog-items.items-leading .voy-card,
.blog-featured > .blog-items.items-leading .voy-post-card,
.voy-blog .items-leading .voy-card,
.voy-blog .items-leading .voy-post-card {
  flex-direction: row !important;
  border-radius: var(--voy-r-lg);
  border: 1px solid var(--voy-border);
  background: var(--voy-surface);
  overflow: hidden;
  min-height: 440px;
  /* D2-HERO-GAP: pen a3O8Dc gap=40 between cover and text column */
  gap: 40px !important;
}
.blog-featured > .blog-items.items-leading .voy-card__media,
.voy-blog .items-leading .voy-card__media {
  flex: 0 0 620px;
  aspect-ratio: unset !important;
  height: 440px;
  border-radius: 0;
}
.blog-featured > .blog-items.items-leading .voy-card__body,
.voy-blog .items-leading .voy-card__body {
  flex: 1;
  /* D3-HERO-BODY-PAD: pen eODaN padding=[40,40,40,8] → pt:40 pr:40 pb:40 pl:8 */
  padding: 40px 40px 40px 8px !important;
  justify-content: center;
  gap: 16px;
}
.blog-featured > .blog-items.items-leading .voy-card__title,
.voy-blog .items-leading .voy-card__title {
  font-size: 34px;
  /* D5-HERO-TITLE-LH: pen JS0HL lh=1.15 */
  line-height: 1.15 !important;
}
.blog-featured > .blog-items.items-leading .voy-card__excerpt,
.voy-blog .items-leading .voy-card__excerpt {
  -webkit-line-clamp: 4;
  font-size: 16px;
  line-height: 1.6;
}
.blog-featured > .blog-items.items-leading .voy-card__cat,
.voy-blog .items-leading .voy-card__cat {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--voy-secondary);
}
/* D4-HERO-META-PAD: pen zOFM7 padding=[4,0,8,0] → pt:4 pb:8 */
.blog-featured > .blog-items.items-leading .voy-card__meta,
.voy-blog .items-leading .voy-card__meta {
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}

/* ---- Body section with sidebar (MvmKr) -----------------------------------
   Design: #F2EBE1 bg, py=80, Inner 1140px: Posts fill_container + Sidebar 340px gap40
   Full-bleed: pen MvmKr is fill_container (1440px), not capped to T4 col.
   -------------------------------------------------------------------------*/
.blog-featured > .blog-items:not(.items-leading),
.blog-featured > .items-more,
.blog-featured > .blog-items.items-leading + .blog-items {
  display: none;
}

/* The Posts+Sidebar layout wraps the intro items grid */
.voy-blog-body {
  background: var(--voy-elevated);
  padding-block: 80px;
  /* FIX-FULLBLEED: break out of T4 column */
  margin-left: calc(50% - 50vw);
  width: 100vw;
  position: relative;
}
.voy-blog-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.voy-blog-posts {
  flex: 1;
  min-width: 0;
}
.voy-blog-sidebar {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Posts grid — 2-col within the posts column */
.voy-blog-posts .voy-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.voy-blog-posts .voy-posts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.voy-blog-posts .voy-posts-head-title {
  font-family: var(--voy-font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
}
.voy-blog-posts .voy-posts-head-count {
  font-family: var(--voy-font-body);
  font-size: 14px;
  color: var(--voy-muted);
}

/* Cards inside blog body inherit base .voy-card styles; adjust for bg */
.voy-blog-posts .voy-card {
  background: var(--voy-surface);
}

/* ---- Card/Post grid items — exact bYLB0 spec ----------------------------
   Cover: fixed 200px height (not aspect-ratio-based)
   Body: padding=20 all sides, gap=10
   Title: Playfair 20/700 lh=1.25
   Author: Inter 13 #2B2420 (dark — pen TGqWa)
   Date: Inter 13 #8A7E72 (muted — pen ArNyj)
   Category: font-mono 11px ls=0.5 (pen c0fcs8)
   -------------------------------------------------------------------------*/
.voy-posts-grid .voy-card__media {
  flex: none !important;
  height: 200px !important; /* D3: pen C5a7D = 200px fixed */
  aspect-ratio: unset !important;
  width: 100%;
}
.voy-posts-grid .voy-card__body {
  padding: 20px !important; /* D2: pen i0Msq = padding:20 uniform */
  gap: 10px;
}
.voy-posts-grid .voy-card__title {
  line-height: 1.25; /* D4: pen W9YLW lh=1.25 */
}
/* D6-CAT-LS: pen c0fcs8 letterSpacing:0.5 (grid card cat) */
.voy-posts-grid .voy-card__cat {
  letter-spacing: 0.5px !important;
}
/* D5-author: pen bYLB0 author = #2B2420 dark (not muted) */
.voy-posts-grid .voy-card__meta,
.voy-posts-grid .voy-card__author,
.voy-blog .items-leading .voy-card__author {
  color: var(--voy-text); /* #2B2420 light, #E8DFD4 dark */
}
.voy-posts-grid .voy-card__date,
.voy-blog .items-leading .voy-card__date {
  color: var(--voy-muted); /* #8A7E72 — dates stay muted */
}
/* Override the meta container color so dot also uses text, then re-mute date */
.voy-posts-grid .voy-card__meta {
  color: var(--voy-text);
}

/* ---- Hero card meta — pen eODaN/zOFM7 spec ------------------------------
   Author: Inter 14/600 #2B2420 (YzEbU)
   Date: Inter 14 #8A7E72 (R9ziQ)
   Excerpt: Inter 16/lh1.6 #8A7E72 (qMz5i) — already set via blog.css lines 106-111
   -------------------------------------------------------------------------*/
.voy-blog .items-leading .voy-card__meta {
  color: var(--voy-text);
  font-size: 14px; /* pen hero meta = 14px */
}
.voy-blog .items-leading .voy-card__author {
  font-weight: 600; /* pen YzEbU fw=600 */
  font-size: 14px;
  color: var(--voy-text);
}
.voy-blog .items-leading .voy-card__date {
  font-size: 14px;
  font-weight: normal;
  color: var(--voy-muted);
}

/* ---- Pagination (HvPWU: 42px pills r8 border #E5DCD0, active #C2562F fill) */
/* Hide Joomla's "first page" (double chevron <<) and "last page" (>>) items — pen shows only prev/next single arrows */
.voy-blog-pagination .page-item:has(.page-link[aria-label="Go to end page"]),
.voy-blog-pagination .page-item:has(.page-link[aria-label="Go to start page"]),
.voy-blog-pagination .page-item.disabled:not(:has(.voy-pag-ic)) + .page-item + .page-item + .page-item + .page-item + .page-item + .page-item:last-child { display: none !important; }
/* More reliable: hide disabled items that have double-arrow SVGs (2 paths) by using :has with SVG child count */
/* Use aria-label approach for first/last: */
.voy-blog-pagination li:has(a[aria-label="Go to end page"]),
.voy-blog-pagination li:has(a[aria-label="Go to start page"]),
.voy-blog-pagination li:has(span[aria-label="Go to end page"]),
.voy-blog-pagination li:has(span[aria-label="Go to start page"]) { display: none !important; }
/* Also hide the first disabled item (first-page << button) which has no aria-label */
.voy-blog-pagination li.disabled:first-child { display: none !important; }

.voy-blog-pagination {
  padding-top: 32px;
}
.voy-blog-pagination .pagination,
.voy-blog-pagination ul.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.voy-blog-pagination .pagination .page-item .page-link,
.voy-blog-pagination ul.pagination li a,
.voy-blog-pagination ul.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-sm);
  background: var(--voy-surface);
  color: var(--voy-text);
  font-family: var(--voy-font-body);
  font-size: 15px;
  /* D-PAG-FW: pen HvPWU page numbers fw=600 */
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.voy-blog-pagination .pagination .page-item.active .page-link,
.voy-blog-pagination ul.pagination li.active a,
.voy-blog-pagination ul.pagination li.active span {
  background: var(--voy-primary);
  border-color: var(--voy-primary);
  color: var(--voy-on-primary);
  font-weight: 600;
}
.voy-blog-pagination .pagination .page-item .page-link:hover:not(.active),
.voy-blog-pagination ul.pagination li a:hover {
  border-color: var(--voy-primary);
  color: var(--voy-primary);
}

/* ---- Sidebar widgets -------------------------------------------------------
   Search: r-pill white border #E5DCD0 p=14/18
   Categories: white r22 border p24 gap14, title Inter 700/13 ls.5
   Tags: white r22 border p24 gap12, pills r-pill #F2EBE1 p=7/14
   Newsletter: #1F6F6B r22 p24 gap12
   -------------------------------------------------------------------------*/
.voy-blog-sidebar .voy-sw {
  background: var(--voy-surface);
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-lg);
  padding: 24px;
}
.voy-blog-sidebar .voy-sw-title {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--voy-heading);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.voy-blog-sidebar .voy-sw-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--voy-surface);
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-pill);
  padding: 14px 18px;
  color: var(--voy-muted);
  font-family: var(--voy-font-body);
  font-size: 15px;
  cursor: text;
}
.voy-blog-sidebar .voy-sw-search svg {
  flex-shrink: 0;
  color: var(--voy-muted);
}
/* Real search field inside the pill — flat/transparent so the pill (not the
   input's own T4/BS border) drives the shape. Enter submits to Smart Search. */
.voy-blog-sidebar .voy-sw-search input {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;  /* strip native field chrome so it doesn't paint its own
                        (color-scheme-driven) background over the transparent pill */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  padding: 0 !important;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  color: var(--voy-text);
  font-family: var(--voy-font-body);
  font-size: 15px;
  line-height: 1.4;
}
.voy-blog-sidebar .voy-sw-search input::placeholder { color: var(--voy-muted); opacity: 1; }
html.t4-dark .voy-blog-sidebar .voy-sw-search input { color: var(--voy-text); }
.voy-sw-cats { display: flex; flex-direction: column; gap: 14px; }
.voy-sw-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voy-sw-cat-name {
  font-family: var(--voy-font-body);
  font-size: 15px;
  color: var(--voy-text);
  text-decoration: none;
}
.voy-sw-cat-name:hover { color: var(--voy-primary); }
.voy-sw-cat-name.active { color: var(--voy-primary); font-weight: 600; }
.voy-sw-cat-count {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  color: var(--voy-muted);
}
.voy-sw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.voy-sw-tag {
  display: inline-block;
  background: var(--voy-elevated);
  border-radius: var(--voy-r-pill);
  padding: 7px 14px;
  font-family: var(--voy-font-body);
  font-size: 13px;
  color: var(--voy-text);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.voy-sw-tag:hover { background: var(--voy-border); color: var(--voy-primary); }
.voy-sw-newsletter {
  background: var(--voy-secondary) !important;
  border: 0 !important;
  color: #fff;
  display: flex; /* D6: pen J5OLN is vertical layout, gap=12 */
  flex-direction: column;
  gap: 12px;
}
.voy-sw-newsletter .voy-sw-nl-title {
  font-family: var(--voy-font-head);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.voy-sw-newsletter .voy-sw-nl-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0 0 12px;
}
.voy-sw-newsletter .voy-sw-nl-field {
  background: #fff;
  border-radius: var(--voy-r-pill);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--voy-muted);
  margin-bottom: 8px;
}
.voy-sw-newsletter .voy-sw-nl-btn {
  display: block;
  width: 100%;
  background: var(--voy-primary);
  border-radius: var(--voy-r-pill);
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background .15s;
}
.voy-sw-newsletter .voy-sw-nl-btn:hover { background: var(--voy-primary-hover); color: #fff; }

/* Sidebar newsletter now renders the AcyMailing subscription module. Hide the
   module's own title/introtext (the widget supplies its heading + sub) and style
   the field + button as the designed white pill / primary button. */
.voy-sw-newsletter .acym_module { margin: 0; }
.voy-sw-newsletter .module-title,
.voy-sw-newsletter .acym_introtext { display: none !important; }
.voy-sw-newsletter .acym_module_form,
.voy-sw-newsletter .acym_form { display: flex; flex-direction: column; gap: 8px; }
.voy-sw-newsletter .acym_form .onefield { width: 100%; margin: 0; }
.voy-sw-newsletter .acym_form input[type="email"] {
  width: 100%;
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--voy-r-pill);
  padding: 12px 16px !important;
  font-size: 14px;
  color: #2B2420 !important;
  box-shadow: none !important;
}
.voy-sw-newsletter .acysubbuttons { margin: 0; padding: 0; }
.voy-sw-newsletter .subbutton {
  display: block;
  width: 100%;
  background: var(--voy-primary) !important;
  border: 0 !important;
  border-radius: var(--voy-r-pill);
  padding: 12px 16px !important;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
  transition: background .15s;
}
.voy-sw-newsletter .subbutton:hover { background: var(--voy-primary-hover) !important; }
.voy-sw-newsletter .acym__field__error__block { display: none; }

/* ---- CTA band (P30mw: #C2562F bg, py=80, Inner 760px center) ------------- */
.voy-cta-band {
  background: var(--voy-primary);
  padding-block: 80px;
  text-align: center;
  /* FIX-FULLBLEED: break out of T4 column */
  margin-left: calc(50% - 50vw);
  width: 100vw;
  position: relative;
}
.voy-cta-band-inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.voy-cta-band .voy-cta-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.voy-cta-band .voy-cta-title {
  font-family: var(--voy-font-head);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.voy-cta-band .voy-cta-sub {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.voy-cta-band .voy-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 8px;
}
.voy-cta-band .btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .18s;
}
.voy-cta-band .btn-ghost-white:hover { background: rgba(255,255,255,0.18); color: #fff; }
.voy-cta-band .btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  background: #fff;
  color: var(--voy-primary);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .18s;
}
.voy-cta-band .btn-white:hover { background: rgba(255,255,255,0.9); }

/* ---- Breadcrumb section (NIu0v) ----------------------------------------
   Pen NIu0v: padding=[0,48,28,48] → pb=28, fill=$bg
   The #t4-breadcrumbs section sits between masthead and featured band.
   -------------------------------------------------------------------------*/
.voy-blog ~ #t4-breadcrumbs,
body.item-266 #t4-breadcrumbs,
body.item-267 #t4-breadcrumbs {
  padding-bottom: 28px !important;
}

/* ---- Hide Joomla chrome we don't want ------------------------------------ */
.blog-featured .page-header,
.blog-featured .items-more,
.blog-featured .items-subcategories { display: none !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* On sub-1140 viewports, blog-inner switches to reduced padding */
  .voy-blog-inner { padding-inline: 20px; }
  /* Hero blog-item: add side padding at tablet (band is still full-bleed) */
  .blog-featured > .blog-items.items-leading .blog-item,
  .voy-blog .items-leading .blog-item { padding-inline: 20px; }
}
@media (max-width: 991px) {
  .t4-masthead .voy-masthead-title { font-size: 36px; }
  .blog-featured > .blog-items.items-leading .voy-card,
  .blog-featured > .blog-items.items-leading .voy-post-card,
  .voy-blog .items-leading .voy-card,
  .voy-blog .items-leading .voy-post-card {
    flex-direction: column !important;
    min-height: unset;
    gap: 0 !important; /* No gap when stacked vertically */
  }
  .blog-featured > .blog-items.items-leading .voy-card__media,
  .voy-blog .items-leading .voy-card__media {
    flex: none;
    height: 260px;
    width: 100%;
  }
  /* Text body: restore full padding when stacked */
  .blog-featured > .blog-items.items-leading .voy-card__body,
  .voy-blog .items-leading .voy-card__body {
    padding: 24px 24px 24px 24px !important;
  }
  .voy-blog-inner { flex-direction: column; }
  .voy-blog-sidebar { flex: none; width: 100%; }
}
@media (max-width: 640px) {
  /* D8: Mobile masthead — pen AMyB7 J2eqO: pt=48 pb=28 pl/r=20, eyebrow 12px, title 30px, sub 15px, gap=14 */
  .t4-masthead { padding: 48px 20px 28px !important; }
  /* [GUTTER-20] The masthead-detail carries a 16px BS container gutter (template.css)
     that stacks on the masthead's 20px, pushing content to 36px. Zero it so the
     masthead's own 20px padding is the sole (canonical) side gutter. */
  .t4-masthead .t4-masthead-detail { padding-inline: 0 !important; }
  .t4-masthead .voy-masthead-eyebrow { font-size: 12px; }
  .t4-masthead .voy-masthead-title { font-size: 30px; }
  .t4-masthead .voy-masthead-sub { font-size: 15px; }
  .t4-masthead .t4-masthead-inner { gap: 14px; }

  /* D9: Mobile featured band — pen AMyB7 k7oMFu: pt=8 pb=40 pl/r=20
     Full-bleed is maintained; inline padding goes on band itself */
  .voy-blog .items-leading {
    padding: 8px 20px 40px !important;
  }
  .voy-blog .items-leading .blog-item {
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100%;
  }
  /* Hero card stacked: body full padding */
  .voy-blog .items-leading .voy-card__body {
    padding: 20px !important;
  }
  .voy-blog .items-leading .voy-card__meta {
    padding-top: 4px !important;
    padding-bottom: 8px !important;
  }

  /* D10: Mobile blog body — pen AMyB7 fRlSz: pt=48 pb=48 pl/r=20 */
  .voy-blog-body { padding-block: 48px !important; }
  .voy-blog-inner { padding-inline: 20px !important; }

  /* D11: Mobile CTA band — pen AMyB7 GO1eY: pt=56 pb=56 pl/r=20, title 28px, gap=18 */
  .voy-cta-band { padding-block: 56px !important; padding-inline: 20px !important; }
  .voy-cta-band .voy-cta-title { font-size: 28px; }
  .voy-cta-band-inner { gap: 18px; padding-inline: 0 !important; }

  /* 1-col grid */
  .voy-blog-posts .voy-posts-grid { grid-template-columns: 1fr; }
}

/* ---- Dark mode (blog-specific) ------------------------------------------ */
html.t4-dark .blog-featured > .blog-items.items-leading .voy-card,
html.t4-dark .voy-blog .items-leading .voy-card {
  background: var(--voy-surface);
  border-color: var(--voy-border);
}
html.t4-dark .voy-blog-body { background: var(--voy-elevated); }
html.t4-dark .voy-blog-posts .voy-card { background: var(--voy-surface); border-color: var(--voy-border); }
html.t4-dark .voy-blog-sidebar .voy-sw { background: var(--voy-surface); border-color: var(--voy-border); }
html.t4-dark .voy-blog-sidebar .voy-sw-search { background: var(--voy-surface); border-color: var(--voy-field-border); color: var(--voy-muted); }
html.t4-dark .voy-sw-tag { background: var(--voy-elevated); color: var(--voy-text); }
html.t4-dark .voy-sw-tag:hover { color: var(--voy-primary); }
html.t4-dark .voy-blog-sidebar .voy-sw-newsletter { background: var(--voy-secondary) !important; }
html.t4-dark .voy-blog-pagination .pagination .page-item .page-link,
html.t4-dark .voy-blog-pagination ul.pagination li a,
html.t4-dark .voy-blog-pagination ul.pagination li span {
  background: var(--voy-surface);
  border-color: var(--voy-border);
  color: var(--voy-text);
}
html.t4-dark .voy-blog-pagination .pagination .page-item.active .page-link { background: var(--voy-primary); border-color: var(--voy-primary); color: #fff; }
html.t4-dark .voy-cta-band { background: var(--voy-primary); }
/* Dark: card author = #E8DFD4 (--voy-text in dark), date = muted */
html.t4-dark .voy-posts-grid .voy-card__meta,
html.t4-dark .voy-posts-grid .voy-card__author,
html.t4-dark .voy-blog .items-leading .voy-card__author {
  color: var(--voy-text);
}
html.t4-dark .voy-posts-grid .voy-card__date,
html.t4-dark .voy-blog .items-leading .voy-card__date {
  color: var(--voy-muted);
}
html.t4-dark .voy-blog .items-leading .voy-card__meta {
  color: var(--voy-text);
}