/* ════════════════════════════════════════════════════════════════════
   LMA EDITORIAL DESIGN SYSTEM — V15.0
   ════════════════════════════════════════════════════════════════════
   Shared foundation for the new premium editorial surfaces added in
   V15.0: the News Archive, Single News Article, and About pages.

   This is a DELIBERATELY SEPARATE token namespace (--ed-*, prefix
   "lma-ed-") from the existing module design systems (--nh-* in
   Nominee Hero, --ef-* in the Entry Form, etc.) — V15.0 does not
   modify any existing module's CSS variables, classes, or markup.
   Everything here is additive and scoped under `.lma-ed` so it can
   never leak into or be affected by other parts of the site.

   Primary Background: #060608 (brief originally specified #000000FC;
   per your instruction this build uses #060608 instead — it's also
   the same near-black already used as a solid background elsewhere in
   this plugin, e.g. the Nominee Hero widget, so it stays visually
   consistent with the rest of the site rather than introducing a
   second "black").
   Official Gold: #C9973A (unchanged from the brief, matches the gold
   already used everywhere else in the plugin).
   ════════════════════════════════════════════════════════════════════ */

.lma-ed {
  /* ── Core palette ── */
  --ed-bg:            #060608;               /* Primary background */
  --ed-bg-elevated:    #0A0A0F;               /* Subtle elevated surface — cards, pills */
  --ed-bg-elevated-2:  #101016;               /* One step further up — hovered/active surfaces */
  --ed-bg-glass:        rgba(10,10,15,0.72);  /* Glass panels over imagery */
  --ed-border:          rgba(255,255,255,0.08);
  --ed-border-strong:   rgba(255,255,255,0.14);
  --ed-gold:            #C9973A;
  --ed-gold-light:      #E4C07A;
  --ed-gold-dim:        rgba(201,151,58,0.14);
  --ed-gold-border:     rgba(201,151,58,0.30);
  --ed-text:            #F5F5F7;
  --ed-muted:           #B8B8C2;
  --ed-faint:           #7A7A85;

  /* V15.1 — validation state colors, additive (used by the Contact
     form's error/success messaging). No existing token changed. */
  --ed-error:           #E2574B;
  --ed-error-dim:       rgba(226,87,75,0.12);
  --ed-success:         #4CAF7D;
  --ed-success-dim:     rgba(76,175,125,0.12);

  /* ── Typography ── */
  --ed-font-display: 'Playfair Display', Georgia, serif;
  --ed-font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Motion ── */
  --ed-t:    240ms cubic-bezier(.22,.61,.36,1);
  --ed-t-slow: 480ms cubic-bezier(.22,.61,.36,1);

  /* ── Shape ── */
  --ed-r-sm: 10px;
  --ed-r:    16px;
  --ed-r-lg: 24px;

  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: var(--ed-font-body);
  -webkit-font-smoothing: antialiased;
}

.lma-ed * { box-sizing: border-box; }
.lma-ed img { max-width: 100%; display: block; }
.lma-ed a { color: inherit; text-decoration: none; }

/* ── Container ── */
.lma-ed-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) {
  .lma-ed-container { padding: 0 20px; }
}

/* ── Section rhythm ── */
.lma-ed-section { padding: 96px 0; }
.lma-ed-section--tight { padding: 64px 0; }
@media (max-width: 768px) {
  .lma-ed-section        { padding: 56px 0; }
  .lma-ed-section--tight { padding: 40px 0; }
}

/* ── Eyebrow / kicker ── */
.lma-ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-gold);
}
.lma-ed-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ed-gold);
}

/* ── Headline scale ── */
.lma-ed-h1 {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  color: var(--ed-gold-light); /* fallback for browsers without background-clip:text */
}
.lma-ed-h2 {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 12px 0 0;
  color: var(--ed-gold-light); /* fallback for browsers without background-clip:text */
}
.lma-ed-h3 {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.25;
  margin: 0;
  color: var(--ed-gold-light); /* fallback for browsers without background-clip:text */
}

/* Gold gradient headline treatment — the exact same gradient as
   .lma-ed-btn--gold below (var(--ed-gold-light) → var(--ed-gold),
   135deg), applied to h1/h2/h3 uniformly, per reference: the site's
   own hero ("The LMAs") and the "VOTE NOMINEES" button both use this
   same warm, fully-gold treatment rather than a white-to-gold blend.
   This now also covers h3 — including the "How The Awards Work"
   process-step titles (Submit Entry / Screening / etc.) and timeline
   milestone titles — instead of leaving them plain white. Gated
   behind @supports so anything that can't render it falls back to
   solid --ed-gold-light (set above) instead of invisible text. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lma-ed-h1,
  .lma-ed-h2,
  .lma-ed-h3 {
    background: linear-gradient(135deg, var(--ed-gold-light), var(--ed-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.lma-ed-lede {
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
  line-height: 1.65;
  color: var(--ed-muted);
  max-width: 62ch;
  margin: 22px auto 0;
}
.lma-ed-center { text-align: center; }
.lma-ed-center .lma-ed-lede { margin-left: auto; margin-right: auto; }

/* ── Buttons ── */
.lma-ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: var(--ed-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--ed-t), box-shadow var(--ed-t), background var(--ed-t), border-color var(--ed-t);
  white-space: nowrap;
}
.lma-ed-btn--gold {
  background: linear-gradient(135deg, var(--ed-gold-light), var(--ed-gold));
  color: #0A0700;
  box-shadow: 0 10px 30px rgba(201,151,58,0.22);
}
.lma-ed-btn--gold:hover  { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201,151,58,0.32); }
.lma-ed-btn--ghost {
  background: transparent;
  color: var(--ed-text);
  border-color: var(--ed-border-strong);
}
.lma-ed-btn--ghost:hover { border-color: var(--ed-gold-border); background: var(--ed-gold-dim); }

