/**
 * JA Stratum — Tags Index page styles
 * Design: Page/Tags Index — Desktop Light (KLeNm) · Dark (I9e3p) · Mobile (hOdPn)
 * Loaded by html/com_tags/tags/default.php via $doc->addStyleSheet().
 * DO NOT recompile — this is a standalone overlay (not part of template.css).
 *
 * Shared foundations reused from template.css:
 *   .stratum-band, .stratum-eyebrow, .stratum-cta-band (base), .stratum-breadcrumb-band
 * This file provides page-specific components: masthead, breadcrumbs, cloud, popular grid, CTA.
 */

/* ============================================================
   CONTAINER — .pen inner width 1180 (every section Inner is 1180)
   T4/BS default .container is 1320; constrain to the design's 1180.
   ============================================================ */
.stratum-tags-index .container {
  max-width: 1200px; /* R3 unify */
}

/* ============================================================
   MASTHEAD  (section bg, padding [64,96])
   Pencil: FGep8 — fill:#FFFFFF, padding:[64,96], inner gap:24
   Eyebrow: Geist Mono 13px #0062FF letter-spacing 1.5 uppercase
   Title:   Geist 44px 700 #0A0E1A line-height 1.15
   Sub:     Geist 17px #6B7280 line-height 1.6 max-width 700px
   ============================================================ */
.stratum-tags-masthead {
  background-color: var(--stratum-bg);
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.stratum-tags-masthead__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
}

.stratum-tags-eyebrow {
  font-family: var(--stratum-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stratum-primary);
  display: block;
  margin-bottom: 16px;
}

.stratum-tags-masthead__title {
  font-family: var(--stratum-font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.2px;
  color: var(--stratum-heading);
  margin: 0 0 16px;
}

.stratum-tags-masthead__sub {
  font-family: var(--stratum-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--stratum-muted);
  margin: 0;
}

/* ============================================================
   BREADCRUMBS  (bg, padding [8,96,28,96])
   Pencil: ev19j — fill:#FFFFFF, padding:[8,96,28,96]
   Breadcrumb: Geist Mono 12px, muted color, border-bottom on crumb bar
   ============================================================ */
.stratum-tags-breadcrumbs {
  background-color: var(--stratum-bg);
  padding: 8px 0 28px;
}

/* Inline breadcrumb list (Home › Blog › Tags) — mirrors com_tags/tag override.
   .pen ev19j: Geist Mono 12, Home/Blog muted #6B7280, "Tags" heading #0A0E1A,
   lucide chevron-right seps, 1px bottom rule under the trail. */
.stratum-tags-breadcrumbs .stratum-bc {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--stratum-border);
}

.stratum-tags-breadcrumbs .stratum-bc__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--stratum-font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.stratum-tags-breadcrumbs .stratum-bc__link {
  font-family: var(--stratum-font-mono);
  font-size: 12px;
  color: var(--stratum-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.stratum-tags-breadcrumbs .stratum-bc__link:hover,
.stratum-tags-breadcrumbs .stratum-bc__link:focus-visible {
  color: var(--stratum-primary);
}

/* Active crumb "Tags" = heading color (.pen dGWE8 fill #0A0E1A), NOT primary */
.stratum-tags-breadcrumbs .stratum-bc__current {
  font-family: var(--stratum-font-mono);
  font-size: 12px;
  color: var(--stratum-heading);
}

/* Chevron-right separator after non-active items (lucide, mask-image) */
.stratum-tags-breadcrumbs .stratum-bc__item:not(.is-active)::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: var(--stratum-muted);
  margin-left: 4px;
  flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ============================================================
   TAG CLOUD SECTION  (elevated bg, padding [56,96])
   Pencil: fz7cl — fill:#F4F7FB, padding:[56,96], inner max-width 1180px
   Section heading: Geist 26px 700 heading, mb 24px
   Cloud layout: vertical gap 14px between rows
   Pills: flex-wrap row, row gap 12px, justify-content center
   ============================================================ */
.stratum-tags-cloud-section {
  background-color: var(--stratum-elevated);
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.stratum-tags-cloud-title {
  font-family: var(--stratum-font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stratum-heading);
  margin: 0 0 24px;
}

/* Tag cloud: wrapping flex, gap between pills, centered.
   .pen: column gap 12 (Row xPbk3) but row gap 14 (Tag Cloud a4hltV). */
.stratum-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 14px;
  justify-content: center;
}

/* ---- PILL BASE ---- */
.stratum-tags-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--stratum-font-mono);
  font-weight: 400;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
  /* default: secondary (border) style */
  background-color: var(--stratum-surface);
  color: var(--stratum-heading);
  border: 1px solid var(--stratum-border);
}

