/*
V7-HEADER
* Title:    Buktika - MamaDEX Evidence Packs Page Styles
* Filename: assets/css/mamadex/mamadex-evidence-packs.css
* Version:  v1.0.3
* Issued:   2026-07-17
* Author:   Buktika Webdesk (Binka)
* Owner:    Buktika — Binka
* Purpose:  Page styles for the NEW mamadex-evidence-packs.html (BKT 35120
*           v2.1.0, Section 14.5). Reuses the canonical .sdx-card-section,
*           .sdx-btn-primary/.sdx-btn-secondary component classes from
*           global.css — no new page-wide design language introduced, per
*           the same Part D styling constraint mamadex-proof-routes.css
*           already follows. Palette identical to every other MamaDEX page
*           (Colour Map v3.9.0 §5.3).
* Type:     CSS stylesheet
* License:  © Buktika, 2026. All rights reserved.
*
* ChangeLog:
* - v1.0.2 (2026-07-17): EYEBROW TONE — applied the shared MamaDEX muted
*             violet treatment to section eyebrows. Hero eyebrow unchanged.
* - v1.0.1 (2026-07-14): NARROW CORRECTIVE PASS (owner instruction, "Dark
*             mode and mobile actions") — static review flagged that
*             .mep-actions (the generic-prompt and empty-state action rows)
*             had no mobile breakpoint at all; buttons only wrapped via
*             flex-wrap at their natural content width instead of stacking
*             full-width, unlike the established .sdx-cta-band mobile
*             pattern elsewhere on the site. FIXED: added a ~600px
*             breakpoint that switches .mep-actions to a column stack with
*             full-width, centred-label buttons. Desktop layout, button
*             heights, wording and destinations are all unchanged — no
*             inline styles added.
* - v1.0.0 (2026-07-14): NEW FILE — companion stylesheet for mamadex-
*             evidence-packs.html v1.0.0. See that file's own V7-HEADER for
*             the full architectural rationale (BKT 35120 v2.1.0).
*/

.page-mamadex-evidence-packs {
  --page-bg:            var(--sdx-color-mama-bg);
  --page-primary:       var(--sdx-color-mama-violet);
  --page-secondary:     var(--sdx-color-mama-depth);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-dark-base:     var(--sdx-color-mama-dark-base);
  --page-dark-surface:  var(--sdx-color-mama-dark-surface);

  background: var(--page-bg);
  color: var(--fg);
}

/* Simple gradient hero — no background image required for this utility page. */
.page-mamadex-evidence-packs .hero-wrap {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
}

.page-mamadex-evidence-packs .hero {
  padding: 3.5rem 1.5rem;
}

.page-mamadex-evidence-packs .hero-body {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.page-mamadex-evidence-packs .eyebrow-hero {
  display: block;
  font-family: var(--text-font);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
}

.page-mamadex-evidence-packs .hero .headline {
  color: #ffffff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 0.75rem;
}

.page-mamadex-evidence-packs .hero .intro {
  color: rgba(255, 255, 255, 0.92);
  max-width: 40rem;
  margin: 0 auto;
}

.page-mamadex-evidence-packs .sdx-card-section .eyebrow {
  color: color-mix(in srgb, var(--page-primary) 55%, var(--muted) 45%);
}

/* ── Story-first acknowledgement (State B) — same restrained treatment as
   mamadex-proof-routes.css's own context-bridge block. ── */
.page-mamadex-evidence-packs .mep-story-context {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 1rem 1.5rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.20);
  text-align: center;
}

.page-mamadex-evidence-packs .mep-story-context-text {
  margin: 0;
  font-size: var(--body);
  color: var(--fg);
}

[data-theme="dark"] .page-mamadex-evidence-packs .mep-story-context {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.35);
}

/* ── Generic prompt / empty state (States E/D) ── */
.page-mamadex-evidence-packs .mep-generic-prompt,
.page-mamadex-evidence-packs .mep-empty {
  max-width: 700px;
  margin: 2rem auto;
  text-align: center;
}

