/* taxonomy.css — Tag, Tags Index, Author Listing, Search pages
   Loaded by each view override via addStyleSheet.
   Dark mode: html.t4-dark scope only (NOT shared darkmode.css).
   All vars defined in css/template.css (:root). */

/* ─── SUPPRESS T4 MASTHEAD on taxonomy/author/search pages ─────── */
/* The T4-generated page heading band shows the menu-item page title.
   Our PHP overrides render their own masthead, so hide the T4 one. */
:has(.voy-tag-page) #t4-masthead,
:has(.voy-tags-index-page) #t4-masthead,
:has(.voy-authors-page) #t4-masthead,
:has(.voy-author-detail) #t4-masthead,
:has(.voy-search-page) #t4-masthead { display: none !important; }

/* ─── FULL-BLEED BREAKOUT for taxonomy page sections ───────────── */
/* T4 wraps content in .t4-section-inner.container (max-width:1140px,
   padding:0 16px) → .t4-row → .t4-col (padding:0 16px).
   Total inset = 16+16 = 32px each side. To make our sections full-bleed
   we need to escape ALL these parent padding layers.
   Strategy: override the container and column constraints so the content
   area expands to full viewport width on taxonomy pages. */

/* Expand container to full width when our page wrappers are present */
:has(.voy-tag-page) .t4-section-inner.container,
:has(.voy-tags-index-page) .t4-section-inner.container,
:has(.voy-authors-page) .t4-section-inner.container,
:has(.voy-author-detail) .t4-section-inner.container,
:has(.voy-search-page) .t4-section-inner.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Also expand the row and col wrappers */
:has(.voy-tag-page) .t4-row,
:has(.voy-tags-index-page) .t4-row,
:has(.voy-authors-page) .t4-row,
:has(.voy-author-detail) .t4-row,
:has(.voy-search-page) .t4-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:has(.voy-tag-page) .t4-col,
:has(.voy-tags-index-page) .t4-col,
:has(.voy-authors-page) .t4-col,
:has(.voy-author-detail) .t4-col,
:has(.voy-search-page) .t4-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Remove T4 main body padding so masthead can reach page top edge */
:has(.voy-tag-page) .t4-main-body,
:has(.voy-tags-index-page) .t4-main-body,
:has(.voy-authors-page) .t4-main-body,
:has(.voy-author-detail) .t4-main-body,
:has(.voy-search-page) .t4-main-body {
  padding-top: 0 !important;
}

/* ─── EYEBROW + HEADING FIXES — override template.css cascade ──── */
/* template.css has combined rules: .voy-eyebrow, .masthead-eyebrow { color: secondary; font-size: 12px }
   Both fire AFTER our single-class rules. Use !important to win. */
.voy-eyebrow {
  color: #C2562F !important;
  font-size: 13px !important;
}
/* Search masthead eyebrow: pen REtyT fontSize:12 (not 13) */
:has(.voy-search-page) .voy-eyebrow { font-size: 12px !important; }

/* Search title desktop/mobile text swap: pen desktop NnN4U = "What are you
   looking for?"; pen mobile ytT9h A7bz9 = "Search" (26px, centered). */
