/* ==========================================================================
   Voyara — Category List (menu 267 / item-267)
   Design spec: UW2yo (L) / S8Obhh (D) / S452Oc (M)
   Loaded AFTER template.css via index.php per-page map.
   ========================================================================== */

/* ---- Hide T4 masthead + T4 breadcrumbs: catlist has its own ---------------
   The T4 layout renders .t4-masthead and .t4-breadcrumbs from position slots;
   catlist has its own masthead and breadcrumb built into the component template. */
.item-267 .t4-masthead,
.item-267 .t4-breadcrumbs {
  display: none !important;
}

/* ---- [STICKY-HEADER-CONTENT-GAP] removal ----------------------------------
   T4 base sets .t4-main-body{padding-top:48px}; catlist masthead must start
   directly under the sticky navbar. Zero the gap on item-267. */
.item-267 .t4-main-body {
  padding-top: 0 !important;
}

/* ---- [FULL-BLEED-CUT] All bands need full-viewport breakout -------------------
   The component renders inside .t4-col (~1140px container at 1440px, smaller at
   wider viewports). Use the negative-margin + 100vw technique so every band's
   background stretches full viewport. Inner containers retain their 1140px caps.
   At 1440px the T4 column is already 1140px so bg colors match seamlessly;
   at 1728px+ the bands without this would be cut short of the viewport edge. */
.item-267 .voy-catlist-masthead,
.item-267 .voy-catlist-bc,
.item-267 .voy-catlist-body,
.item-267 .voy-catlist-cta {
  margin-left: calc(50% - 50vw);
  width: 100vw;
  position: relative;
}

/* ---- Masthead (j81my / CaaFr) -------------------------------------------
   bg = var(--voy-bg)  (#FAF6F0 light / #15110E dark)
   pt=80 pb=28 px=48 | inner 1140px, gap=16, left-aligned (no textAlign center)
   Eyebrow: Geist Mono 13/#C2562F ls1 normal UPPERCASE
   Title:   Playfair 54/700 #1A1512 lh1.1
   Sub:     Inter 18/lh1.6 #8A7E72, max-width 760px
   -------------------------------------------------------------------------*/
.voy-catlist-masthead {
  background: var(--voy-bg);
  padding: 80px 48px 28px;
}
.voy-catlist-mh-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.voy-catlist-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-primary);
  display: block;
}
.voy-catlist-title {
  font-family: var(--voy-font-head);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--voy-heading);
  margin: 0;
}
.voy-catlist-sub {
  font-family: var(--voy-font-body);
  font-size: 18px;
  font-weight: normal;
  line-height: 1.6;
  color: var(--voy-muted);
  max-width: 760px;
  margin: 0;
}

/* ---- Breadcrumb band (o3tOJE / njUiQ) ------------------------------------
   bg = var(--voy-bg), pt=0 pb=8 px=48
   Crumbs: Inter 13 #8A7E72, sep 14×14 lucide chevron-right/#8A7E72
   Current: Inter 13/600/#2B2420
   -------------------------------------------------------------------------*/
.voy-catlist-bc {
  background: var(--voy-bg);
  padding: 0 48px 8px;
}
.voy-catlist-bc-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.voy-bc-link {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: normal;
  color: var(--voy-muted);
  text-decoration: none;
  transition: color .15s;
}
.voy-bc-link:hover { color: var(--voy-primary); }
.voy-bc-sep {
  color: var(--voy-muted);
  flex-shrink: 0;
}
.voy-bc-current {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--voy-text);
}

/* ---- List Section (FuIeH / MVj6e) ----------------------------------------
   bg = var(--voy-bg), pt=40 pb=70 px=48
   Inner: 1140px, gap=44 (sidebar 300px + content fill)
   -------------------------------------------------------------------------*/
.voy-catlist-body {
  background: var(--voy-bg);
  padding: 40px 48px 70px;
}
.voy-catlist-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  gap: 44px;
  align-items: flex-start;
}

/* ---- Sidebar (u9Psw): 300px, gap=10 vertical ---- */
.voy-catlist-sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section headers: "ALL CATEGORIES", "SORT BY"
   Geist Mono 12/#8A7E72/ls1/UPPERCASE */
.voy-cls-sh {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--voy-muted);
  text-transform: uppercase;
}

/* Category filter pills: r8, p=[8,12], fill_container */
.voy-cls-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--voy-bg);
  text-decoration: none;
  transition: background .15s;
}
.voy-cls-cat.active {
  background: var(--voy-elevated); /* #F2EBE1 light / #1C1712 dark */
}
.voy-cls-cat-name {
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: normal;
  color: var(--voy-text); /* #2B2420 light */
}
.voy-cls-cat.active .voy-cls-cat-name {
  font-weight: 600;
  color: var(--voy-primary); /* #C2562F */
}
.voy-cls-cat-count {
  font-family: var(--voy-font-mono);
  font-size: 12px;
  color: var(--voy-muted);
}
.voy-cls-cat:hover { background: var(--voy-elevated); }

