/*
 * ln-archive.css — Latina Network Category Archive Styles
 * Enqueued only on is_category() — depends on ln-master.css.
 *
 * Sections:
 *   01 · Archive Header Block
 *   02 · Archive Header — Per-Category Typography Variants
 *   03 · Feature Card Section
 *   04 · Archive Grid Section
 *   05 · Pagination
 *   06 · Category Art Direction (ln-cat-{slug} body classes)
 *   07 · Responsive Breakpoints
 */


/* ── 01  ARCHIVE HEADER BLOCK ──────────────────────────────────────────────── */

.archive-header {
  position: relative;
  background: var(--plum-dark);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;

  /*
   * Top padding clears: 3px gradient band + 72px nav + 48px breathing room.
   */
  padding: 140px 56px 80px;
}

/*
 * Category Header Image — plum-dark gradient overlay
 *
 * When a header image is uploaded (Posts > Categories > Edit > Category Header
 * Image), the URL is output as a direct inline background-image on .archive-header.
 * This ::after overlay darkens the photo so all text remains fully legible.
 *
 * All inner content is set to position:relative so it floats above the overlay.
 */
/* Gradient overlay div — sits above the background photo, below all content */
.archive-header-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(61, 29, 52, 0.86) 0%,
    rgba(61, 29, 52, 0.74) 45%,
    rgba(61, 29, 52, 0.90) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Inner content and accent bar must float above the overlay */
.archive-header.has-header-image .archive-header-inner,
.archive-header.has-header-image .archive-header-accent-bar {
  position: relative;
  z-index: 2;
}

/* Bottom accent bar — 4px in category accent color */
.archive-header-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cat-accent, var(--tierra));
}

/* Eyebrow: "01 — BUSINESS" */
.archive-header-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 20px;
  /* color set inline per category */
}

/* H1 — giant category name */
.archive-header-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--crema);
  margin: 0 0 32px;
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

/* Page number suffix on pages 2+ — smaller, muted */
.archive-header-page-num {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 300;
  color: rgba(245, 237, 216, 0.25);
  letter-spacing: 0;
}

/* Fixed editorial description */
.archive-header-desc {
  font-family: var(--font-sans);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245, 237, 216, 0.68);
  max-width: 680px;
  margin: 0 0 24px;
}

/* Pitch line */
.archive-header-pitch {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: rgba(245, 237, 216, 0.38);
  margin: 0;
}

.archive-header-email {
  color: rgba(245, 237, 216, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 237, 216, 0.2);
  transition: color 0.2s, border-color 0.2s;
}

.archive-header-email:hover {
  color: var(--cat-accent, var(--tierra));
  border-bottom-color: var(--cat-accent, var(--tierra));
}


/* ── 02  ARCHIVE HEADER — PER-CATEGORY TYPOGRAPHY VARIANTS ─────────────────── */

/*
 * Each editorial destination has a distinct feel in the header.
 * Business and Power lean sharper and more institutional.
 * Culture and Voices lean more expressive.
 * Wellness and Money lean cleaner and more readable.
 * These are applied via the ln-cat-{slug} body class from functions.php.
 */