/* ── Pills (category filters, badges) ── */
.lma-ed-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ed-bg-elevated);
  border: 1px solid var(--ed-border);
  color: var(--ed-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: var(--ed-t);
  white-space: nowrap;
}
.lma-ed-pill:hover                  { border-color: var(--ed-gold-border); color: var(--ed-text); }
.lma-ed-pill.is-active,
.lma-ed-pill[aria-pressed="true"] {
  background: var(--ed-gold-dim);
  border-color: var(--ed-gold-border);
  color: var(--ed-gold-light);
}
.lma-ed-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6,6,8,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ed-gold-border);
  color: var(--ed-gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Cards ── */
.lma-ed-card {
  position: relative;
  background: var(--ed-bg-elevated);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-r);
  overflow: hidden;
  transition: transform var(--ed-t), border-color var(--ed-t), box-shadow var(--ed-t);
}
.lma-ed-card:hover {
  transform: translateY(-6px);
  border-color: var(--ed-gold-border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,151,58,0.12);
}
.lma-ed-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ed-bg-elevated-2);
}
.lma-ed-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ed-t-slow);
}
.lma-ed-card:hover .lma-ed-card-media img { transform: scale(1.06); }
.lma-ed-card-body { padding: 22px 22px 26px; }
.lma-ed-card-badge { margin-bottom: 12px; }
.lma-ed-card-title {
  font-family: var(--ed-font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ed-text);
  margin: 0 0 12px;
  transition: color var(--ed-t);
}
.lma-ed-card:hover .lma-ed-card-title { color: var(--ed-gold-light); }
.lma-ed-card-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.74rem; color: var(--ed-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lma-ed-card-meta span::after { content: '•'; margin-left: 10px; color: var(--ed-border-strong); }
.lma-ed-card-meta span:last-child::after { content: ''; margin: 0; }

/* ── Reveal-on-scroll (progressive enhancement; content is visible by
   default so it degrades gracefully with JS/reduced-motion off) ── */
.lma-ed-reveal { opacity: 1; transform: none; transition: opacity var(--ed-t-slow), transform var(--ed-t-slow); }
.js-ed-reveal-ready .lma-ed-reveal { opacity: 0; transform: translateY(24px); }
.js-ed-reveal-ready .lma-ed-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ed-reveal-ready .lma-ed-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Skip-link / focus visibility (accessibility) ── */
.lma-ed a:focus-visible,
.lma-ed button:focus-visible,
.lma-ed input:focus-visible {
  outline: 2px solid var(--ed-gold);
  outline-offset: 3px;
}

/* ── Icons (LMA_Editorial_Icons — see includes/class-lma-editorial-icons.php) ── */
.lma-ed-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* Circular icon badge — gold gradient ring on a dark disc, used for
   process steps, stats, mission/vision/values, and contact info. One
   consistent "premium award" motif reused everywhere instead of a
   different icon treatment per section. */
.lma-ed-icon-badge {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(201,151,58,0.20), var(--ed-bg-elevated-2) 70%);
  border: 1px solid var(--ed-gold-border);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--ed-gold-light);
  font-size: 1.4rem;
  transition: transform var(--ed-t), box-shadow var(--ed-t), border-color var(--ed-t);
}
.lma-ed-icon-badge--lg { width: 68px; height: 68px; font-size: 1.7rem; }
.lma-ed-icon-badge--sm { width: 44px; height: 44px; font-size: 1.1rem; }

/* ── Divider with centered gold dash (used under eyebrow+heading pairs
   instead of a plain flat rule) ── */
.lma-ed-divider {
  width: 64px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--ed-gold), transparent);
  border-radius: 2px;
}
.lma-ed-divider--left { margin-left: 0; }

/* ── Ambient background glow — a soft, off-center radial wash used
   behind hero/CTA sections for depth instead of flat black. Placed on
   a ::before by the section itself; this just defines the shared
   look so hero treatments across News/About/Contact stay consistent. ── */
.lma-ed-glow-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 20% -10%, rgba(201,151,58,0.14), transparent 60%),
    radial-gradient(500px 360px at 85% 10%, rgba(201,151,58,0.08), transparent 65%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .lma-ed-section { padding: 64px 0; }
}