.voy-search-title--mobile { display: none; }
.voy-search-title--desktop { display: inline; }
/* Author listing masthead eyebrow: pen r9LvX eyebrow fontSize:13 (inherited) */
/* Taxonomy/author/search page titles must use --voy-heading (#1A1512), not --voy-text (#2B2420) */
.voy-tax-title,
.voy-authors-title,
.voy-search-title { color: var(--voy-heading, #1A1512) !important; }
html.t4-dark .voy-tax-title,
html.t4-dark .voy-authors-title,
html.t4-dark .voy-search-title { color: #FBF6EF !important; }
/* Author listing dark eyebrow: pen x0ZnO6 mpDJT = #D86A3F (base .voy-eyebrow forces #C2562F) */
html.t4-dark :has(.voy-authors-page) .voy-eyebrow,
html.t4-dark .voy-authors-page .voy-eyebrow { color: #D86A3F !important; }

/* ─── SHARED MASTHEAD ─────────────────────────────────────────────── */
.voy-tax-masthead {
  background: var(--voy-bg, #FAF6F0);
  padding: 80px 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-tax-masthead-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.voy-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: #C2562F;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.voy-tax-title {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  line-height: 1.1;
  margin: 0;
}
.voy-tax-subtitle,
.voy-tax-count {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--voy-text-dim, #8A7E72);
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
}

/* ─── TAG PAGE ─────────────────────────────────────────────────────── */
.voy-tag-grid-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 40px 48px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-tag-grid-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.voy-tag-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.voy-post-card {
  background: var(--voy-card, #FFFFFF);
  border-radius: 22px;
  border: 1px solid var(--voy-border, #E5DCD0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.voy-post-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.09); }

/* ---- Shared card hover affordance across ALL card grids ----
   Contexts: com_content category blog (.voy-posts-grid), com_tags (.voy-tag-card-row),
   com_content featured "Latest dispatches" (.items-row). Leading/hero cards live in
   .items-leading and are intentionally excluded (no lift on the big horizontal hero).
   Card: lift + deeper shadow + primary-accent border.  Title: shift to primary. */
.voy-posts-grid .voy-post-card:hover,
.voy-tag-card-row .voy-post-card:hover,
.items-row .voy-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--voy-primary, #C2562F) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.voy-card__title a,
.voy-post-card__title { transition: color 0.18s ease; }
.voy-posts-grid .voy-post-card:hover .voy-card__title a,
.voy-posts-grid .voy-post-card:hover .voy-card__title,
.items-row .voy-post-card:hover .voy-card__title a,
.items-row .voy-post-card:hover .voy-card__title,
.voy-tag-card-row .voy-post-card:hover .voy-post-card__title {
  color: var(--voy-primary, #C2562F) !important; /* beats .voy-post-card__title !important base */
}
html.t4-dark .voy-posts-grid .voy-post-card:hover,
html.t4-dark .voy-tag-card-row .voy-post-card:hover,
html.t4-dark .items-row .voy-post-card:hover {
  border-color: var(--voy-primary, #D86A3F) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
}
html.t4-dark .voy-posts-grid .voy-post-card:hover .voy-card__title a,
html.t4-dark .voy-posts-grid .voy-post-card:hover .voy-card__title,
html.t4-dark .items-row .voy-post-card:hover .voy-card__title a,
html.t4-dark .items-row .voy-post-card:hover .voy-card__title,
html.t4-dark .voy-tag-card-row .voy-post-card:hover .voy-post-card__title {
  color: var(--voy-primary, #D86A3F) !important;
}
.voy-post-card__img {
  height: 200px;
  object-fit: cover;
  width: 100%;
  display: block;
  background: var(--voy-elevated, #F2EBE1);
}
.voy-post-card__img--placeholder {
  height: 200px;
  background: var(--voy-elevated, #F2EBE1);
}
.voy-post-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.voy-post-card__tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: #1F6F6B;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.voy-post-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  line-height: 1.25;
  margin: 0;
}
.voy-post-card__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-text-dim, #8A7E72);
  line-height: 1.6; /* pen bYLB0 QUQUo lineHeight:1.6 */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.voy-post-card__meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--voy-border, #E5DCD0);
}
.voy-post-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--voy-elevated, #F2EBE1);
}
.voy-post-card__author {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--voy-text, #1A1512);
  font-weight: 500;
}
.voy-post-card__date {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--voy-text-dim, #8A7E72);
}
/* dot separator between author and date — matches .pen bYLB0 meta row */
.voy-post-card__author::after {
  content: '\00B7';
  display: inline-block;
  padding: 0 6px;
  color: var(--voy-text-dim, #8A7E72);
  font-weight: 400;
}

/* Related Tags band */
.voy-related-tags {
  background: var(--voy-elevated, #F2EBE1);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-related-tags__inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.voy-related-tags__heading {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  margin: 0;
}
.voy-pill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.voy-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 9999px;
  background: var(--voy-card, #FFFFFF);
  border: 1px solid var(--voy-border, #E5DCD0);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2B2420;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.voy-pill:hover { background: var(--voy-elevated, #F2EBE1); color: var(--voy-text, #1A1512); }
.voy-pill--active {
  background: #1F6F6B;
  color: #FFFFFF;
  border-color: transparent;
}
.voy-pill--active:hover { background: #1a5f5c; color: #FFF; }

/* ─── CTA BAND ─────────────────────────────────────────────────────── */
.voy-cta-band {
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-cta-band--teal  { background: #1F6F6B; }
.voy-cta-band--rust  { background: #C2562F; }
.voy-cta-band__inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.voy-cta-band__title {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.15;
}
.voy-cta-band__sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #FFFFFF;
  opacity: 0.9;
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}
.voy-cta-band__btns {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.voy-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 9999px;
  background: #C2562F;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.voy-btn-primary:hover { background: #a84526; color: #FFF; }
.voy-cta-band--teal .voy-btn-primary { background: #C2562F; }
.voy-btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 9999px;
  background: transparent;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.voy-btn-secondary-outline:hover { border-color: #FFF; background: rgba(255,255,255,0.1); color: #FFF; }
.voy-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #C2562F;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.voy-btn-white:hover { background: #f5ede8; color: #C2562F; }
/* Button/Secondary on CTA band — pen ape1g: white bg, #2B2420 text, #E5DCD0 border, 13px 25px */
.voy-btn-secondary-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 25px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #2B2420;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #E5DCD0;
  cursor: pointer;
  transition: background 0.15s;
}
.voy-btn-secondary-white:hover { background: #f5ede8; color: #2B2420; }

/* ─── TAGS INDEX ───────────────────────────────────────────────────── */
.voy-tags-cloud-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 40px 48px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-tags-cloud-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.voy-tags-cloud-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Cloud pills use same .voy-pill / .voy-pill--active */
.voy-trending-section {
  background: var(--voy-elevated, #F2EBE1);
  padding: 70px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-trending-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.voy-trending-heading {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  margin: 0;
}
.voy-trending-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.voy-tag-card {
  background: var(--voy-card, #FFFFFF);
  border-radius: 22px;
  border: 1px solid var(--voy-border, #E5DCD0);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.voy-tag-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); }
.voy-tag-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512);
  margin: 0;
  line-height: 1.15;
}
/* Icon chip in trending card top (pen DXmZi: 40×40, r14, #F2EBE1, rust icon 20×20) */
.voy-tag-card__chip {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 14px;
  background: var(--voy-elevated, #F2EBE1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--voy-primary, #C2562F);
  flex-shrink: 0;
}
.voy-tag-card__chip svg { width: 20px; height: 20px; }
.voy-tag-card__count {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: #1F6F6B;
  margin: 0;
  font-weight: 400;
}
.voy-tag-card__num {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--voy-text-dim, #8A7E72);
}
.voy-tag-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.voy-tag-card__arrow {
  font-size: 18px;
  color: var(--voy-text-dim, #8A7E72);
  transition: transform 0.15s;
}
.voy-tag-card:hover .voy-tag-card__arrow { transform: translateX(3px); }
.voy-tag-card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-text-dim, #8A7E72);
  line-height: 1.55;
  margin: 0;
}
.voy-trending-grid { display: flex; flex-direction: column; gap: 24px; }
/* Cloud pill variants */
.voy-pill--cloud {
  font-weight: 500;
  padding: 9px 18px;
}
.voy-pill--featured {
  background: #1F6F6B;
  color: #FFFFFF;
  border-color: transparent;
  font-weight: 700;
}
.voy-pill--featured:hover { background: #1a5f5c; }
.voy-tags-cloud-rows { display: flex; flex-direction: column; gap: 16px; }

/* ─── AUTHOR LISTING ───────────────────────────────────────────────── */
/* Team card (.pen Card/Team) */
.voy-team-card {
  clip-path: none;
  border-radius: 22px;
  border: 1px solid var(--voy-border, #E5DCD0);
  background: var(--voy-surface, #FFFFFF);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.voy-team-card--link { text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.voy-team-card--link:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.voy-team-card--link:hover .voy-team-card__name { color: #C2562F; }
html.t4-dark .voy-team-card--link:hover .voy-team-card__name { color: #D86A3F; }
.voy-team-card__photo {
  height: 240px;
  background: var(--voy-elevated, #F2EBE1);
  overflow: hidden;
}
.voy-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voy-team-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.voy-team-card__photo--placeholder span {
  font-size: 56px;
  font-weight: 700;
  color: #C2562F;
  font-family: 'Playfair Display', serif;
}
.voy-team-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.voy-team-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512);
  margin: 0;
  line-height: 1.2;
}
.voy-team-card__role {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: #1F6F6B;
  letter-spacing: 0.5px;
}

/* Quote Band — Author Listing (pen z1GnF9/kYA04/r76ff/UO5Xd/C7FUD) */
.voy-quote-band {
  background: var(--voy-elevated, #F2EBE1);
  padding: 70px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-quote-band__inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.voy-quote-band__text {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512);
  line-height: 1.3;
  max-width: 860px;
  margin: 0;
}
.voy-quote-band__attr {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: #1F6F6B;
  letter-spacing: 0.5px;
  font-style: normal;
}
.voy-quote-band__stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.voy-quote-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.voy-quote-stat__num {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  color: #C2562F;
  line-height: 1;
}
.voy-quote-stat__unit {
  font-size: 24px;
}
.voy-quote-stat__label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-muted, #8A7E72);
}

.voy-authors-masthead {
  background: var(--voy-bg, #FAF6F0);
  padding: 80px 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-authors-masthead-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.voy-writers-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 40px 48px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-writers-inner {
  width: 100%;
  max-width: 1140px;
}
.voy-writers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.voy-author-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.voy-author-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--voy-elevated, #F2EBE1);
  display: block;
}
.voy-author-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  margin: 0;
  line-height: 1.2;
}
.voy-author-card__role {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: #C2562F;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}
.voy-author-card__bio {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-text-dim, #8A7E72);
  line-height: 1.6;
  margin: 0;
}
/* ─── SEARCH ───────────────────────────────────────────────────────── */
.voy-search-masthead {
  background: var(--voy-bg, #FAF6F0);
  padding: 64px 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-search-masthead-inner {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.voy-search-title {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  margin: 0;
  line-height: 1.1;
}
.voy-search-box {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--voy-card, #FFFFFF);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 9999px;
  padding: 8px 8px 8px 20px;
  width: 100%;
}
.voy-search-box svg,
.voy-search-icon {
  width: 20px;
  height: 20px;
  color: var(--voy-text-dim, #8A7E72);
  flex-shrink: 0;
}
.voy-search-box input[type="text"],
.voy-search-box .js-finder-search-query,
.voy-search-box .voy-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #2B2420;
  padding: 0 14px;
  min-width: 0;
  border-radius: 0 !important;
}
/* handle awesomplete wrapper (P28) */
.voy-search-box .awesomplete {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.voy-search-box .awesomplete input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #2B2420;
  padding: 0 14px;
}
.voy-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 9999px;
  background: #C2562F;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  text-decoration: none;
}
.voy-search-btn:hover { background: #a84526; color: #FFF; }
.voy-search-count {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-text-dim, #8A7E72);
  margin: 0;
}
/* hide advanced search toggle and label */
.voy-search-wrap .com-finder__search legend,
.voy-search-wrap label[for="q"],
.voy-search-wrap .js-finder-advanced,
.voy-search-wrap .btn-secondary[data-bs-toggle],
.voy-search-wrap .icon-search-plus,
.voy-search-wrap .com-finder__search .form-inline {
  display: none !important;
}

/* Results section */
.voy-search-results {
  background: var(--voy-bg, #FAF6F0);
  padding: 8px 48px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-search-results-inner {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.voy-result-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--voy-border, #E5DCD0);
  text-decoration: none;
  color: inherit;
}
.voy-result-row:last-child { border-bottom: none; }
.voy-result-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--voy-elevated, #F2EBE1);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voy-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voy-result-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.voy-result-type {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--voy-text-dim, #8A7E72);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.voy-result-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512); /* pen p4iwQ fill #1A1512 */
  line-height: 1.3;
  margin: 0;
}
.voy-result-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--voy-text-dim, #8A7E72);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hide native com_finder result markup when inside our custom wrapper */
.voy-search-wrap .com-finder__results .result-title { display: none; }

/* Pagination */
.voy-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}
.voy-pagination .page-link,
.voy-pagination a,
.voy-pagination span {
  width: 40px;
  height: 40px;
  border-radius: 8px !important;
  background: var(--voy-card, #FFFFFF) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2B2420 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.voy-pagination .active .page-link,
.voy-pagination .active a,
.voy-pagination .page-item.active .page-link {
  background: #C2562F !important;
  border-color: #C2562F !important;
  color: #FFFFFF !important;
}

/* Popular Searches */
.voy-popular-searches {
  background: var(--voy-elevated, #F2EBE1);
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voy-popular-searches__inner {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.voy-popular-searches__title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--voy-text, #1A1512);
  text-align: center;
  margin: 0;
}
.voy-popular-searches__pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.voy-popular-searches__row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Popular searches row layout (new PHP uses -rows/-row without double underscore) */
.voy-popular-searches-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.voy-popular-searches-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── DARK MODE ─────────────────────────────────────────────────────── */
html.t4-dark .voy-tax-masthead,
html.t4-dark .voy-tag-grid-section,
html.t4-dark .voy-tags-cloud-section,
html.t4-dark .voy-writers-section,
html.t4-dark .voy-search-masthead,
html.t4-dark .voy-search-results { background: #15110E; }

html.t4-dark .voy-authors-masthead { background: #15110E; }
html.t4-dark .voy-team-card { background: #211B16; border-color: #352C24; }
html.t4-dark .voy-team-card__photo { background: #1C1712; }
html.t4-dark .voy-team-card__name { color: #FBF6EF; }
html.t4-dark .voy-team-card__role { color: #46A39D; }
html.t4-dark .voy-quote-band { background: #1C1712; }
html.t4-dark .voy-quote-band__text { color: #FBF6EF; }
html.t4-dark .voy-quote-band__attr { color: #46A39D; }
html.t4-dark .voy-quote-stat__num { color: #FBF6EF; }
html.t4-dark .voy-quote-stat__label { color: #9C9085; }
html.t4-dark .voy-tax-title { color: #FBF6EF; }
html.t4-dark .voy-trending-heading { color: #FBF6EF; }
html.t4-dark .voy-related-tags__heading { color: #FBF6EF; }
html.t4-dark .voy-author-card__name { color: #FBF6EF; }
html.t4-dark .voy-search-title { color: #FBF6EF; }
html.t4-dark .voy-result-title { color: #FBF6EF; }
html.t4-dark .voy-popular-searches__title { color: #FBF6EF; }
html.t4-dark .voy-tag-card__name { color: #FBF6EF; }
html.t4-dark .voy-tag-card__chip { background: #1C1712; color: #D86A3F; }
html.t4-dark .voy-post-card__title { color: #FBF6EF; }
html.t4-dark .voy-post-card__author { color: #E8DFD4; }

html.t4-dark .voy-related-tags,
html.t4-dark .voy-trending-section,
html.t4-dark .voy-quote-band,
html.t4-dark .voy-popular-searches { background: #1C1712; }

html.t4-dark .voy-post-card,
html.t4-dark .voy-tag-card {
  background: #211B16;
  border-color: #352C24;
}
html.t4-dark .voy-post-card__meta { border-color: #352C24; }
html.t4-dark .voy-result-row { border-color: #352C24; }
html.t4-dark .voy-pill {
  background: #211B16;
  border-color: #352C24;
  color: #E8DFD4;
}
html.t4-dark .voy-pill:hover { background: #2a2018; }
html.t4-dark .voy-pill--active { background: #1F6F6B; color: #FFF; border-color: transparent; }
html.t4-dark .voy-search-box {
  background: #211B16;
  border-color: #352C24;
}
html.t4-dark .voy-search-box input[type="text"],
html.t4-dark .voy-search-box .js-finder-search-query,
html.t4-dark .voy-search-box .awesomplete input { color: #E8DFD4; }
html.t4-dark .voy-result-thumb { background: #1C1712; }
html.t4-dark .voy-popular-searches__pills .voy-pill { background: #211B16; border-color: #352C24; color: #E8DFD4; }
html.t4-dark .voy-pagination .page-link,
html.t4-dark .voy-pagination a,
html.t4-dark .voy-pagination span {
  background: #211B16 !important;
  border-color: #352C24 !important;
  color: #E8DFD4 !important;
}
html.t4-dark .voy-cta-band--teal { background: #46A39D; }
html.t4-dark .voy-cta-band--rust { background: #D86A3F; }
html.t4-dark .voy-quote-band__text { color: #FBF6EF; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .voy-tax-masthead,
  .voy-tag-grid-section,
  .voy-tags-cloud-section,
  .voy-trending-section,
  .voy-related-tags,
  .voy-cta-band,
  .voy-authors-masthead,
  .voy-writers-section,
  .voy-quote-band,
  .voy-search-masthead,
  .voy-search-results,
  .voy-popular-searches { padding-left: 20px; padding-right: 20px; }

  .voy-tax-masthead { padding-top: 36px; padding-bottom: 20px; }
  .voy-tax-title { font-size: 30px; }
  .voy-tax-subtitle, .voy-tax-count { font-size: 14px; }
  .voy-trending-row { grid-template-columns: 1fr; gap: 16px; }
  /* Tag page mobile grid: pen JDUDL Z0CAy3 gap:20 (uniform between all stacked cards) */
  .voy-tag-card-row { grid-template-columns: 1fr; gap: 20px; }
  .voy-writers-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .voy-cta-band__title { font-size: 24px; }
  .voy-cta-band { padding: 48px 20px; }
  .voy-search-masthead { padding-top: 36px; padding-bottom: 24px; }
  .voy-search-title { font-size: 26px; }
  .voy-search-btn { padding: 12px 16px; }
  .voy-search-btn-label { display: none; }
  .voy-search-btn i { display: block; }
  .voy-search-box { padding: 6px 6px 6px 16px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .voy-tag-card-row,
  .voy-trending-row { grid-template-columns: repeat(2, 1fr); }
  .voy-writers-grid { grid-template-columns: repeat(2, 1fr); }
}
/* §5.14 F1/F2 uniform band gutter: the full-bleed taxonomy bands carry a 48px
   horizontal design token (matches the desktop header inset) that only stepped to
   20px at ≤767 — so at tablet/intermediate (768–1199) taxonomy content sat at ~894
   (48px gutter) while article/ACM pages sat at ~950–958 (16–20px). Step the
   horizontal gutter down to 20px across the whole sub-desktop range so every page's
   content band resolves to the same width. Inners stay max-width:1140 (cap unchanged
   ≥1200). Longhand keeps each band's vertical padding. Search bands (860 inner) excluded. */
@media (max-width: 1199.98px) {
  .voy-tax-masthead,
  .voy-tag-grid-section,
  .voy-related-tags,
  .voy-cta-band,
  .voy-tags-cloud-section,
  .voy-trending-section,
  .voy-quote-band,
  .voy-authors-masthead,
  .voy-writers-section,
  /* Breadcrumb bands + straggler content bands that were omitted above and
     therefore sat at 48px through 768–1199 while sibling content sat at 20px.
     (Actual writers-grid class is .voy-writers-grid-section, not the stale
     .voy-writers-section kept above for safety.) Author-detail bands were not
     stepped at all. Bring them all to the same 20px sub-desktop gutter. */
  .voy-tax-bc-band,
  .voy-authors-bc-band,
  .voy-writers-grid-section,
  .voy-authdet-masthead,
  .voy-authdet-bc-band,
  .voy-authdet-body,
  /* Categories (com_content categories → allcat.css) + tree bands. taxonomy.css
     is loaded on those views; !important longhand beats allcat's shorthand. */
  .voy-allcat-masthead,
  .voy-allcat-breadcrumb,
  .voy-allcat-grid-section,
  .voy-allcat-cta-band,
  .voy-cattree-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ─── PHP-TEMPLATE CLASS ALIASES ────────────────────────────────────── */
/* Bridge between CSS class names and PHP template class names */

/* Search page sections */
.voy-search-form-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 36px 48px 0;
  display: flex; flex-direction: column; align-items: center;
}
.voy-search-form-inner {
  width: 100%; max-width: 860px;
}
.voy-search-form-wrap { width: 100%; }
.voy-search-results-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 8px 48px 72px;
  display: flex; flex-direction: column; align-items: center;
}
.voy-search-results-list { width: 100%; max-width: 860px; }
.voy-result-body {
  display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0;
}
.voy-result-date {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--voy-text-dim, #8A7E72); letter-spacing: 0.5px;
}
.voy-result-url { font-size: 11px; color: var(--voy-text-dim, #8A7E72); }
/* pen FjJ7Z p4iwQ result title fill = #1A1512 (heading), not --voy-text #2B2420 */
.voy-result-title a { color: var(--voy-heading, #1A1512); text-decoration: none; }
.voy-result-title a:hover { color: #C2562F; }
.voy-search-empty {
  padding: 48px 0; text-align: center;
}
.voy-search-suggested, .voy-search-explained {
  font-size: 14px; color: var(--voy-text-dim, #8A7E72); margin-bottom: 8px;
}
/* Pen ltmCt shows only the masthead count "About N results for …" — the native
   finder "explained" line duplicates that count, not in the design → hide it.
   ("suggested"/did-you-mean is kept: useful low-results affordance.) */
.voy-search-page .voy-search-explained { display: none !important; }
.voy-search-pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px; padding-top: 24px;
}
.voy-search-pages { display: flex; gap: 4px; }
.voy-search-counter { font-size: 13px; color: var(--voy-text-dim, #8A7E72); }

/* Popular searches aliases */
.voy-popular-searches-inner {
  width: 100%; max-width: 860px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.voy-popular-searches-heading {
  font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700;
  color: var(--voy-text, #1A1512); text-align: center; margin: 0;
}

/* Author listing page aliases */
.voy-authors-page {}
.voy-authors-title {
  font-family: 'Playfair Display', serif; font-size: 54px; font-weight: 700;
  color: var(--voy-text, #1A1512); line-height: 1.1; margin: 0;
}
.voy-authors-sub {
  font-family: 'Inter', sans-serif; font-size: 18px; color: var(--voy-text-dim, #8A7E72);
  max-width: 760px; margin: 0; line-height: 1.6;
}
.voy-writers-grid-section {
  background: var(--voy-bg, #FAF6F0);
  padding: 40px 48px 70px;
  display: flex; flex-direction: column; align-items: center;
}
.voy-writers-grid-inner {
  width: 100%; max-width: 1140px;
}
.voy-author-card__avatar-placeholder {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--voy-elevated, #F2EBE1);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: #C2562F;
}
.voy-author-card__socials {
  display: flex; gap: 10px; margin-top: 6px;
}
.voy-author-social {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--voy-elevated, #F2EBE1); border: 1px solid var(--voy-border, #E5DCD0);
  display: flex; align-items: center; justify-content: center;
  color: var(--voy-text, #1A1512); text-decoration: none; font-size: 12px;
  transition: background 0.2s, color 0.2s;
}
.voy-author-social:hover { background: #C2562F; color: #FFF; border-color: transparent; }

/* Tags index page aliases */
.voy-tags-index-page {}
.voy-tag-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.voy-tag-card__label {
  font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700;
  color: var(--voy-text, #1A1512); margin: 0;
}
html.t4-dark .voy-tag-card__label { color: #FBF6EF; }

/* Search form override — override Joomla finder fieldset styling */
.voy-search-form { width: 100%; }
.voy-search-fieldset { border: none; padding: 0; margin: 0; }
.voy-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: 'Inter', sans-serif; font-size: 16px;
  color: var(--voy-text, #1A1512);
}

/* Dark mode aliases */
html.t4-dark .voy-search-form-section,
html.t4-dark .voy-search-results-section { background: #15110E; }
html.t4-dark .voy-writers-grid-section { background: #15110E; }
html.t4-dark .voy-popular-searches-inner .voy-popular-searches-heading { color: #FBF6EF; }
html.t4-dark .voy-authors-title { color: #FBF6EF; }
html.t4-dark .voy-authors-sub { color: #9C9085; }
html.t4-dark .voy-result-title a { color: #FBF6EF; }
html.t4-dark .voy-author-social { background: #211B16; border-color: #352C24; color: #E8DFD4; }
html.t4-dark .voy-search-empty h2 { color: #FBF6EF; }
html.t4-dark .voy-search-empty p { color: #9B9189; }
html.t4-dark .voy-popular-searches-heading { color: #FBF6EF; }

@media (max-width: 767.98px) {
  .voy-search-form-section, .voy-search-results-section, .voy-writers-grid-section { padding-left: 20px; padding-right: 20px; }
  .voy-tag-cards { grid-template-columns: repeat(2, 1fr); }
  .voy-authors-title { font-size: 30px; }
}

/* ─── TAG PAGE PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-20) ─── */

/* D1 — Breadcrumb placement: the pen (ClK4z) puts the breadcrumb BELOW the
   masthead, but the T4 module #t4-breadcrumbs renders it ABOVE .voy-tag-page —
   which pushed the masthead title ~45px down and left an over-tall gap under the
   header (the masthead already carries its own 80px top padding). Match the pen
   + the sibling views (tags-index/authors render an in-page bc-band below): HIDE
   the T4 breadcrumb here and render .voy-tax-bc-band after the masthead instead.
   The .t4-breadcrumbs child rules below are now inert (hidden parent) but kept
   harmless. Scope: :has(.voy-tag-page) — only the tag detail page. */
:has(.voy-tag-page) .t4-breadcrumbs {
  display: none !important;
}
:has(.voy-tag-page) .t4-breadcrumbs .t4-section-inner {
  padding: 0 !important;
  max-width: 1140px !important;
}
/* Hide the FontAwesome home icon — pen uses text "Home" */
:has(.voy-tag-page) .t4-breadcrumbs .icon.fa.fa-home { display: none !important; }
/* Breadcrumb link/text colors to match pen */
:has(.voy-tag-page) .t4-breadcrumbs .pathway,
:has(.voy-tag-page) .t4-breadcrumbs .mod-breadcrumbs__item a,
:has(.voy-tag-page) .t4-breadcrumbs nav .breadcrumb-item a,
:has(.voy-tag-page) .t4-breadcrumbs nav span:not(.divider):not(.icon) {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #8A7E72 !important;
  text-decoration: none !important;
}
/* Active/current crumb = #2B2420/600
   Joomla marks current page with .breadcrumb-item.active as the last li;
   the span inside may not be a direct child, so target all spans in active item
   except the FA home icon and the divider. */
:has(.voy-tag-page) .t4-breadcrumbs .mod-breadcrumbs__item.active span:not(.icon):not(.divider),
:has(.voy-tag-page) .t4-breadcrumbs .breadcrumb-item.active a,
:has(.voy-tag-page) .t4-breadcrumbs .breadcrumb-item.active > span:not(.icon):not(.divider) {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2B2420 !important;
}
/* Separator arrows — T4 uses .divider text; restyle to match pen 14px icon color */
:has(.voy-tag-page) .t4-breadcrumbs .divider {
  font-size: 13px !important;
  color: #8A7E72 !important;
  margin: 0 2px !important;
}
/* Dark: breadcrumb band bg */
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs {
  background: #15110E !important;
}
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs .pathway,
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs nav .breadcrumb-item a,
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs nav span:not(.divider):not(.icon),
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs .divider {
  color: #9C9085 !important;
}
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs .mod-breadcrumbs__item.active span:not(.icon):not(.divider),
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs .breadcrumb-item.active a,
html.t4-dark :has(.voy-tag-page) .t4-breadcrumbs .breadcrumb-item.active > span:not(.icon):not(.divider) {
  color: #E8DFD4 !important;
}

/* D1b — Dark masthead eyebrow color: pen OuTnf J57Wlw fill=#D86A3F (dark primary),
   not the light #C2562F. The base `.voy-eyebrow{color:#C2562F!important}` has no dark
   override → eyebrow stayed light-rust in dark. Scope to tag page + !important to win. */
html.t4-dark body.view-tag .voy-tax-masthead .voy-eyebrow,
html.t4-dark :has(.voy-tag-page) .voy-tax-masthead .voy-eyebrow { color: #D86A3F !important; }

/* D2 — Card title color: pen bYLB0 W9YLW fill=#1A1512 (heading), not #2B2420 (text) */
.voy-post-card__title {
  color: var(--voy-heading, #1A1512) !important;
}
html.t4-dark .voy-post-card__title { color: #FBF6EF !important; }

/* D3 — Card author font-weight: pen bYLB0 TGqWa fontWeight:'normal' (400), not 500 */
.voy-post-card__author { font-weight: 400 !important; }

/* D4 — Related tags heading color: pen WzH26 fill=#1A1512 (heading), not #2B2420 (text) */
.voy-related-tags__heading {
  color: var(--voy-heading, #1A1512) !important;
}
html.t4-dark .voy-related-tags__heading { color: #FBF6EF !important; }

/* D5 — Pill font-weight: pen pill text gHubX fontWeight:500 */
.voy-pill { font-weight: 500 !important; }

/* D6 — Secondary button H-padding: pen ape1g padding=[13,25], live 26px */
.voy-btn-secondary-outline { padding: 13px 25px !important; }

/* D7 — Mobile: masthead eyebrow FS 11px (pen JDUDL n5DQi fontSize:11)
   The global .voy-eyebrow has font-size:13px !important which overrides everything.
   Need higher specificity + !important in mobile. */
@media (max-width: 767.98px) {
  :has(.voy-tag-page) .voy-tax-masthead .voy-eyebrow,
  .voy-tag-page .voy-tax-masthead .voy-eyebrow { font-size: 11px !important; }

  /* D8 — Mobile: masthead inner gap: pen JDUDL Om4o9 gap:10 */
  .voy-tax-masthead-inner { gap: 10px !important; }

  /* D9 — Mobile: grid inner gap (between rows): pen Z0CAy3 gap:20 */
  .voy-tag-grid-inner { gap: 20px !important; }

  /* D10 — Mobile: grid PB: pen Z0CAy3 padding=[8,20,40,20] → pb=40 */
  .voy-tag-grid-section { padding-bottom: 40px !important; }

  /* D11 — Mobile: related tags PT/PB: pen JDUDL rs76o padding=[40,20] */
  .voy-related-tags { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* D12 — Mobile: related tags heading FS: pen JDUDL LqULk fontSize:20 */
  .voy-related-tags__heading { font-size: 20px !important; }

  /* D13 — Mobile: related tags inner gap: pen JDUDL rs76o gap:14 */
  .voy-related-tags__inner { gap: 14px !important; }

  /* Mobile pill cloud: pen OqWk7 gap:8 between rows and pills (not desktop 12px) */
  :has(.voy-tag-page) .voy-pill-cloud { gap: 8px !important; }
  /* Mobile pill padding: pen U0xbOe padding=[8,14] (not desktop 9px 18px) */
  :has(.voy-tag-page) .voy-pill { padding: 8px 14px !important; font-size: 13px !important; }

  /* D14 — Mobile: NO breadcrumb on the single-tag page. Pen JDUDL goes
     Header → Masthead → Grid (no breadcrumb band). The T4 #t4-breadcrumbs
     module still renders a 46px "Home Tags Tags" strip on mobile → hide it.
     [BREADCRUMB-MOBILE] */
  body.view-tag .t4-breadcrumbs,
  :has(.voy-tag-page) .t4-breadcrumbs { display: none !important; }
}

/* ORCHESTRATOR FIX: hide stray T4 masthead on single-tag view (com_tags override renders its own
   #TagName title via .voy-tax-title). The T4 masthead was showing the wrong text ("Peru" = first
   article's region) above the correct "#Europe" header — a duplicate masthead. .pen shows one header. */
body.view-tag .t4-masthead { display:none !important; }

/* ─── TAG PAGE CTA — DESKTOP / MOBILE SWAP ──────────────────────────────
   Desktop (.pen RBxYT P1E2p): "Make slow travel a habit" + 2 buttons (Follow+Explore)
   Mobile  (.pen JDUDL RMvsA): "Never miss a slow-travel story" + 1 white "Subscribe" btn
   ──────────────────────────────────────────────────────────────────────── */
.voy-tag-cta__title--mobile,
.voy-tag-cta__btns--mobile  { display: none !important; }
.voy-tag-cta__title--desktop,
.voy-tag-cta__sub--desktop,
.voy-tag-cta__btns--desktop  { display: block; }
/* btns row needs flex, not block */
.voy-tag-cta__btns--desktop { display: flex !important; }

@media (max-width: 767.98px) {
  .voy-tag-cta__title--desktop,
  .voy-tag-cta__sub--desktop,
  .voy-tag-cta__btns--desktop  { display: none !important; }
  .voy-tag-cta__title--mobile  { display: block !important; }
  .voy-tag-cta__btns--mobile   { display: flex !important; }
  /* Mobile CTA title: pen sdxg7 24px/700/lh1.15 */
  :has(.voy-tag-page) .voy-tag-cta__title--mobile {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  /* Mobile subscribe btn: pen XOo7y padding=[13,24] Inter 15/600 color=#1F6F6B bg=#FFF */
  :has(.voy-tag-page) .voy-btn-white {
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TAGS INDEX PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-20)
   All rules scoped to body.view-tags / .voy-tags-index-page to avoid
   colliding with the single-tag view (body.view-tag / .voy-tag-page).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hide T4 auto-breadcrumbs on tags-index (we render custom .voy-tax-bc-band) ── */
body.view-tags .t4-breadcrumbs { display: none !important; }

/* ── Custom breadcrumb band (replaces T4 module; pen VjX2C) ─────────────
   .pen: fill=$bg, padding=[0,48,8,48]; crumbs 13/normal/$muted; current 13/600/$text */
.voy-tax-bc-band {
  background: var(--voy-bg, #FAF6F0);
  padding: 0 48px 8px;
  display: flex;
  align-items: center;
}
.voy-tax-bc-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.voy-tax-bc-link {
  color: var(--voy-muted, #8A7E72);
  text-decoration: none;
}
.voy-tax-bc-link:hover { color: var(--voy-text, #2B2420); }
.voy-tax-bc-sep {
  color: var(--voy-muted, #8A7E72);
  font-size: 12px;
}
.voy-tax-bc-current {
  color: #2B2420;
  font-weight: 600;
}
/* Dark */
html.t4-dark .voy-tax-bc-band { background: #15110E; }
html.t4-dark .voy-tax-bc-link,
html.t4-dark .voy-tax-bc-sep { color: #9C9085; }
html.t4-dark .voy-tax-bc-current { color: #E8DFD4; }
/* Mobile: hide breadcrumb band (pen mobile frame has no breadcrumb) */
@media (max-width: 767.98px) {
  .voy-tax-bc-band { display: none; }
}

/* ── Eyebrow dual-text: desktop="TAGS", mobile="ALL TAGS" ─────────────
   Pen desktop aXmTi: "TAGS"; mobile bLXyn: "ALL TAGS"
   Must use !important because .voy-eyebrow base sets display:flex */
.voy-tags-eyebrow--mobile  { display: none !important; }
.voy-tags-eyebrow--desktop { display: inline-flex !important; }
@media (max-width: 767.98px) {
  .voy-tags-eyebrow--desktop { display: none !important; }
  .voy-tags-eyebrow--mobile  { display: inline-flex !important; }
}

/* ── D2: Masthead inner gap — pen SNhz3 gap:16, live 14px ───────────── */
body.view-tags .voy-tax-masthead-inner { gap: 16px !important; }

/* ── D2b: Featured (teal) cloud pills are BOLD in the design ───────────
   Pen weighted cloud: featured pills (#SlowTravel 28/700, #Islands 22/700)
   use fontWeight 700; regular pills (#StreetFood 16/500) use 500. The base
   `.voy-pill{font-weight:500!important}` (D5) forces ALL pills to 500, so the
   featured pills lost their bold. Restore 700 on featured cloud pills only. */
body.view-tags .voy-pill--cloud.voy-pill--featured { font-weight: 700 !important; }

/* ── D3: Trending heading color — pen DjLgU fill=$heading (#1A1512) ─── */
body.view-tags .voy-trending-heading {
  color: var(--voy-heading, #1A1512) !important;
}
html.t4-dark body.view-tags .voy-trending-heading { color: #FBF6EF !important; }

/* ── D19: Dark mode — featured pills flip to the DARK secondary (#46A39D) ──
   The design system binds the featured pill to $secondary, which is #1F6F6B in
   light and #46A39D in dark (pen dark frame C4EKn2 featured pill fill sampled
   = rgb(70,163,157)). The base `html.t4-dark .voy-pill{background:#211B16}` fires
   even for --featured, so this needs !important to win. [DARK-ACCENT-NOT-FLIPPED] */
html.t4-dark .voy-pill--featured {
  background: #46A39D !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
html.t4-dark .voy-pill--featured:hover { background: #3a8d88 !important; }

/* ── D20: tags-index dark accents flip with the palette ───────────────────
   Pen dark frame qj89X: eyebrow = $primary dark #D86A3F (ET9E0 sampled
   rgb(216,106,63)); trending count = $secondary dark #46A39D (k0Bdj sampled
   rgb(70,163,157)). The base .voy-eyebrow forces #C2562F and the count is a
   hardcoded #1F6F6B — neither has a dark entry. [DARK-ACCENT-NOT-FLIPPED] */
html.t4-dark body.view-tags .voy-tax-masthead .voy-eyebrow { color: #D86A3F !important; }
html.t4-dark body.view-tags .voy-tag-card__count { color: #46A39D; }

/* ── D21: dark CTA secondary button on the rust band ──────────────────────
   Pen dark frame CTA (Noefd): button-2 fill = $surface dark #211B16, text =
   $text dark #E8DFD4, border = $border dark #352C24 (sampled). In light it is
   the white-fill variant; in dark it must flip to the dark surface. */
html.t4-dark body.view-tags .voy-tags-cta .voy-btn-secondary-white {
  background: #211B16;
  color: #E8DFD4;
  border-color: #352C24;
}
html.t4-dark body.view-tags .voy-tags-cta .voy-btn-secondary-white:hover {
  background: #2a221c;
  color: #FBF6EF;
}

/* ── TRENDING GRID vs CHIPS: desktop shows grid, mobile shows chips ───── */
.voy-trending-grid--desktop { display: flex; flex-direction: column; gap: 24px; }
.voy-trending-chips--mobile  { display: none; }

/* ── MOBILE CHIP STYLES (pen e09dRN/ZfgLt/k7KfS) ─────────────────────
   chip = $surface card, r=$radius-md(14), p=16, gap=12, border=$border 1px
   icon box: $elevated fill, r=$radius-sm(8), 40×40
   name: $heading/Inter/15/600
   count: $muted/Inter/12/normal */
.voy-trend-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--voy-surface, #FFFFFF);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
  width: 100%;
}
.voy-trend-chip:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.voy-trend-chip__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: var(--voy-elevated, #F2EBE1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--voy-primary, #C2562F);
}
.voy-trend-chip__icon svg,
.voy-trend-chip__icon i { width: 19px; height: 19px; }
.voy-trend-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.voy-trend-chip__name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--voy-heading, #1A1512);
  line-height: 1.2;
}
.voy-trend-chip__count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--voy-muted, #8A7E72);
}

/* Dark: chips */
html.t4-dark .voy-trend-chip {
  background: var(--voy-surface, #211B16);
  border-color: #352C24;
}
html.t4-dark .voy-trend-chip__icon { background: #1C1712; }
html.t4-dark .voy-trend-chip__name { color: #FBF6EF; }

/* ── CTA dual-title: show/hide per breakpoint ────────────────────────── */
/* Desktop: "Build your own reading list" + 2 buttons */
/* Mobile:  "Find your next story" + 1 button (pen oKV4G) */
.voy-tags-cta__title--mobile  { display: none; }
.voy-tags-cta__title--desktop { display: block; }
.voy-tags-cta__btn--mobile   { display: none; }
.voy-tags-cta__btn--desktop  { display: inline-flex; }

/* ── Trending heading desktop/mobile swap ─────────────────────────────── */
/* Desktop: "Trending this week" 30px (pen DjLgU); Mobile: "Trending tags" 22px (pen AMTXl) */
.voy-trending-heading--desktop { display: block; }
.voy-trending-heading--mobile  { display: none; }

/* ── MOBILE OVERRIDES (≤767.98px) ────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Masthead: pen zucv5 padding=[36,20,24,20] gap:12; eyebrow 11px "ALL TAGS" */
  body.view-tags .voy-tax-masthead {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }
  body.view-tags .voy-tax-masthead-inner { gap: 12px !important; }
  /* Eyebrow on mobile: 11px (pen bLXyn fontSize:11)
     Note: global .voy-eyebrow has 13px !important — must use body.view-tags specificity */
  body.view-tags .voy-tax-masthead .voy-eyebrow { font-size: 11px !important; }
  /* Mobile: hide the subtitle (pen mobile frame has no subtitle) */
  body.view-tags .voy-tax-masthead .voy-tax-subtitle { display: none !important; }
  /* Mobile title: pen DWHE0 fontSize:28 (desktop is 54px via .voy-tax-title base) */
  body.view-tags .voy-tax-title { font-size: 28px !important; }
  /* Trending heading swap: show mobile, hide desktop */
  .voy-trending-heading--desktop { display: none !important; }
  .voy-trending-heading--mobile  { display: block !important; font-size: 22px !important; }

  /* Cloud section: pen D6fN5Q padding=[8,20,40,20] gap:14 with cloud gap:8 */
  body.view-tags .voy-tags-cloud-section {
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }
  body.view-tags .voy-tags-cloud-inner { gap: 14px !important; }
  body.view-tags .voy-tags-cloud-rows  { gap: 8px !important; }
  body.view-tags .voy-tags-cloud-row   { gap: 8px !important; }
  /* Smaller pills on mobile */
  body.view-tags .voy-pill--cloud { font-size: 14px !important; padding: 7px 14px !important; }
  /* Mobile non-featured cloud pills = $elevated #F2EBE1 (pen D6fN5Q), not $surface white */
  body.view-tags .voy-pill--cloud:not(.voy-pill--featured):not(.voy-pill--active) {
    background: var(--voy-elevated, #F2EBE1) !important;
  }
  /* Mobile featured cloud pill = RUST (pen mobile cloud D6fN5Q featured fill sampled
     = #C2562F rgb(194,86,47), NOT the desktop teal). Dark mobile → dark primary #D86A3F. */
  body.view-tags .voy-pill--featured {
    background: #C2562F !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
  }
  body.view-tags .voy-pill--featured:hover { background: #a6451f !important; }
  html.t4-dark body.view-tags .voy-pill--featured { background: #D86A3F !important; }
  html.t4-dark body.view-tags .voy-pill--featured:hover { background: #e27e55 !important; }

  /* Trending section: pen ZfgLt padding=[40,20] gap:16 */
  body.view-tags .voy-trending-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.view-tags .voy-trending-inner { gap: 16px !important; }

  /* Show chip layout; hide desktop grid */
  .voy-trending-grid--desktop { display: none !important; }
  .voy-trending-chips--mobile  { display: flex; flex-direction: column; gap: 16px; }

  /* CTA on mobile: pen oKV4G padding=[48,20] gap:16; no sub text */
  body.view-tags .voy-tags-cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  /* Hide CTA subtitle on mobile (pen oKV4G has no sub text — title + btn only) */
  body.view-tags .voy-tags-cta .voy-cta-band__sub { display: none !important; }
  /* Swap CTA title and buttons */
  .voy-tags-cta__title--desktop { display: none !important; }
  .voy-tags-cta__title--mobile  { display: block !important; }
  .voy-tags-cta__btn--desktop   { display: none !important; }
  .voy-tags-cta__btn--mobile    { display: inline-flex !important; }
  /* Single white button: pen ITyT7 padding=[13,24] fs:15/600 */
  body.view-tags .voy-tags-cta .voy-btn-white {
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTHOR LISTING PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-20)
   All rules scoped to :has(.voy-authors-page) or .voy-authors-page.
   ════════════════════════════════════════════════════════════════════════ */

/* DA-1 — Suppress T4 breadcrumbs on author list (page renders its own masthead) */
:has(.voy-authors-page) .t4-breadcrumbs { display: none !important; }

/* DA-7 — Stat num color: pen UO5Xd fill=#C2562F rust (already fixed in base rule above) */
/* DA-6 — Stat num FS: 40px (already fixed in base rule above) */
/* DA-8 — Stat label FS: 14px (already fixed in base rule above) */
/* DA-9/DA-10 — Quote band inner gap:36/max-width:1140 (duplicate removed above) */
/* DA-11 — Masthead inner gap: 16px (already fixed in base rule above) */
/* DA-12 — Sub max-width: 760px (already fixed in base rule above) */
/* DA-3 — Quote text font: 30px/700 (already fixed in base rule above) */
/* DA-4 — Quote attr color: #1F6F6B teal (already fixed in base rule above) */

/* Dark mode: stat num stays #FBF6EF (not rust in dark — pen ag37q stat num color is light) */
html.t4-dark .voy-quote-stat__num { color: #FBF6EF; }

/* ── MOBILE AUTHOR LISTING OVERRIDES (≤767.98px) ───────────────────── */
@media (max-width: 767.98px) {
  /* DA-M1/DA-M2 — Masthead PT=40 PB=16 (pen aU9Pt q0wGL padding=[40,20,16,20]) */
  :has(.voy-authors-page) .voy-authors-masthead {
    padding-top: 40px !important;
    padding-bottom: 16px !important;
  }

  /* DA-M3 — Mobile title FS: 32px (pen d0yrty fontSize:32) */
  .voy-authors-title { font-size: 32px !important; }

  /* DA-M4 — Mobile sub FS: 15px (pen ETmsW fontSize:15) */
  .voy-authors-sub { font-size: 15px !important; }

  /* DA-M5 — Mobile writers section PT: 16px (pen k0hsM padding=[16,20,40,20]) */
  .voy-writers-grid-section { padding-top: 16px !important; }

  /* DA-M6 — Mobile writers grid gap: 16px (pen mobile gap:16) */
  :has(.voy-authors-page) .voy-writers-grid { gap: 16px !important; }

  /* DA-M7 — Mobile quote band PT/PB: 48px (pen LVcRC padding=[48,20]) */
  :has(.voy-authors-page) .voy-quote-band {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* DA-M8 — Mobile quote text FS: 20px (pen o4rcn fontSize:20) */
  :has(.voy-authors-page) .voy-quote-band__text { font-size: 20px !important; }

  /* DA-M9 — Mobile CTA title FS: 27px (pen ScSp0 fontSize:27) */
  :has(.voy-authors-page) .voy-cta-band__title { font-size: 27px !important; }

  /* DA-M10 — Mobile CTA sub FS: 15px (pen NkERm fontSize:15) */
  :has(.voy-authors-page) .voy-cta-band__sub { font-size: 15px !important; }

  /* DA-M11 — Mobile breadcrumb FS 12 / gap 7 (pen aU9Pt XVDLj fontSize:12 gap:7; desktop is 13/8) */
  :has(.voy-authors-page) .voy-authors-bc-inner { font-size: 12px !important; gap: 7px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SEARCH PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-20)
   All rules scoped to :has(.voy-search-page) or body.view-search.
   ════════════════════════════════════════════════════════════════════════ */

/* DS-2 — Suppress T4 breadcrumbs on search (masthead is the top element) */
:has(.voy-search-page) .t4-breadcrumbs { display: none !important; }

/* DS-1 — Eyebrow FS: 12px on search (scoped above in eyebrow block, kept here for clarity) */
/* Already: :has(.voy-search-page) .voy-eyebrow { font-size: 12px !important; } */

/* DS-4 — Result title font: Playfair Display 20px/700 (already fixed in base .voy-result-title) */
/* DS-4 dark: ensure result title link also uses correct color */
html.t4-dark .voy-result-title a { color: #FBF6EF !important; }

/* DS-9 — Pill padding: 9px/18px (already fixed in base .voy-pill rule) */

/* DS-5 — Fallback thumb icon: same box as image thumb */
.voy-result-thumb--icon {
  color: var(--voy-text-dim, #8A7E72);
}
html.t4-dark .voy-result-thumb--icon { background: #1C1712; }

/* DS-3 — Result type label: Geist Mono 11px teal #1F6F6B (pen oYQeL) */
.voy-result-type {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: #1F6F6B;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
html.t4-dark .voy-result-type { color: #46A39D; }

/* DS-8: Search filter bar (.pen fWCil — bottom-border row, pill tabs) */
.voy-search-page .voy-search-filters { padding:0 0 16px; border-bottom:1px solid var(--voy-border); margin-bottom:24px; }
.voy-search-page .voy-search-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.voy-search-page .voy-search-tab {
  font-family:var(--voy-font-body); font-size:14px; font-weight:500; line-height:1;
  padding:8px 16px; border-radius:9999px; border:1px solid transparent;
  background:var(--voy-elevated, #F2EBE1); color:var(--voy-text, #2B2420); cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.voy-search-page .voy-search-tab:hover { background:#e8dfd2; }
.voy-search-page .voy-search-tab.is-active { background:var(--voy-primary); color:#fff; border-color:var(--voy-primary); }
html.t4-dark .voy-search-page .voy-search-tab.is-active { color:#fff; }

/* ════════════════════════════════════════════════════════════════════════
   AUTHOR LISTING PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-21)
   ════════════════════════════════════════════════════════════════════════ */

/* A1 — Breadcrumb band (pen r9LvX O0pqi / x0ZnO6 US6zE)
   bg=$bg, padding=[0,48,8,48], crumbs Inter 13/400/$muted, current 13/600/$text, gap:8 */
.voy-authors-bc-band {
  background: var(--voy-bg, #FAF6F0);
  padding: 0 48px 8px;
  display: flex;
  align-items: center;
}
.voy-authors-bc-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
}
html.t4-dark .voy-authors-bc-band { background: #15110E; }

/* A2 — CTA secondary button: pen ape1g = white fill, $text color, $border stroke
   On teal band the ghost .voy-btn-secondary-outline reads white but uses transparent bg.
   .voy-btn-secondary-white (already defined above) is the correct white-fill variant. */
/* Already correct: .voy-btn-secondary-white = white bg / #2B2420 text / #E5DCD0 border.
   The PHP now emits .voy-btn-secondary-white. Confirm dark variant is clean on teal. */
.voy-cta-band--teal .voy-btn-secondary-white {
  background: #FFFFFF !important;
  color: #2B2420 !important;
  border-color: #E5DCD0 !important;
}
html.t4-dark .voy-cta-band--teal .voy-btn-secondary-white {
  background: #FFFFFF !important;
  color: #2B2420 !important;
  border-color: #E5DCD0 !important;
}

/* A3 — Stats nums color in dark: pen x0ZnO6 m0Yke → $primary=dark #D86A3F */
html.t4-dark .voy-quote-stat__num {
  color: #D86A3F !important;
}

/* A4 — Mobile masthead-inner gap: pen aU9Pt q0wGL gap:14 (live=16) */
@media (max-width: 767.98px) {
  .voy-authors-masthead-inner { gap: 14px !important; }
}

/* A5 — Mobile writers grid: pen aU9Pt k0hsM → cards fill_container stacked (1 col)
   Note: desktop is 4-col via .voy-writers-grid. Mobile must be 1 col. */
@media (max-width: 767.98px) {
  .voy-writers-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* Tablet (768-991): keep 2 col per existing rule — override the generic 2-col that also covers .voy-writers-grid */
@media (min-width: 768px) and (max-width: 991.98px) {
  .voy-writers-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* A6 — Mobile writers-section PB: pen aU9Pt k0hsM padding=[16,20,40,20] → pb=40 (live=70) */
@media (max-width: 767.98px) {
  .voy-writers-grid-section { padding-bottom: 40px !important; }
}

/* A7 — Mobile quote-band inner gap: pen aU9Pt sNoTU gap:24 (live=36) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-quote-band__inner { gap: 24px !important; }
}

/* A8 — Mobile stats gap: pen jeJHn gap:16 (live=24) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-quote-band__stats { gap: 16px !important; }
}

/* A9 — Mobile stat num fontSize: pen LrYNP 28px (live=40px) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-quote-stat__num { font-size: 28px !important; }
}

/* A10/A12 — Mobile stat item gap: pen O89r9 gap:4 (live=6px) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-quote-stat { gap: 4px !important; }
}

/* A10 — Mobile stat label fontSize: pen tgMD7 12px (live=14px) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-quote-stat__label { font-size: 12px !important; }
}

/* A11 — Mobile stat label shortened text:
   PHP emits both .voy-stat-label--long and .voy-stat-label--short.
   Desktop shows long, mobile shows short. */
.voy-stat-label--short { display: none; }
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-stat-label--long { display: none !important; }
  :has(.voy-authors-page) .voy-stat-label--short { display: inline !important; }
}

/* A13 — Mobile CTA inner gap: pen l9OrS gap:16 (live=18) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-cta-band__inner { gap: 16px !important; }
}

/* A14 — Mobile CTA buttons stack vertically: pen TGgrH layout:vertical (live=row) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-cta-band__btns { flex-direction: column !important; align-items: center !important; }
}

/* A15 — Mobile CTA btns padding-top: pen TGgrH padding:[6,0,0,0] (live=8px) */
@media (max-width: 767.98px) {
  :has(.voy-authors-page) .voy-cta-band__btns { padding-top: 6px !important; }
}

/* Mobile: author breadcrumb band padding */
@media (max-width: 767.98px) {
  .voy-authors-bc-band { padding-left: 20px !important; padding-right: 20px !important; }
  .voy-authors-masthead { padding-bottom: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SEARCH PAGE PIXEL-PERFECT FIXES (joomlart-t4-design-review 2026-06-21)
   ════════════════════════════════════════════════════════════════════════ */

/* S1 — Filter bar: flex row, space-between (tabs left + sort right) (pen fWCil justifyContent:space_between) */
.voy-search-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.voy-search-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--voy-muted, #8A7E72);
  flex-shrink: 0;
}
.voy-search-sort svg { color: var(--voy-muted, #8A7E72); }
html.t4-dark .voy-search-sort { color: #9C9085; }
html.t4-dark .voy-search-sort svg { color: #9C9085; }

/* S2 — Result URL color: pen ejRds fill #1F6F6B (teal), not muted */
.voy-result-url {
  color: #1F6F6B !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
html.t4-dark .voy-result-url { color: #46A39D !important; }

/* S3 — Popular pills in dark: pen vtURx fill #211B16, stroke #352C24, text #E8DFD4
   The popular pills use .voy-pill class. The existing dark rule targets
   .voy-popular-searches__pills .voy-pill (wrong selector — PHP uses .voy-popular-searches-rows).
   Add the correct selector: */
html.t4-dark .voy-popular-searches .voy-pill,
html.t4-dark .voy-popular-searches-rows .voy-pill {
  background: #211B16 !important;
  border-color: #352C24 !important;
  color: #E8DFD4 !important;
}
html.t4-dark .voy-popular-searches .voy-pill:hover,
html.t4-dark .voy-popular-searches-rows .voy-pill:hover {
  background: #2a2018 !important;
}

/* S4 — Filter inactive tabs in dark: pen cM5kO fill #1C1712, text #E8DFD4 */
html.t4-dark .voy-search-tab:not(.is-active) {
  background: #1C1712 !important;
  color: #E8DFD4 !important;
  border-color: #352C24 !important;
}
html.t4-dark .voy-search-tab.is-active {
  background: #D86A3F !important;
  border-color: #D86A3F !important;
  color: #FFFFFF !important;
}
/* Also update the filter bar border-bottom in dark */
html.t4-dark .voy-search-filters {
  border-color: #352C24 !important;
}

/* ─── SEARCH MOBILE FIXES (pen M3vXg) ─────────────────────────────── */
@media (max-width: 767.98px) {
  /* Mobile masthead inner gap: pen ytT9h gap:14 (live=16) */
  :has(.voy-search-page) .voy-search-masthead-inner { gap: 14px !important; }

  /* Mobile eyebrow hidden: pen ytT9h has no eyebrow for search mobile */
  :has(.voy-search-page) .voy-search-masthead .voy-eyebrow { display: none !important; }

  /* Mobile title text = "Search" (pen ytT9h A7bz9), centered; not the
     desktop "What are you looking for?". Swap the spans + center. */
  .voy-search-title--desktop { display: none !important; }
  .voy-search-title--mobile  { display: inline !important; }
  .voy-search-title { text-align: center !important; }

  /* Mobile results PB: pen CtXMK padding=[0,20,40,20] → PB=40 (live=72) */
  .voy-search-results-section { padding-bottom: 40px !important; }

  /* Mobile popular PT/PB: pen iM9fj padding=[40,20] (live=72) */
  .voy-popular-searches { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Mobile popular title FS: pen U1vU4x fontSize:22 (live=26) */
  .voy-popular-searches-heading { font-size: 22px !important; }

  /* Mobile popular inner gap: pen iM9fj gap:16 (live=20) */
  .voy-popular-searches-inner { gap: 16px !important; }

  /* Mobile popular pills row gap: pen kDlL3 gap:8 (live=10) */
  .voy-popular-searches-rows { gap: 8px !important; }
  .voy-popular-searches-row { gap: 8px !important; }

  /* Mobile filter sort: pen D2N92 mobile tabs don't show sort element — hide it */
  .voy-search-sort { display: none !important; }

  /* Mobile filter bar: pen D2N92 padding=[4,20,16,20] — full-bleed with side padding */
  .voy-search-filters { padding: 4px 0 16px !important; }

  /* Mobile results section PT: pen CtXMK padding=[0,20,40,20] → PT=0 (live=8) */
  .voy-search-results-section { padding-top: 0 !important; }

  /* Mobile result rows: pen i7ASMc gap:14 pad:[18,0] (live gap18/pad20);
     thumb 46×46 (live 56); cat 10px; title 17/lh1.25; excerpt 13/lh1.5 */
  .voy-search-page .voy-result-row { gap: 14px !important; padding: 18px 0 !important; }
  .voy-search-page .voy-result-thumb { width: 46px !important; height: 46px !important; }
  .voy-search-page .voy-result-thumb svg { width: 20px !important; height: 20px !important; }
  .voy-search-page .voy-result-type { font-size: 10px !important; }
  .voy-search-page .voy-result-title { font-size: 17px !important; line-height: 1.25 !important; }
  .voy-search-page .voy-result-excerpt { font-size: 13px !important; line-height: 1.5 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   AUTHOR DETAIL  (pen U43Ng light / N6Dll dark / bJk7F mobile)
   Scoped to .voy-author-detail so it never touches the author LISTING
   (.voy-authors-page) or tag/search rules above.
   ════════════════════════════════════════════════════════════════════ */
.voy-author-detail { font-family: 'Inter', sans-serif; }

/* ── MASTHEAD ─────────────────────────────────────────────────────── */
.voy-authdet-masthead {
  background: var(--voy-bg, #FAF6F0);
  padding: 72px 48px 28px;
  display: flex;
  justify-content: center;
}
.voy-authdet-masthead-inner {
  width: 100%;
  max-width: 1140px;
  display: grid;
  grid-template-columns: 128px 1fr;
  column-gap: 32px;
  align-items: start;
}
.voy-authdet-avatar {
  width: 128px;
  height: 128px;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
  background: var(--voy-elevated, #F2EBE1);
  grid-row: 1 / span 5;
}
.voy-authdet-role {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C2562F;
  margin-bottom: 12px;
}
.voy-authdet-name {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: #1A1512;
  margin: 0 0 12px;
}
.voy-authdet-bio {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #8A7E72;
  max-width: 680px;
  margin: 0 0 16px;
}
.voy-authdet-socials {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}
.voy-authdet-social {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #E5DCD0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2B2420;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.voy-authdet-social:hover { background: #F2EBE1; }
.voy-authdet-social svg { width: 18px; height: 18px; }

/* ── BREADCRUMB BAND ──────────────────────────────────────────────── */
.voy-authdet-bc-band {
  background: var(--voy-bg, #FAF6F0);
  padding: 0 48px 8px;
  display: flex;
  justify-content: center;
}
.voy-authdet-bc-inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.voy-authdet-bc-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #8A7E72;
  text-decoration: none;
}
.voy-authdet-bc-link:hover { color: #C2562F; }
.voy-authdet-bc-sep {
  display: inline-flex;
  align-items: center;
  color: #8A7E72;
}
.voy-authdet-bc-sep svg { width: 14px; height: 14px; }
.voy-authdet-bc-current {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2B2420;
}

/* ── BODY (content + sidebar) ─────────────────────────────────────── */
.voy-authdet-body {
  background: var(--voy-bg, #FAF6F0);
  padding: 40px 48px 70px;
  display: flex;
  justify-content: center;
}
.voy-authdet-inner {
  width: 100%;
  max-width: 1140px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.voy-authdet-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.voy-authdet-latest-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: #1A1512;
  margin: 0;
}
.voy-authdet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.voy-authdet-grid .voy-post-card__media { display: block; text-decoration: none; }
.voy-authdet-grid .voy-post-card__title a { color: inherit; text-decoration: none; }
.voy-authdet-grid .voy-post-card__title a:hover { color: #C2562F; }
.voy-authdet-empty {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #8A7E72;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────── */
.voy-authdet-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.voy-authdet-card {
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.voy-authdet-about,
.voy-authdet-topdest {
  background: #FFFFFF;
  border: 1px solid #E5DCD0;
}
.voy-authdet-about { gap: 14px; }
.voy-authdet-card-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8A7E72;
}
.voy-authdet-about-bio {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #2B2420;
  margin: 0;
}
.voy-authdet-stats {
  display: flex;
  gap: 20px;
  padding-top: 6px;
}
.voy-authdet-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.voy-authdet-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #C2562F;
  line-height: 1.1;
}
.voy-authdet-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #8A7E72;
}

/* Top Destinations */
.voy-authdet-topdest { gap: 6px; }
.voy-authdet-dest-list { list-style: none; margin: 0; padding: 0; }
.voy-authdet-dest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #E5DCD0;
}
.voy-authdet-dest-row:last-child { border-bottom-color: transparent; }
.voy-authdet-dest-pin {
  display: inline-flex;
  color: #1F6F6B;
  flex-shrink: 0;
}
.voy-authdet-dest-pin svg { width: 16px; height: 16px; }
.voy-authdet-dest-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2B2420;
}

/* Newsletter / Follow card */
.voy-authdet-newsletter {
  background: #1F6F6B;
  gap: 12px;
}
.voy-authdet-nl-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}
.voy-authdet-nl-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #FFFFFF;
  margin: 0;
}
.voy-authdet-nl-btn {
  background: #FFFFFF;
  color: #1F6F6B;
  border-radius: 9999px;
  padding: 12px 20px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.voy-authdet-nl-btn:hover { opacity: 0.92; color: #1F6F6B; }

/* ── CTA BAND (rust) ──────────────────────────────────────────────── */
.voy-authdet-cta { padding: 72px 48px; }
.voy-authdet-cta .voy-cta-band__inner { max-width: 1140px; gap: 18px; }
.voy-authdet-cta .voy-cta-band__title { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; color: #FFFFFF; }
.voy-authdet-cta .voy-cta-band__sub { font-size: 17px; color: #FFFFFF; max-width: 640px; }
.voy-authdet-cta .voy-cta-band__btns { padding-top: 8px; gap: 12px; }
/* "See trips" = white pill, rust label */
.voy-authdet-cta .voy-btn-secondary-white {
  background: #FFFFFF;
  color: #C2562F;
  border: none;
}
.voy-authdet-cta .voy-btn-secondary-white:hover { background: #f5ede8; color: #C2562F; }
/* "All writers" ghost = white border, white text */
.voy-authdet-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 9999px;
  padding: 13px 25px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.voy-authdet-cta-ghost:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }

/* ════ DARK ═══════════════════════════════════════════════════════ */
html.t4-dark .voy-authdet-masthead,
html.t4-dark .voy-authdet-bc-band,
html.t4-dark .voy-authdet-body { background: #15110E; }
html.t4-dark .voy-authdet-role { color: #D86A3F; }
html.t4-dark .voy-authdet-name { color: #FBF6EF; }
html.t4-dark .voy-authdet-bio { color: #9C9085; }
html.t4-dark .voy-authdet-social { background: #211B16; border-color: #352C24; color: #E8DFD4; }
html.t4-dark .voy-authdet-social:hover { background: #2A221C; }
html.t4-dark .voy-authdet-bc-link,
html.t4-dark .voy-authdet-bc-sep { color: #9C9085; }
html.t4-dark .voy-authdet-bc-current { color: #E8DFD4; }
html.t4-dark .voy-authdet-latest-title { color: #FBF6EF; }
html.t4-dark .voy-authdet-empty { color: #9C9085; }
html.t4-dark .voy-authdet-about,
html.t4-dark .voy-authdet-topdest { background: #211B16; border-color: #352C24; }
html.t4-dark .voy-authdet-card-kicker { color: #9C9085; }
html.t4-dark .voy-authdet-about-bio { color: #E8DFD4; }
html.t4-dark .voy-authdet-stat-num { color: #D86A3F; }
html.t4-dark .voy-authdet-stat-label { color: #9C9085; }
html.t4-dark .voy-authdet-dest-row { border-bottom-color: #352C24; }
html.t4-dark .voy-authdet-dest-row:last-child { border-bottom-color: transparent; }
html.t4-dark .voy-authdet-dest-pin { color: #46A39D; }
html.t4-dark .voy-authdet-dest-name { color: #E8DFD4; }
html.t4-dark .voy-authdet-newsletter { background: #46A39D; }
html.t4-dark .voy-authdet-nl-btn { color: #46A39D; }
html.t4-dark .voy-authdet-nl-btn:hover { color: #46A39D; }
html.t4-dark .voy-authdet-cta { background: #D86A3F; }
html.t4-dark .voy-authdet-cta .voy-btn-secondary-white { color: #D86A3F; }
html.t4-dark .voy-authdet-cta .voy-btn-secondary-white:hover { color: #D86A3F; }
/* Post cards in dark — reuse existing .voy-post-card dark rules; ensure surface */
html.t4-dark .voy-authdet-grid .voy-post-card { background: #211B16; border-color: #352C24; }
html.t4-dark .voy-authdet-grid .voy-post-card__title a:hover { color: #D86A3F; }

/* ════ MOBILE (≤767.98px) ═════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .voy-authdet-masthead { padding: 36px 20px 16px; }
  .voy-authdet-masthead-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 100%;
  }
  .voy-authdet-avatar { width: 96px; height: 96px; }
  .voy-authdet-role,
  .voy-authdet-name,
  .voy-authdet-bio { margin-bottom: 0; }
  .voy-authdet-name { font-size: 34px; }
  .voy-authdet-bio { font-size: 15px; max-width: 100%; }
  .voy-authdet-socials { justify-content: center; }

  .voy-authdet-bc-band { padding: 0 20px 8px; }
  .voy-authdet-bc-inner { gap: 7px; max-width: 100%; }
  .voy-authdet-bc-link,
  .voy-authdet-bc-current { font-size: 12px; }
  .voy-authdet-bc-sep svg { width: 13px; height: 13px; }

  .voy-authdet-body { padding: 24px 20px 40px; }
  .voy-authdet-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
  }
  .voy-authdet-content { gap: 20px; }
  .voy-authdet-latest-title { font-size: 27px; }
  .voy-authdet-grid { grid-template-columns: 1fr; gap: 20px; }
  .voy-authdet-sidebar { gap: 20px; }
  .voy-authdet-stats { gap: 24px; }
  .voy-authdet-nl-title { font-size: 20px; }

  .voy-authdet-cta { padding: 48px 20px; }
  .voy-authdet-cta .voy-cta-band__title { font-size: 27px; line-height: 1.15; }
  .voy-authdet-cta .voy-cta-band__sub { font-size: 15px; color: rgba(255,255,255,0.85); }
  .voy-authdet-cta .voy-cta-band__btns { flex-direction: column; width: 100%; padding-top: 6px; }
  .voy-authdet-cta .voy-btn-secondary-white,
  .voy-authdet-cta-ghost { width: 100%; }
}