/* ======================================================================================================
 * Version: 3.7.0
 * Created: 2026-01-24 13h15 SAST
 * Updated: 2026-03-28
 * File: viridians-jurisdictions-grid.css
 * Path: /assets/css/viridians/viridians-jurisdictions-grid.css
 * Author: Buktika Webdesk (Binka)
 * Purpose: Grid section styles ONLY - trigger cards and grid layout
 * Type: CSS stylesheet
 * License: © Buktika, 2026. All rights reserved.
 * ISO Reference: ISO/IEC 15897, ISO 27001
 * Source Naming Standard: Buktika v7.1 (ISO Aligned)
 * Spec ref: BKT-PIL-01-VIR-CARD-Trigger-Card-Design-v1.0.0
 * ====================================================================================================== */
/*
ChangeLog:
  - v3.7.0 (2026-03-28): Added soft commercial anchor block for Page 2 routing.
    * ADDED    Compact anchor card between intro and trigger grid.
               Keeps buying direction visible without turning the page into a sales wall.
  - v3.6.1 (2026-03-28): TITLE TOP-BREATHING FIX.
    * CHANGED  - Added extra internal space above the grid section title without
                 replacing the shared .sdx-card-section shell.
  - v3.6.0 (2026-03-28): COMPLIANCE RESET — shared section shell restored.
    * FIXED    - Local section frame/padding override removed.
                 Grid section now relies on canonical .sdx-card-section spacing and shadow.
    * FIXED    - CTA hyperlink colour now remains on the page-primary link colour.
                 Hover no longer shifts "Detail →" to a second accent colour.
  - v3.5.0 (2026-03-28): SECTION SHELL + HOVER EDGE POLISH.
    * ADDED    - Grid section now has a proper card-like frame and shadow.
                 The whole block reads as a deliberate container again.
    * CHANGED  - More space added between metadata pills and the card title.
    * ADDED    - Hover state now includes a thin channel-colour border cue,
                 reinforcing classification without overpowering the card.
  - v3.4.0 (2026-03-28): TITLE-FIRST TUNING — quieter pills, more breathing room.
    * CHANGED  - Much more space added between the top metadata row and the title.
                 The card now leads with the trigger title instead of the pills.
    * CHANGED  - Channel badges softened into quieter metadata chips.
                 They remain available for confirmation without dominating the scan path.
  - v3.3.0 (2026-03-28): HUMAN-SCAN REDESIGN — metadata lifted out of the footer.
    * ADDED    - Top metadata row with channel badges and jurisdiction chip.
                 Cards now explain "what kind of trigger is this?" before the user
                 reads the title.
    * CHANGED  - Footer simplified to CTA only. Less cognitive competition.
    * CHANGED  - Vertical spacing and CTA treatment rebalanced for calmer scan flow.
  - v3.2.0 (2026-03-28): CARD BREATHING ROOM + SCOPE ROW CORRECTION.
    * CHANGED  - Cards widened slightly in the grid and given more internal spacing.
                 Title, lede, and footer now breathe more comfortably.
    * CHANGED  - Footer row now uses a calmer CTA label length and stronger separation.
    * CHANGED  - Jurisdiction flag/scope row prepared for spec-correct plain-language labels.
  - v3.1.0 (2026-03-27): CARD-AS-LINK + FOOT LAYOUT FIX.
    * CHANGED  - .vm-trigger-card is now styled for use as an <a> element.
                 JS renders <a class="vm-trigger-card"> not <article>.
                 display:flex retained. color:inherit. text-decoration:none.
                 All existing visual rules unchanged.
    * FIXED    - .vm-card-jurisdiction: min-width:0 + flex-shrink:1.
                 Root cause of missing "Details \u2192" in screenshots: flex children
                 without min-width:0 cannot shrink below content width, starving
                 the CTA of available space. Now the jurisdiction label truncates
                 gracefully before the CTA is ever clipped.
    * ADDED    - .vm-card-scope-label: overflow:hidden + text-overflow:ellipsis.
    * CHANGED  - .vm-card-btn: pointer-events:none (span, not link — card owns click).
                 flex-shrink:0 (CTA is always fully visible).
    * ADDED    - .vm-trigger-card:hover .vm-card-bar: filter:brightness(1.12).
                 Bar brightens on card hover — reinforces channel signal.
    * ADDED    - .vm-trigger-card:hover .vm-card-btn: arrow nudge coordinated
                 with card lift via parent selector.
    * ADDED    - .vm-trigger-card:focus-visible: 2px outline in page-primary.
  - v3.0.0 (2026-03-27): DIRECTION C REDESIGN per BKT-PIL-01-VIR-CARD v2.0.0.
  - v2.0.0 (2026-03-27): CARD REDESIGN per BKT-PIL-01-VIR-CARD v1.0.0.
  - v1.0.1: Naming compliance fix.
  - v1.0.0: Initial release.
*/

