/* ==========================================================================
   Voyara — Archive page (menu 271)
   ========================================================================== */

/* ---- Masthead (X3cDVk) ---------------------------------------------------
   Design: #FAF6F0 bg py=80/28, Inner 1140px left-align:
   Eyebrow Geist Mono 13 #C2562F ls1 | Title Playfair 54/700 | Sub Inter 18 muted max-760
   -------------------------------------------------------------------------*/
.t4-masthead {
  background: var(--voy-bg) !important;
  border-bottom: 0 !important;
  padding-block: 80px 28px !important;
}
.t4-masthead .t4-masthead-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
/* Archive masthead: left-aligned like Category List. template.css sets
   `.t4-masthead .t4-masthead-detail{text-align:center}` (0,2,0) and loads AFTER this
   overlay, so use the compound class (0,3,0) to win regardless of cascade order. */
.t4-masthead .t4-masthead-detail.voy-masthead-detail--left {
  text-align: left !important;
  align-items: flex-start;
}
.t4-masthead .voy-masthead-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  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: 54px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
}
.t4-masthead .voy-masthead-sub {
  font-family: var(--voy-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--voy-muted);
  max-width: 760px;
  margin: 0;
}

/* ---- Archive section (rFAlP: #FAF6F0 bg py=40/70) ----------------------- */
.voy-archive-section {
  background: var(--voy-bg);
  padding-block: 40px 70px;
}
.voy-archive-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* ---- Left sidebar (Sy5Bg: 240px, year/month accordion) ------------------- */
.voy-archive-left {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voy-archive-left .voy-arc-sh {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-muted);
  margin-bottom: 4px;
}
.voy-archive-left .voy-arc-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--voy-elevated);
  border-radius: var(--voy-r-sm);
  padding: 8px 12px;
  cursor: pointer;
}
.voy-archive-left .voy-arc-year.active { background: var(--voy-elevated); }
.voy-archive-left .voy-arc-year-label {
  font-family: var(--voy-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--voy-heading);
}
.voy-archive-left .voy-arc-year svg {
  color: var(--voy-muted);
  width: 16px; height: 16px;
}
.voy-archive-left .voy-arc-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 6px 22px;
  cursor: pointer;
  text-decoration: none;
}
.voy-archive-left .voy-arc-month-label {
  font-family: var(--voy-font-body);
  font-size: 14px;
  color: var(--voy-text);
}
.voy-archive-left .voy-arc-month-label.active { color: var(--voy-primary); font-weight: 600; }
.voy-archive-left .voy-arc-month-count {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  color: var(--voy-muted);
}

/* ---- Center (J1kbV: fill_container, month-grouped article rows) ---------- */
.voy-archive-center {
  flex: 1;
  min-width: 0;
}
.voy-arc-month-head {
  font-family: var(--voy-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0 0 12px;
}
.voy-arc-month-head:not(:first-child) { margin-top: 24px; }
/* Desktop: row is horizontal (date | title | badge) — .voy-arc-row-top is transparent */
.voy-arc-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--voy-border);
  text-decoration: none;
}
.voy-arc-row:last-child { border-bottom: 0; }
/* On desktop, .voy-arc-row-top just passes date through inline */
.voy-arc-row-top {
  display: contents; /* invisible wrapper on desktop — children participate in parent flex */
}
.voy-arc-date {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  color: var(--voy-muted);
  flex: 0 0 64px;
}
.voy-arc-title {
  flex: 1;
  font-family: var(--voy-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--voy-text);
  line-height: 1.4;
}
.voy-arc-row:hover .voy-arc-title { color: var(--voy-primary); }
.voy-arc-badge {
  display: inline-flex;
  background: var(--voy-elevated);
  border-radius: var(--voy-r-pill);
  padding: 5px 12px;
  flex-shrink: 0;
}
.voy-arc-badge span {
  font-family: var(--voy-font-mono);
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.5px;
  color: var(--voy-secondary);
  text-transform: uppercase;
}

/* ---- Right sidebar (V8YoB: 280px gap24) ---------------------------------- */
.voy-archive-right {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.voy-arc-widget {
  background: var(--voy-surface);
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-lg);
  padding: 22px;
}
.voy-arc-widget-title {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-muted);
  margin: 0 0 14px;
}
/* Popular: numbered list */
.voy-arc-popular { display: flex; flex-direction: column; gap: 14px; }
.voy-arc-pop-row { display: flex; gap: 12px; align-items: flex-start; }
.voy-arc-pop-num {
  font-family: var(--voy-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--voy-primary);
  flex-shrink: 0;
}
.voy-arc-pop-title {
  font-size: 14px;
  line-height: 1.4;
  color: var(--voy-text);
  text-decoration: none;
}
.voy-arc-pop-title:hover { color: var(--voy-primary); }
/* Tag cloud */
.voy-arc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.voy-arc-tag {
  display: inline-block;
  background: var(--voy-elevated);
  border-radius: var(--voy-r-pill);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--voy-text);
  text-decoration: none;
}
.voy-arc-tag:hover { background: var(--voy-border); color: var(--voy-primary); }