.stratum-tags-pill:hover,
.stratum-tags-pill:focus-visible {
  background-color: var(--stratum-primary);
  color: #ffffff;
  border-color: var(--stratum-primary);
}

/* ---- TIER 1: Kubernetes-class — 24px 600 tint-primary fill ---- */
/* Pencil: fontSize 24, fontWeight 600, fill #EAF1FF, padding [15,25] */
.stratum-tags-pill--t1 {
  font-size: 24px;
  font-weight: 600;
  padding: 15px 25px;
  background-color: var(--stratum-tint-primary);
  color: var(--stratum-primary);
  border-color: transparent;
}

/* ---- TIER 2: Postgres-class — 22px 600 tint-primary fill ---- */
/* Pencil: fontSize 22, fontWeight 600, fill #EAF1FF, padding [14,24] */
.stratum-tags-pill--t2 {
  font-size: 22px;
  font-weight: 600;
  padding: 14px 24px;
  background-color: var(--stratum-tint-primary);
  color: var(--stratum-primary);
  border-color: transparent;
}

/* ---- TIER 3: Terraform/Compute-class — 20–21px 600 tint-primary ---- */
/* Pencil: fontSize 20-21, fontWeight 600, fill #EAF1FF, padding [13,22-23] */
.stratum-tags-pill--t3 {
  font-size: 20px;
  font-weight: 600;
  padding: 13px 22px;
  background-color: var(--stratum-tint-primary);
  color: var(--stratum-primary);
  border-color: transparent;
}

/* ---- TIER 4: Edge/Databases-class — 18px normal border ---- */
/* Pencil: fontSize 18-19, fontWeight normal, fill #FFFFFF, stroke #E5E7EB, padding [12,20-21] */
.stratum-tags-pill--t4 {
  font-size: 18px;
  font-weight: 400;
  padding: 12px 20px;
}

/* ---- TIER 5: BGP/Region-class — 14-16px normal border ---- */
/* Pencil: fontSize 13-16, fontWeight normal, fill #FFFFFF, stroke #E5E7EB, padding [10-11,16-19] */
.stratum-tags-pill--t5 {
  font-size: 15px;
  font-weight: 400;
  padding: 11px 18px;
}

/* ============================================================
   POPULAR TAGS SECTION  (bg, padding [56,96])
   Pencil: aFlwy — fill:#FFFFFF, padding:[56,96]
   Title:  Geist 26px 700 heading
   Sub:    Geist 16px muted line-height 1.6 max-width 640px
   Grid:   3-col, gap 20px
   ============================================================ */