/* ==========================================================================
   GRID SECTION (HIDDEN BY DEFAULT)
   ========================================================================== */

.viridians-jurisdictions-grid-section {
  display: none;
}

.viridians-jurisdictions-grid-section.vm-grid-visible {
  display: block;
}

/* ==========================================================================
   GRID TITLE AND SUBTITLE
   ========================================================================== */

#viridians-jurisdictions-grid-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.vm-grid-anchor {
  margin-top: 1.5rem;
}

.vm-grid-anchor-card {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--page-primary) 16%, transparent);
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--page-primary) 4%, var(--card));
}

.vm-grid-anchor-card--eco {
  border-color: color-mix(in srgb, var(--sdx-color-stem-olive) 28%, transparent);
}

.vm-grid-anchor-card--human {
  border-color: color-mix(in srgb, var(--sdx-color-mama-violet) 28%, transparent);
}

.vm-grid-anchor-card--both {
  border-color: color-mix(in srgb, var(--page-primary) 24%, transparent);
}

.vm-grid-anchor-copy > * {
  margin: 0;
}

.vm-grid-anchor-eyebrow {
  color: var(--page-accent);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vm-grid-anchor-title {
  margin-top: 0.35rem;
  font-size: var(--h5);
  line-height: 1.25;
  color: var(--fg);
}

.vm-grid-anchor-body {
  margin-top: 0.6rem;
  font-size: var(--body);
  line-height: 1.65;
  color: var(--muted);
}

.vm-grid-anchor-note {
  margin-top: 0.7rem;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--muted);
}

.vm-grid-anchor-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vm-grid-anchor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--page-primary) 16%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--page-primary);
  font-size: var(--small);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease;
}

.vm-grid-anchor-link:hover,
.vm-grid-anchor-link:focus-visible {
  background: color-mix(in srgb, var(--page-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--page-primary) 26%, transparent);
  transform: translateY(-0.0625rem);
}

.vm-grid-anchor-link--primary {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  border-color: transparent;
  color: var(--sdx-color-ivory);
}

.vm-grid-anchor-link--primary:hover,
.vm-grid-anchor-link--primary:focus-visible {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  filter: brightness(1.05);
  transform: translateY(-0.0625rem);
}

.vm-flag-icon {
  width: 100px;
  height: 76px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 0.625rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.46);
}

.vm-jurisdiction,
.vm-channels {
  font-size: 2.25rem;
  line-height: 1.2;
  font-family: var(--headline-font);
  font-weight: 700;
  color: var(--fg);
}

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */

.viridians-jurisdictions-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.vm-empty {
  text-align: center;
  font-size: var(--body);
  color: var(--muted);
  padding: 3rem 1rem;
  grid-column: 1 / -1;
}

/* ==========================================================================
   TRIGGER CARD — CANONICAL v3.1.0 (card-as-link)
   JS renders: <a class="vm-trigger-card" href="[detailUrl]"> (not <article>).
   The entire card surface is the link. Single focusable target. Clean UX.
   Anatomy (top to bottom, per BKT-PIL-01-VIR-CARD v2.0.0 §5):
     1. .vm-card-bar     — 14px channel colour bar. Sole channel signal.
     2. .vm-card-inner   — title + lede + foot
        .vm-card-foot    — jurisdiction (left) + CTA span (right)
   ========================================================================== */

.vm-trigger-card {
  /* Link reset — rendered as <a> by JS */
  color: inherit;
  text-decoration: none;

  /* Card surface */
  background: var(--card);
  border: 1.5px solid var(--border);
  border-top: none;                   /* bar owns the top edge — HARD RULE §8-HR1 */
  border-radius: var(--radius);
  overflow: hidden;                   /* bar reaches physical card corners         */

  /* Layout */
  display: flex;
  flex-direction: column;

  /* Elevation */
  box-shadow: var(--card-shadow);
  cursor: pointer;

  /* Transition */
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.vm-trigger-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.vm-trigger-card:hover,
.vm-trigger-card:focus-visible {
  border-color: rgba(18, 53, 67, 0.18);
}

.vm-trigger-card:has(.vm-card-bar--eco):hover,
.vm-trigger-card:has(.vm-card-bar--eco):focus-visible {
  border-color: color-mix(in srgb, var(--sdx-color-stem-olive) 50%, white);
}

.vm-trigger-card:has(.vm-card-bar--mdx):hover,
.vm-trigger-card:has(.vm-card-bar--mdx):focus-visible {
  border-color: color-mix(in srgb, var(--sdx-color-mama-violet) 52%, white);
}

.vm-trigger-card:has(.vm-card-bar--dual):hover,
.vm-trigger-card:has(.vm-card-bar--dual):focus-visible {
  border-color: rgba(109, 90, 116, 0.42);
}

/* Bar brightens subtly on card hover — reinforces channel identity */
.vm-trigger-card:hover .vm-card-bar {
  filter: brightness(1.12);
}

/* Focus ring — keyboard navigation. Single focusable target per card. */
.vm-trigger-card:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 2px;
}