/* ---- CTA band (Pm0mm: #C2562F py=72) ------------------------------------- */
.voy-archive-cta {
  background: var(--voy-primary);
  padding-block: 72px;
  text-align: center;
}
.voy-archive-cta-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.voy-archive-cta .voy-arc-cta-title {
  font-family: var(--voy-font-head);
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.voy-archive-cta .voy-arc-cta-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #fff; /* D4: 100% white per .pen rJJ5Z fill:#FFFFFF */
  max-width: 640px;
  margin: 0;
}
.voy-archive-cta .voy-arc-cta-row {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
/* D3: Primary button — white bg, red text (pen: fill:#FFFFFF on btn, fill:#C2562F on label) */
.voy-arc-btn-primary {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--voy-primary);
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  font-family: var(--voy-font-head);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.voy-arc-btn-primary:hover { background: #FAF6F0; color: var(--voy-primary); }
/* D3: Secondary button — ghost white border */
.voy-arc-btn-secondary {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  font-family: var(--voy-font-head);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.voy-arc-btn-secondary:hover { background: rgba(255,255,255,0.2); color: #fff; }
/* Dark mode CTA button adjustments */
html.t4-dark .voy-arc-btn-primary { background: #211B16; color: #D86A3F; }
html.t4-dark .voy-arc-btn-primary:hover { background: #2B2420; color: #D86A3F; }

/* ---- FIX D1: [STICKY-HEADER-CONTENT-GAP] — suppress T4 base 48px padding on archive ----- */
body.item-271 #t4-main-body { padding-top: 0 !important; }

/* ---- FIX D2: [FULL-BLEED-CUT] — CTA band must span full viewport width -------- */
.voy-archive-cta {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

/* ---- NEW-D1: [FULL-BLEED-CUT] Archive Section bg must also be full viewport width ---
   Pen rFAlP: fill_container (1440px bg), inner QOAct = 1140px.
   Live was trapped at x=166 w=1108 inside T4 container (same pattern as CTA band).
   Fix: negative-margin breakout. Inner already has max-width:1140 + margin:auto.
   ---------------------------------------------------------------------------------*/
.voy-archive-section {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

/* ---- FIX D3/D4: CTA structure — two buttons instead of email form ------------- */
/* The PHP template renders an email form; override the row to look like buttons.  */
/* We replace via override in default.php (see below); CSS targets the new markup. */
.voy-arc-cta-sub { color: #fff !important; } /* D4: desktop: 100% white per pen Pm0mm/rJJ5Z fill:#FFFFFF */

/* ---- NEW-D2: Breadcrumb band padding-bottom = 8px (pen qSyBw pb=8) ----------- */
body.item-271 .t4-breadcrumbs { padding-bottom: 8px !important; }

/* ---- NEW-D3: Breadcrumb active item font-weight = 600 (pen ErRE2 fw=600) ----- */
body.item-271 .t4-breadcrumbs .breadcrumb-item.active { font-weight: 600 !important; }

/* ---- Hide default Joomla archive chrome ---------------------------------- */
.archive .page-header,
.archive form,
.archive .filters { display: none !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .voy-archive-inner,
  .voy-archive-cta-inner { padding-inline: 20px; }
  .t4-masthead .t4-masthead-inner { padding-inline: 20px; }
}
@media (max-width: 991px) {
  .t4-masthead .voy-masthead-title { font-size: 38px; }
  .voy-archive-inner { flex-direction: column; }
  .voy-archive-left { flex: none; width: 100%; }
  .voy-archive-right { flex: none; width: 100%; }
}

/* ---- Mobile (≤640px) ----------------------------------------------------- */
@media (max-width: 640px) {
  /* D5/D6: Masthead PT=40, PB=16 (pen xZCiW padding:[40,20,16,20]) */
  .t4-masthead { padding-block: 40px 16px !important; }
  /* D7: Title 32px */
  .t4-masthead .voy-masthead-title { font-size: 32px !important; }
  /* D8: Sub 15px */
  .t4-masthead .voy-masthead-sub { font-size: 15px !important; }
  /* D9: Masthead inner gap 14px */
  .t4-masthead .t4-masthead-inner { gap: 14px !important; }
  /* NEW-D9b: [DESKTOP/MOBILE-MASTHEAD-CENTER-LEAK] T4 base centers .t4-masthead-detail
     on mobile; pen xZCiW masthead is LEFT-aligned → force left */
  .t4-masthead .t4-masthead-detail,
  .t4-masthead .voy-masthead-eyebrow,
  .t4-masthead .voy-masthead-title,
  .t4-masthead .voy-masthead-sub { text-align: left !important; }
  /* D10: Mobile article rows — vertical layout (date+badge row, title below) */
  .voy-arc-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  /* Override display:contents on mobile → proper flex row for date+badge */
  .voy-arc-row-top {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  /* Reset date flex constraint on mobile */
  .voy-arc-date { flex: none !important; width: auto !important; }
  /* Badge in top row */
  .voy-arc-badge { flex-shrink: 0; }
  /* D11: CTA PT/PB = 48px (pen y3boBx padding:[48,20]) */
  .voy-archive-cta { padding-block: 48px !important; padding-inline: 20px !important; }
  /* D12: CTA title 27px */
  .voy-arc-cta-title { font-size: 27px !important; }
  /* D13: CTA full-bleed on mobile — reset to viewport-edge */
  .voy-archive-cta {
    margin-left: calc(50% - 50vw) !important;
    width: 100vw !important;
  }
  /* Mobile CTA inner gap 16px (pen y3boBx gap:16) + side padding 20px */
  .voy-archive-cta-inner { gap: 16px !important; padding-inline: 20px !important; }
  /* Mobile CTA buttons stacked vertically, full-width (pen X8vsWi layout:vertical) */
  .voy-archive-cta .voy-arc-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
    padding-top: 6px !important;
  }
  .voy-arc-btn-primary,
  .voy-arc-btn-secondary { justify-content: center; width: 100% !important; box-sizing: border-box; }
  /* D15: Mobile archive section PB = 24px, PT = 16px (pen mNzLQ padding:[16,20,24,20]) */
  .voy-archive-section {
    padding-top: 16px !important;  /* NEW-D4: was 40px, pen mNzLQ pt=16 */
    padding-bottom: 24px !important;
    padding-inline: 20px !important;
  }
  /* NEW-D5: Left sidebar — mobile Date Nav (pen inzyg padding:[8,20,16,20]) ---
     Pen mobile has a "Browse by date" Date Nav in place of the left sidebar.
     Same year/month data; we repurpose the existing left sidebar as mobile date nav:
     — show it (NOT hidden), but style as mobile date nav above center content.
     — Hide the "BY YEAR" label (no label in pen inzyg).
     — Sidebar already appears first in the flex-column, so it sits above article rows. */
  .voy-archive-left {
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    padding: 8px 0 16px !important;   /* pen inzyg padding top/bottom (inline 0 since handled by inner) */
    gap: 4px !important;
  }
  /* Hide "BY YEAR" header on mobile (pen mobile date nav has no such label) */
  .voy-archive-left .voy-arc-sh { display: none !important; }
  /* Make year items more pill-like on mobile (pen UUeZn padding:[10,14]) */
  .voy-archive-left .voy-arc-year { padding: 10px 14px !important; }
  .voy-archive-left .voy-arc-month { padding: 6px 14px 6px 24px !important; }

  /* NEW-D6: Right sidebar Popular widget hidden on mobile (pen mobile has no Popular) */
  .voy-archive-right .voy-arc-widget:first-child { display: none !important; }
  /* NEW-D6b: Right sidebar (tag cloud only) appears below center, pen H3iTo padding:[0,20,40,20] */
  .voy-archive-inner {
    gap: 0 !important;
    padding-inline: 0 !important;
  }
  .voy-archive-right {
    padding: 0 20px 40px !important; /* pen H3iTo padding:[0,20,40,20] */
    gap: 0 !important;
    width: 100% !important;
  }
  /* Archive center content gets inline padding on mobile */
  .voy-archive-center { padding-inline: 20px; }
  /* NEW-D7/D8: CTA sub mobile: 15px / 85% white (pen y3boBx/U0bm7 fontSize:15, fill:#FFFFFFD9) */
  .voy-arc-cta-sub { font-size: 15px !important; color: rgba(255,255,255,0.85) !important; }
  /* Breadcrumb inline gutter (pen KHxAr padding:[0,20,8,20]) is now provided by
     the canonical container (.t4-section-inner.container: 20px, §5.14). Keep the
     SECTION horizontal padding at 0 so it doesn't STACK → 40px double-gutter. */
  body.item-271 .t4-breadcrumbs { padding-inline: 0 !important; }
}

/* ---- Dark mode ----------------------------------------------------------- */
html.t4-dark .voy-archive-section { background: var(--voy-bg); }
html.t4-dark .voy-archive-left .voy-arc-year { background: var(--voy-elevated); }
html.t4-dark .voy-arc-row { border-color: var(--voy-border); }
html.t4-dark .voy-arc-badge { background: var(--voy-elevated); }
html.t4-dark .voy-arc-widget { background: var(--voy-surface); border-color: var(--voy-border); }
html.t4-dark .voy-arc-tag { background: var(--voy-elevated); color: var(--voy-text); }
html.t4-dark .voy-archive-cta { background: var(--voy-primary); }