.stratum-tags-popular-section {
  background-color: var(--stratum-bg);
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.stratum-tags-section-title {
  font-family: var(--stratum-font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stratum-heading);
  margin: 0 0 12px;
}

.stratum-tags-section-sub {
  font-family: var(--stratum-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--stratum-muted);
  max-width: 640px;
  margin: 0 0 24px;
}

.stratum-tags-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---- FEATURE CARD  (Card/Feature = sPYge) ---- */
/* Pencil: fill:#FFFFFF, stroke:#E5E7EB, cornerRadius:16, padding:24, gap:14 */
.stratum-tags-feature-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: var(--stratum-surface);
  border: 1px solid var(--stratum-border);
  border-radius: var(--stratum-radius-lg);   /* 16px */
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stratum-tags-feature-card:hover,
.stratum-tags-feature-card:focus-visible {
  border-color: var(--stratum-primary);
  box-shadow: 0 4px 20px rgba(0, 98, 255, 0.08);
}

/* Icon box: 44×44, radius 10, tint-primary bg, primary icon 22px */
/* Pencil: bPTYB — fill:#EAF1FF, cornerRadius:10, width:44, height:44 */
.stratum-tags-feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--stratum-radius-md);   /* 10px */
  background-color: var(--stratum-tint-primary);
  color: var(--stratum-primary);
  flex-shrink: 0;
}

.stratum-tags-feature-card__icon svg {
  color: var(--stratum-primary);
  flex-shrink: 0;
}

/* Card title: Geist 18px 600 heading */
/* Pencil: oyzK1 — fontSize:18, fontWeight:600, fill:#0A0E1A */
.stratum-tags-feature-card__title {
  font-family: var(--stratum-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--stratum-heading);
  margin: 0;
}

/* Card body: Geist 14px muted line-height 1.6 */
/* Pencil: pDkII — fontSize:14, fontWeight:normal, fill:#6B7280, lineHeight:1.6 */
.stratum-tags-feature-card__body {
  font-family: var(--stratum-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--stratum-muted);
  margin: 0;
}

/* ============================================================
   CTA BAND  (primary bg, padding [68,96])
   Pencil: K0Z1j — fill:#0062FF, padding:[68,96], inner max-width 720px
   Eyebrow: Geist Mono 13px rgba(255,255,255,0.67) letter-spacing 1.5
   Title:   Geist 34px 700 #FFFFFF line-height 1.2
   Sub:     Geist 16px rgba(255,255,255,0.80) line-height 1.6
   Buttons: gap 12px; White pill + Ghost pill
   ============================================================ */
.stratum-tags-cta-band {
  background-color: var(--stratum-primary);
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}

.stratum-tags-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.stratum-tags-cta-eyebrow {
  font-family: var(--stratum-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.67);
  display: block;
}

.stratum-tags-cta-band__title {
  font-family: var(--stratum-font-sans);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.stratum-tags-cta-band__sub {
  font-family: var(--stratum-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}

.stratum-tags-cta-band__btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* White pill button */
/* Pencil: BrTpQ — fill:#FFFFFF, cornerRadius:9999, padding:[12,24] */
/* Label: Geist 15px 600 #0062FF */
.stratum-tags-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--stratum-font-sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 12px 24px;
  text-decoration: none;
  transition: opacity 0.12s ease, background-color 0.12s ease;
  white-space: nowrap;
}

.stratum-tags-cta-btn--white {
  background-color: #ffffff;
  color: var(--stratum-primary);
  border: none;
}

.stratum-tags-cta-btn--white:hover,
.stratum-tags-cta-btn--white:focus-visible {
  background-color: #f0f4ff;
  color: var(--stratum-primary);
}

/* Ghost button */
/* Pencil: eSLPz — stroke:#FFFFFF66 strokeWidth:1, cornerRadius:9999, padding:[11,23] */
/* Label: Geist 15px 600 #FFFFFF */
.stratum-tags-cta-btn--ghost {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.40);
  padding: 11px 23px;
}

.stratum-tags-cta-btn--ghost:hover,
.stratum-tags-cta-btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.70);
}

/* ============================================================
   DARK MODE  ([data-bs-theme="dark"] + [data-theme="dark"])
   ============================================================ */
[data-bs-theme="dark"] .stratum-tags-masthead,
[data-theme="dark"] .stratum-tags-masthead {
  background-color: var(--stratum-bg);
}