/* Divider: 1px #E5DCD0 */
.voy-cls-div {
  height: 1px;
  background: var(--voy-border);
  width: 100%;
}

/* Sort options: p=[4,12], icon 16×16 + label Inter 15 */
.voy-cls-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  cursor: pointer;              /* now a real sort link */
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.voy-cls-sort:hover { background: var(--voy-elevated); }
.voy-cls-sort:hover span { color: var(--voy-text); }
.voy-cls-sort:hover svg { color: var(--voy-text); }
.voy-cls-sort svg {
  flex-shrink: 0;
  color: var(--voy-muted);
}
.voy-cls-sort span {
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: normal;
  color: var(--voy-muted);
}
.voy-cls-sort.active svg { color: var(--voy-primary); }
.voy-cls-sort.active span { font-weight: 600; color: var(--voy-text); }

/* ---- Content column (sapwo): fill, vertical list ---- */
.voy-catlist-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Article rows (jonbq / y0t8L etc):
   alignItems center, gap=18, pt=18 pb=18, bottom-border 1px #E5DCD0 */
.voy-cls-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--voy-border);
  text-decoration: none;
  transition: background .15s;
}
.voy-cls-row:hover { opacity: 0.85; }

/* Thumbnail: 96×72 r8 clip */
.voy-cls-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
}
.voy-cls-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voy-cls-thumb--placeholder {
  background: var(--voy-elevated);
}

/* Mid column: fill, vertical, gap=6 */
.voy-cls-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row title: Playfair 19/700/#1A1512/lh1.25
   Note: desktop .pen uses 19px (pen AscMy fontSize:17 is the embedded sub-frame Row0 content,
   but the sapwo->Row nodes use fontSize:19 — pen vuRzj row T=19) */
.voy-cls-row-title {
  font-family: var(--voy-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--voy-heading);
  margin: 0;
}

/* Meta row: gap=8, Inter 13 */
.voy-cls-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.voy-cls-author {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: normal;
  color: var(--voy-text); /* #2B2420 pen b8GWT */
}
.voy-cls-dot {
  font-family: var(--voy-font-body);
  font-size: 13px;
  color: var(--voy-muted);
}
.voy-cls-date {
  font-family: var(--voy-font-body);
  font-size: 13px;
  color: var(--voy-muted);
}

/* Right badge: r=9999, p=[6,14], bg #F2EBE1 (--voy-elevated), Geist Mono 11/#1F6F6B/ls0.5 */
.voy-cls-badge {
  flex: 0 0 auto;
  border-radius: 9999px;
  padding: 6px 14px;
  background: var(--voy-elevated);
  font-family: var(--voy-font-mono);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.5px;
  color: var(--voy-secondary); /* #1F6F6B teal */
  white-space: nowrap;
}

/* Empty state */
.voy-catlist-empty {
  font-family: var(--voy-font-body);
  font-size: 15px;
  color: var(--voy-muted);
  padding: 40px 0;
}

/* ---- CTA Band (vJtF4 / MTuL0) -------------------------------------------
   bg = #C2562F (var --voy-primary / dark --voy-primary), pt=72 pb=72 px=48
   Inner: 1140px centered, gap=18
   Title: Playfair 38/700/#FFF center
   Sub:   Inter 17/lh1.6/#FFF center, max-width 620px
   -------------------------------------------------------------------------*/