/* Business: sharper, more executive */
.ln-cat-business .archive-header-title {
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Money: clean, legible, utility-forward */
.ln-cat-money .archive-header-title {
  font-size: clamp(44px, 6vw, 84px);
}

.ln-cat-money .archive-header-desc {
  font-size: clamp(16px, 1.8vw, 19px);
}

/* Wellness: spacious, restorative — more room around the text */
.ln-cat-wellness .archive-header {
  padding-bottom: 96px;
}

.ln-cat-wellness .archive-header-desc {
  line-height: 1.85;
  color: rgba(245, 237, 216, 0.72);
}

/* Culture: richer, more immersive — italic headline */
.ln-cat-culture .archive-header-title {
  font-style: italic;
  font-size: clamp(52px, 8vw, 108px);
  letter-spacing: -0.02em;
}

/* Power: institutional, civic gravitas — upright, authoritative */
.ln-cat-power .archive-header-title {
  font-weight: 400;
  letter-spacing: 0;
}

/*
 * Power eyebrow color override — REQUIRED.
 * Power's category color (#3D1D34 plum-dark) is identical to the archive
 * header background, making the eyebrow text invisible without this rule.
 * We use Tierra as the eyebrow accent so Power reads clearly on dark.
 */
.ln-cat-power .archive-header-eyebrow {
  color: var(--tierra) !important;
}

.ln-cat-power .archive-header-desc {
  font-size: clamp(16px, 1.7vw, 18px);
  color: rgba(245, 237, 216, 0.62);
}

/* Voices: podcast/media context — expressive, warm */
.ln-cat-voices .archive-header-title {
  font-style: italic;
}

.ln-cat-voices .archive-header-eyebrow {
  /* Gradient text for Voices — matches the gradient badge */
  background: linear-gradient(90deg, var(--tierra), var(--oro));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 03  FEATURE CARD SECTION ──────────────────────────────────────────────── */

.archive-feature-section {
  background: #fff;
  padding: 72px 56px 80px;
  border-bottom: 1px solid rgba(92, 45, 78, 0.08);
  position: relative;
}

/* Feature eyebrow — "● Featured Story" */
.archive-feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(92, 45, 78, 0.4);
  margin: 0 0 28px;
}

.archive-feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/*
 * The feature card itself uses the Phase 2 card--feature class.
 * Archive context adds a top accent border to anchor it to the category.
 */
.archive-feature-inner .card--feature {
  border-top: 4px solid var(--cat-accent, var(--tierra));
}

/*
 * Override the Phase 2 card-feature-body Crema background with white
 * so the editorial body can breathe inside a white feature section.
 */
.archive-feature-inner .card-feature-body {
  background: var(--crema);
  padding: 56px 48px;
}

.archive-feature-inner .card--feature .card-headline {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.07;
  margin-bottom: 20px;
}

.archive-feature-inner .card--feature .card-dek {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: rgba(92, 45, 78, 0.7);
}

/* Read the Story link — category accent color */
.archive-feature-inner .card-read-link {
  color: var(--cat-accent, var(--tierra));
  font-size: 13px;
  letter-spacing: 0.18em;
}

.archive-feature-inner .card-read-link:hover {
  gap: 12px;
}


/* ── 04  ARCHIVE GRID SECTION ──────────────────────────────────────────────── */

.archive-grid-section {
  background: var(--crema);
  padding: 80px 56px 72px;
}

.archive-grid-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* 3-column article grid */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 36px;
  margin-bottom: 64px;
}

.archive-grid [role="listitem"] {
  /* Preserve list semantics without extra visual chrome */
}

/*
 * Grid card hover — accent color drives the headline transition.
 * The base card:hover uses --tierra; archive overrides use --cat-accent
 * via the body class so each category feels correct on hover.
 */
.archive-grid .card:hover .card-headline {
  color: var(--cat-accent, var(--tierra));
}


/* ── 05  PAGINATION ─────────────────────────────────────────────────────────── */

.archive-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(92, 45, 78, 0.1);
}

.archive-pagination-inner {
  display: flex;
  align-items: center;
}

/* WordPress paginate_links() outputs a <ul> with class "page-numbers" */
.archive-pagination .page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.archive-pagination .page-numbers li {
  display: flex;
}

/* Base page number link */
.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(92, 45, 78, 0.55);
  border: 1px solid rgba(92, 45, 78, 0.12);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.archive-pagination .page-numbers a:hover {
  background: rgba(92, 45, 78, 0.05);
  color: var(--plum);
  border-color: rgba(92, 45, 78, 0.25);
}

/* Current page — filled with accent color */
.archive-pagination .page-numbers .current {
  background: var(--cat-accent, var(--tierra));
  color: var(--crema);
  border-color: var(--cat-accent, var(--tierra));
  font-weight: 600;
}

/* Prev / Next arrows */
.archive-pagination .page-numbers .prev,
.archive-pagination .page-numbers .next {
  font-size: 16px;
  letter-spacing: 0;
}

.archive-pagination-arrow {
  pointer-events: none;
}

/* Dots (...) between page numbers */
.archive-pagination .page-numbers .dots {
  border-color: transparent;
  color: rgba(92, 45, 78, 0.3);
}

/* Page X of Y indicator */
.archive-pagination-count {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(92, 45, 78, 0.35);
  margin: 0;
}


/* ── 06  CATEGORY ART DIRECTION ────────────────────────────────────────────── */

/*
 * Grid-level hover accent: each category uses its own color on hover.
 * The card--standard card-headline transitions to the category color
 * rather than always falling back to Tierra.
 */

.ln-cat-business .archive-grid .card:hover .card-headline {
  color: var(--tierra);
}

.ln-cat-money .archive-grid .card:hover .card-headline {
  color: var(--oro);
}

.ln-cat-wellness .archive-grid .card:hover .card-headline {
  color: var(--teal);
}

.ln-cat-culture .archive-grid .card:hover .card-headline {
  color: #8a5a7a; /* Culture accent — matches cat-dot.culture */
}