.page-mamadex-evidence-packs .mep-generic-prompt h2,
.page-mamadex-evidence-packs .mep-empty h2 {
  font-family: var(--headline-font);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.page-mamadex-evidence-packs .mep-generic-prompt p,
.page-mamadex-evidence-packs .mep-empty p {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.page-mamadex-evidence-packs .mep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* Mobile — v1.0.1 narrow corrective pass. Below ~600px, stack full-width
   rather than wrapping at natural content width, matching the established
   .sdx-cta-band mobile pattern. No fixed heights (labels still wrap
   naturally for longer German/Finnish/French translations); desktop layout
   above this breakpoint is unchanged. */
@media (max-width: 600px) {
  .page-mamadex-evidence-packs .mep-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-mamadex-evidence-packs .mep-actions .sdx-btn-primary,
  .page-mamadex-evidence-packs .mep-actions .sdx-btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── Centre summary (State A) ── */
.page-mamadex-evidence-packs .mep-centre-summary {
  max-width: 900px;
  margin: 2rem auto 0;
}

.page-mamadex-evidence-packs .mep-centre-kicker {
  margin: 0 0 0.25rem;
  font-size: var(--small);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-mamadex-evidence-packs .mep-centre-title {
  font-family: var(--headline-font);
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
  color: var(--fg);
}

.page-mamadex-evidence-packs .mep-centre-mamas {
  margin: 0;
  color: var(--muted);
}

.page-mamadex-evidence-packs .mep-centre-mamas a {
  color: var(--page-primary);
  font-weight: 600;
  text-decoration: underline;
}

.page-mamadex-evidence-packs .mep-centre-mamas-label {
  color: var(--fg);
  font-weight: 600;
}

/* ── Published pack list ── */
.page-mamadex-evidence-packs .mep-packs-section {
  max-width: 1200px;
  margin: 2rem auto 0;
}

.page-mamadex-evidence-packs .mep-packs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .page-mamadex-evidence-packs .mep-packs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-mamadex-evidence-packs .mep-pack-card {
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--page-primary);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.page-mamadex-evidence-packs .mep-pack-card h3 {
  font-family: var(--headline-font);
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
  color: var(--fg);
}

.page-mamadex-evidence-packs .mep-pack-card-programme {
  font-size: var(--small);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.page-mamadex-evidence-packs .mep-pack-card-summary {
  font-size: var(--body);
  color: var(--muted);
  margin: 0 0 1rem;
}

/* ── Specific pack review (State C) ── */
.page-mamadex-evidence-packs .mep-pack-detail {
  max-width: 800px;
  margin: 2rem auto 0;
}

.page-mamadex-evidence-packs .mep-pack-kicker {
  margin: 0 0 0.25rem;
  font-size: var(--small);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-mamadex-evidence-packs .mep-pack-detail-title {
  font-family: var(--headline-font);
  font-size: 1.75rem;
  margin: 0 0 1rem;
  color: var(--fg);
}

.page-mamadex-evidence-packs .mep-pack-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1.25rem;
}

.page-mamadex-evidence-packs .mep-pack-meta dt {
  font-weight: 600;
  color: var(--fg);
}

.page-mamadex-evidence-packs .mep-pack-meta dd {
  margin: 0;
  color: var(--muted);
}

.page-mamadex-evidence-packs .mep-pack-summary {
  font-size: var(--body);
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 1rem;
}

.page-mamadex-evidence-packs .mep-pack-claim-boundary {
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1.5rem;
}

.page-mamadex-evidence-packs .mep-handoff-note {
  padding: 0.875rem 1rem;
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: var(--radius);
}

.page-mamadex-evidence-packs .mep-handoff-note p {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
}

[data-theme="dark"] .page-mamadex-evidence-packs {
  background: var(--page-dark-base);
  color: var(--sdx-color-ui-dark-text);
}

[data-theme="dark"] .page-mamadex-evidence-packs .mep-pack-card {
  background: var(--card);
  border-color: rgba(245, 176, 20, 0.20);
}

[data-theme="dark"] .page-mamadex-evidence-packs .mep-handoff-note {
  background: rgba(245, 176, 20, 0.07);
  border-color: rgba(245, 176, 20, 0.18);
}

[data-theme="dark"] .page-mamadex-evidence-packs #mep-generic-prompt .sdx-btn-primary {
  background: var(--sdx-color-mama-depth);
  color: #ffffff;
}