.voy-catlist-cta {
  background: var(--voy-primary); /* #C2562F light / #D86A3F dark */
  padding: 72px 48px;
  text-align: center;
}
.voy-catlist-cta-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.voy-catlist-cta-title {
  font-family: var(--voy-font-head);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.voy-catlist-cta-sub {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
  max-width: 620px;
  margin: 0;
}
.voy-catlist-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 8px;
}
/* "Plan a trek" — white bg, primary color text */
.voy-catlist-btn-white {
  display: inline-flex;
  align-items: center;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  background: #fff;
  color: var(--voy-primary);
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s;
}
.voy-catlist-btn-white:hover { background: rgba(255,255,255,.9); color: var(--voy-primary); }
/* "See all categories" — ghost white border */
.voy-catlist-btn-ghost {
  display: inline-flex;
  align-items: center;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s;
}
.voy-catlist-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ---- Dark mode ------------------------------------------------------------- */
html.t4-dark .voy-catlist-masthead,
html.t4-dark .voy-catlist-bc,
html.t4-dark .voy-catlist-body {
  background: var(--voy-bg); /* #15110E dark */
}
html.t4-dark .voy-catlist-cta {
  background: var(--voy-primary); /* #D86A3F dark */
}
html.t4-dark .voy-cls-cat {
  background: var(--voy-bg);
}
html.t4-dark .voy-cls-cat.active {
  background: var(--voy-elevated); /* #1C1712 */
}
html.t4-dark .voy-cls-cat-name { color: var(--voy-text); }
html.t4-dark .voy-cls-cat.active .voy-cls-cat-name { color: var(--voy-primary); }
html.t4-dark .voy-cls-div { background: var(--voy-border); }
html.t4-dark .voy-cls-row { border-bottom-color: var(--voy-border); }
html.t4-dark .voy-cls-row-title { color: var(--voy-heading); } /* #FBF6EF dark */
html.t4-dark .voy-cls-author { color: var(--voy-text); }  /* #E8DFD4 dark */
html.t4-dark .voy-cls-thumb--placeholder { background: var(--voy-elevated); }
html.t4-dark .voy-cls-badge {
  background: var(--voy-elevated); /* #1C1712 dark */
  color: var(--voy-secondary); /* teal stays same */
}
html.t4-dark .voy-bc-current { color: var(--voy-text); }

/* ---- Responsive — 768px (tablet) ---------------------------------------- */
@media (max-width: 991px) {
  .voy-catlist-masthead { padding: 60px 24px 20px; }
  .voy-catlist-bc { padding: 0 24px 8px; }
  .voy-catlist-body { padding: 32px 24px 56px; }
  .voy-catlist-inner { flex-direction: column; gap: 32px; }
  .voy-catlist-sidebar { flex: none; width: 100%; }
  .voy-catlist-cta { padding: 56px 24px; }
}

/* ---- Responsive — 640px (mobile S452Oc) ---------------------------------
   Masthead: pt=40 pb=16 px=20, gap=14
     eyebrow: 13/ls1 (keep)
     title: 32/700
     sub: 15/lh1.6, fill_container
   Breadcrumb: px=20
   Sidebar: HIDDEN on mobile (not in .pen S452Oc)
   List rows (.pen Y28hin/dMLu7): flex row, alignItems center, gap=14, pad=[16,0]
     Thumb 96×72 r8 (centered vertically)
     Mid column gap=6: Badge (fs10 pad[4,10]) → Title (Playfair 17/700/lh1.25) → Meta
   CTA: pt=48 pb=48 px=20, title=27px, sub=15px, gap=16, buttons column
   -------------------------------------------------------------------------*/
@media (max-width: 640px) {
  .voy-catlist-masthead {
    padding: 40px 20px 16px;
  }
  .voy-catlist-mh-inner { gap: 14px; }
  .voy-catlist-title { font-size: 32px; }
  .voy-catlist-sub { font-size: 15px; max-width: 100%; }

  .voy-catlist-bc { padding: 0 20px 8px; }
  .voy-catlist-body { padding: 16px 20px 40px; }
  .voy-catlist-inner { gap: 0; }

  /* Hide sidebar: .pen S452Oc shows only article list, no sidebar/sort */
  .voy-catlist-sidebar { display: none; }

  /* Row: grid — thumb (col1, centered, spans both text rows) | badge above
     title+meta in col2. Matches .pen flex-row+Mid-column (badge,title,meta)
     while keeping the badge, which is a DOM sibling of .voy-cls-mid, on top. */
  .voy-cls-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 6px;
    padding: 16px 0;
    align-items: center;
  }

  /* Thumb: 96×72 per .pen, vertically centered against the text block */
  .voy-cls-thumb {
    flex: none;
    width: 96px;
    height: 72px;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  /* Badge: row 1, col 2 — appears above title */
  .voy-cls-badge {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    font-size: 10px;
    padding: 4px 10px;
  }

  /* Mid: row 2, col 2 — below badge */
  .voy-cls-mid {
    flex: none;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    gap: 6px;
  }

  .voy-cls-row-title { font-size: 17px; line-height: 1.25; }

  .voy-catlist-cta { padding: 48px 20px; }
  .voy-catlist-cta-title { font-size: 27px; }
  .voy-catlist-cta-sub { font-size: 15px; }
  .voy-catlist-cta-inner { gap: 16px; }
  .voy-catlist-cta-btns {
    flex-direction: column;
    width: 100%;
  }
  .voy-catlist-btn-white,
  .voy-catlist-btn-ghost {
    width: 100%;
    justify-content: center;
  }
}