.ln-cat-power .archive-grid .card:hover .card-headline {
  color: var(--plum-dark);
}

.ln-cat-voices .archive-grid .card:hover .card-headline {
  color: var(--tierra); /* Primary gradient color for Voices */
}

/*
 * Archive section background alternation by category:
 * Business and Power are light (Crema grid — default).
 * Money and Voices get a slightly warmer treatment.
 * Wellness gets a softer, more airy grid section.
 * Culture gets a deeper, more immersive grid section.
 */

.ln-cat-culture .archive-grid-section {
  background: #f8f4ef; /* Slightly warmer than standard Crema */
}

.ln-cat-wellness .archive-grid-section {
  background: #faf8f4; /* Lighter, airier Crema */
}

.ln-cat-wellness .archive-grid-section {
  padding-top: 88px; /* Extra breathing room for Wellness */
}

/*
 * Feature section background by category:
 * Default white; Power gets a near-Crema institutional feel.
 */
.ln-cat-power .archive-feature-section {
  background: #f9f7f4;
}

.ln-cat-culture .archive-feature-section {
  background: #f8f4ef;
}


/* ── 07  RESPONSIVE BREAKPOINTS ─────────────────────────────────────────────── */

/* 1100px — tighten padding, reduce feature card inner padding */
@media (max-width: 1100px) {
  .archive-header {
    padding: 120px 40px 64px;
  }

  .archive-feature-section {
    padding: 56px 40px 64px;
  }

  .archive-feature-inner .card-feature-body {
    padding: 40px 36px;
  }

  .archive-grid-section {
    padding: 64px 40px 56px;
  }

  .archive-grid {
    gap: 40px 28px;
  }
}

/* 900px — 2-column grid, collapse feature card to single column */
@media (max-width: 900px) {
  .archive-header {
    padding: 100px 24px 56px;
  }

  .archive-header-title {
    font-size: clamp(44px, 8vw, 72px);
  }

  .archive-header-desc {
    font-size: 17px;
  }

  .archive-feature-section {
    padding: 48px 24px 56px;
  }

  .archive-feature-inner .card--feature {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .archive-feature-inner .card-feature-img {
    min-height: 300px;
  }

  .archive-feature-inner .card-feature-body {
    padding: 36px 28px;
  }

  .archive-grid-section {
    padding: 56px 24px 48px;
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    margin-bottom: 48px;
  }

  /* Override Wellness extra top padding at mobile */
  .ln-cat-wellness .archive-grid-section {
    padding-top: 56px;
  }
}

/* 640px — 1-column grid, single column layout throughout */
@media (max-width: 640px) {
  .archive-header {
    padding: 88px 20px 48px;
  }

  .archive-header-title {
    font-size: clamp(40px, 10vw, 56px);
    margin-bottom: 20px;
  }

  .archive-header-desc {
    font-size: 16px;
    line-height: 1.65;
  }

  .archive-header-pitch {
    font-size: 13px;
  }

  .archive-feature-section {
    padding: 40px 20px 48px;
  }

  .archive-feature-inner .card-feature-img {
    min-height: 240px;
  }

  .archive-feature-inner .card-feature-body {
    padding: 28px 20px;
  }

  .archive-feature-inner .card--feature .card-headline {
    font-size: clamp(24px, 6vw, 32px);
  }

  .archive-grid-section {
    padding: 48px 20px 48px;
  }

  .archive-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }

  .archive-pagination .page-numbers a,
  .archive-pagination .page-numbers span {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }

  /* Collapse long page-number lists on mobile */
  .archive-pagination .page-numbers .dots {
    display: none;
  }

  /* Culture italic overrides at small sizes — ease off the dramatic slant */
  .ln-cat-culture .archive-header-title {
    font-size: clamp(40px, 10vw, 56px);
  }
}


/* ── ADMIN BAR + BODY BACKGROUND FIX ────────────────────────────────────────
 *
 * WordPress adds body { margin-top: 32px } when the admin bar is visible for
 * logged-in users. This creates a 32px gap above the archive-header that
 * reveals the html element's background (white by default), producing a
 * white stripe between the fixed nav and the purple archive header.
 *
 * Fix 1: Set body.category background to plum-dark so any gap matches the header.
 * Fix 2: Compensate padding/margin on the archive header for the admin bar.
 */

body.category {
  background-color: var(--plum-dark);
}

body.admin-bar .archive-header {
  margin-top: -32px;
  padding-top: 172px; /* 140px standard + 32px admin bar height */
}