/* ——— 1. CHANNEL BAR —————————————————————————————————————————————————————————
   Height: 0.875rem (14px) — architectural weight, not decoration.
   HARD RULE §8-HR1: bar spans full card width at top edge.
   HARD RULE §8-HR2: dual = hard 50/50 split. No gradient. No blend.
   HARD RULE §8-HR7: token references only. No hex literals.
   ——————————————————————————————————————————————————————————————————————————— */

.vm-card-bar {
  width: 100%;
  height: 0.875rem;
  flex-shrink: 0;
  transition: filter 0.28s ease;
}

.vm-card-bar--eco {
  background: var(--sdx-color-stem-olive);
}

.vm-card-bar--mdx {
  background: var(--sdx-color-mama-violet);
}

/* Hard 50/50 split. Stem-olive left. Mama-violet right.
   Two channels. Two obligations. HARD RULE §8-HR2. */
.vm-card-bar--dual {
  background: linear-gradient(
    to right,
    var(--sdx-color-stem-olive)  0%,
    var(--sdx-color-stem-olive)  50%,
    var(--sdx-color-mama-violet) 50%,
    var(--sdx-color-mama-violet) 100%
  );
}

/* ——— 2. CARD INNER: TITLE + LEDE + FOOT ————————————————————————————————————
   Single content wrapper. Title leads. Lede follows. Foot anchors bottom.
   ——————————————————————————————————————————————————————————————————————————— */

.vm-card-inner {
  padding: 1rem 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

/* ——— 2. TOP META ROW ———————————————————————————————————————————————————————
   Left: channel badges. Right: jurisdiction chip.
   This restores the "double confirmation" principle from the card spec.
   ——————————————————————————————————————————————————————————————————————————— */

.vm-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 1.45rem;
}

.vm-card-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex-wrap: wrap;
}

.vm-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.vm-card-badge--eco {
  background: rgba(70, 72, 32, 0.08);
  color: var(--sdx-color-stem-olive);
}

.vm-card-badge--mdx {
  background: rgba(139, 92, 246, 0.09);
  color: var(--sdx-color-mama-violet);
}

@media (max-width: 52rem) {
  .vm-grid-anchor-card {
    grid-template-columns: 1fr;
  }

  .vm-grid-anchor-actions {
    width: 100%;
  }
}

.vm-card-jurisdiction {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 52%;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(18, 53, 67, 0.04);
  border: 1px solid rgba(18, 53, 67, 0.08);
  flex-shrink: 1;
}

.vm-card-flag {
  width: 1.25rem;
  height: 1rem;
  object-fit: cover;
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid rgba(18, 53, 67, 0.10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.vm-card-scope-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.vm-card-title {
  font-family: var(--headline-font);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.26;
  color: var(--fg);
  margin: 0 0 0.65rem;
}

.vm-card-lede {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

/* ——— FOOT: CTA ONLY ————————————————————————————————————————————————————————
   Keep the action isolated so the card ends with a single clear instruction.
   ——————————————————————————————————————————————————————————————————————————— */

.vm-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(18, 53, 67, 0.08);
}

.vm-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--page-primary);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--text-font);
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.28s ease, gap 0.28s ease;
}

/* Arrow nudges right on card hover — coordinated with card lift */
.vm-trigger-card:hover .vm-card-btn {
  gap: 0.45rem;
}

.vm-trigger-card:visited .vm-card-btn {
  color: var(--page-primary);
}

/* ==========================================================================
   EMPTY / ERROR STATES
   ========================================================================== */

.vm-grid-empty,
.vm-grid-error {
  text-align: center;
  padding: 3rem 1rem;
  grid-column: 1 / -1;
}

.vm-grid-empty p,
.vm-grid-error p {
  font-size: var(--body);
  color: var(--muted);
  margin: 0.5rem 0;
}

.vm-grid-empty strong {
  color: var(--fg);
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .vm-card-scope-label {
  color: var(--muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .vm-jurisdiction,
  .vm-channels {
    font-size: 1.75rem;
  }

  #viridians-jurisdictions-grid-title {
    margin-top: 0.25rem;
  }

  .viridians-jurisdictions-grid-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .vm-flag-icon {
    width: 1.75rem;
    height: 1.3125rem;
  }
}

@media (max-width: 480px) {
  .vm-jurisdiction,
  .vm-channels {
    font-size: 1.5rem;
  }

  #viridians-jurisdictions-grid-title {
    margin-top: 0;
  }

  #viridians-jurisdictions-grid-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .vm-flag-icon {
    width: 1.5rem;
    height: 1.125rem;
  }

  .vm-card-foot {
    justify-content: flex-start;
    padding-top: 0.8rem;
  }

  .vm-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .vm-card-jurisdiction {
    max-width: 100%;
  }

  .vm-card-btn {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   END OF GRID SECTION STYLES
   ========================================================================== */