[data-bs-theme="dark"] .stratum-tags-breadcrumbs,
[data-theme="dark"] .stratum-tags-breadcrumbs {
  background-color: var(--stratum-bg);
}

/* Cloud section dark — !important needed: darkmode.css loads after tags-index.css and sets
   [data-bs-theme=dark] .stratum-band → bg color; elevated must win here */
[data-bs-theme="dark"] .stratum-tags-cloud-section,
[data-theme="dark"] .stratum-tags-cloud-section {
  background-color: var(--stratum-elevated) !important;
}

/* Cloud section heading dark */
[data-bs-theme="dark"] .stratum-tags-cloud-title,
[data-theme="dark"] .stratum-tags-cloud-title {
  color: var(--stratum-heading);
}

/* Pills dark: border pills surface→ #121829, border #232B3D */
[data-bs-theme="dark"] .stratum-tags-pill,
[data-theme="dark"] .stratum-tags-pill {
  background-color: var(--stratum-surface);
  color: var(--stratum-heading);
  border-color: var(--stratum-border);
}

/* Primary-fill pills (t1/t2/t3) keep tint-primary in dark (#11203F) + primary text */
[data-bs-theme="dark"] .stratum-tags-pill--t1,
[data-bs-theme="dark"] .stratum-tags-pill--t2,
[data-bs-theme="dark"] .stratum-tags-pill--t3,
[data-theme="dark"] .stratum-tags-pill--t1,
[data-theme="dark"] .stratum-tags-pill--t2,
[data-theme="dark"] .stratum-tags-pill--t3 {
  background-color: var(--stratum-tint-primary);
  color: var(--stratum-primary);
  border-color: transparent;
}

/* HOVER (dark) for the tint-filled tiers — the dark tier rule above is 0,2,0 and
   out-specifies the base 0,1,1 .stratum-tags-pill:hover, so the filled pills had NO
   hover feedback in dark. Re-assert hover at 0,2,1 so they flip to primary fill too. */
[data-bs-theme="dark"] .stratum-tags-pill--t1:hover,
[data-bs-theme="dark"] .stratum-tags-pill--t2:hover,
[data-bs-theme="dark"] .stratum-tags-pill--t3:hover,
[data-bs-theme="dark"] .stratum-tags-pill--t1:focus-visible,
[data-bs-theme="dark"] .stratum-tags-pill--t2:focus-visible,
[data-bs-theme="dark"] .stratum-tags-pill--t3:focus-visible,
[data-theme="dark"] .stratum-tags-pill--t1:hover,
[data-theme="dark"] .stratum-tags-pill--t2:hover,
[data-theme="dark"] .stratum-tags-pill--t3:hover,
[data-theme="dark"] .stratum-tags-pill--t1:focus-visible,
[data-theme="dark"] .stratum-tags-pill--t2:focus-visible,
[data-theme="dark"] .stratum-tags-pill--t3:focus-visible {
  background-color: var(--stratum-primary);
  color: #ffffff;
  border-color: var(--stratum-primary);
}

/* Popular section dark */
[data-bs-theme="dark"] .stratum-tags-popular-section,
[data-theme="dark"] .stratum-tags-popular-section {
  background-color: var(--stratum-bg);
}

/* Feature card dark */
[data-bs-theme="dark"] .stratum-tags-feature-card,
[data-theme="dark"] .stratum-tags-feature-card {
  background-color: var(--stratum-surface);
  border-color: var(--stratum-border);
}

/* HOVER (dark) — the dark card rule above is 0,2,0 and out-specifies the base
   0,1,1 :hover, so the primary border feedback was lost in dark. Re-assert at 0,2,1. */
[data-bs-theme="dark"] .stratum-tags-feature-card:hover,
[data-bs-theme="dark"] .stratum-tags-feature-card:focus-visible,
[data-theme="dark"] .stratum-tags-feature-card:hover,
[data-theme="dark"] .stratum-tags-feature-card:focus-visible {
  border-color: var(--stratum-primary);
}

/* CTA band: primary is theme-independent (#0062FF); darkmode.css sets .stratum-band to bg-dark,
   so override it with !important to keep primary bg */
[data-bs-theme="dark"] .stratum-tags-cta-band,
[data-theme="dark"] .stratum-tags-cta-band {
  background-color: var(--stratum-primary) !important;
}

/* [ONPRIMARY-HEADING-DARK-LEAK] (cf #141/#262): darkmode.css generic
   [data-bs-theme=dark] h1..h6{color:#F5F7FA} (0,1,1) beats the plain
   .stratum-tags-cta-band__title{color:#fff} (0,1,0) → the on-primary title
   tints off-white on the blue band in dark. Re-pin to pure white at ≥0,2,0. */
[data-bs-theme="dark"] .stratum-tags-cta-band .stratum-tags-cta-band__title,
[data-theme="dark"] .stratum-tags-cta-band .stratum-tags-cta-band__title {
  color: #ffffff;
}

/* ============================================================
   RESPONSIVE — Mobile (390px) · Tablet (768px)
   Pencil: hOdPn — cloud wraps, popular grid 1-col
   ============================================================ */

/* Tablet: 2-col popular grid */
@media (max-width: 991.98px) {
  .stratum-tags-popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: stack all */
@media (max-width: 767.98px) {
  .stratum-tags-masthead {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .stratum-tags-masthead__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .stratum-tags-masthead__sub {
    font-size: 15px;
  }

  .stratum-tags-cloud-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .stratum-tags-cloud-title {
    font-size: 22px;
  }

  /* Reduce pill sizes on mobile: tier 1 → 18, tier 2 → 17, tier 3 → 16 */
  .stratum-tags-pill--t1 {
    font-size: 18px;
    padding: 11px 18px;
  }
  .stratum-tags-pill--t2 {
    font-size: 17px;
    padding: 10px 17px;
  }
  .stratum-tags-pill--t3 {
    font-size: 16px;
    padding: 10px 16px;
  }
  .stratum-tags-pill--t4 {
    font-size: 15px;
    padding: 10px 16px;
  }
  .stratum-tags-pill--t5 {
    font-size: 13px;
    padding: 9px 14px;
  }

  .stratum-tags-popular-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .stratum-tags-section-title {
    font-size: 22px;
  }

  .stratum-tags-popular-grid {
    grid-template-columns: 1fr;
  }

  .stratum-tags-cta-band {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .stratum-tags-cta-band__title {
    font-size: 24px;
  }

  .stratum-tags-cta-band__btns {
    flex-direction: column;
    width: 100%;
  }

  .stratum-tags-cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* .pen mobile (hOdPn rllWY) shows only the white "Start free" btn — hide ghost on mobile */
  .stratum-tags-cta-btn--ghost {
    display: none;
  }
}

/* ============================================================
   USER PREF (feedback-3): UNIFORM tag pills. The weighted word-cloud (tiers t1–t5 =
   15–24px with two fills/colours + size jumps) looked inconsistent. Make every pill
   identical — one size (14px), one outline style, one font (Geist Mono). Overrides all
   tiers in light AND dark (var tokens auto-switch; placed last + 0,2,0 to win over the
   dark `[data-bs-theme] .stratum-tags-pill--tN` 0,2,0 rules by source order).
   ============================================================ */
.stratum-tags-cloud .stratum-tags-pill {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  background-color: var(--stratum-surface) !important;
  color: var(--stratum-heading) !important;
  border: 1px solid var(--stratum-border) !important;
}
.stratum-tags-cloud .stratum-tags-pill:hover,
.stratum-tags-cloud .stratum-tags-pill:focus-visible {
  background-color: var(--stratum-primary) !important;
  color: #ffffff !important;
  border-color: var(--stratum-primary) !important;
}