/* ============================================================
   18 — STORIES PAGE (Intro + Closing CTA)
   ============================================================
   Purpose:  Styles for the blog/stories listing page intro
             section and closing CTA glass card.

   Depends:  01-core-tokens-base.css (tokens)
             10-shared-page-components.css (shared components)
             07-buttons.css (.byr-primary, .byr-outline)
   Enqueue:  functions.php → byr-stories-page

   TABLE OF CONTENTS:
     1.  Intro Section
     2.  Intro Eyebrow
     3.  Intro Heading
     4.  Intro Body
     5.  Intro Actions
     6.  Intro Note
     7.  Intro Divider
     8.  Closing CTA — Glass Card
     9.  Closing Icon
     10. Closing Heading
     11. Closing Body
     12. Closing Actions
     13. Closing Meta
     14. Closing Divider
     15. Closing Nav Links
     16. Light Mode
     17. Responsive
     18. Forced Colors
     19. Reduced Motion
   ============================================================ */


/* ==========================================================
   1. INTRO SECTION
========================================================== */
.byr-stories-intro {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 0 auto var(--space-xl);
  padding: var(--space-xl) clamp(1.25rem, 4vw, 2.5rem) var(--space-lg);
  text-align: center;
}


/* ==========================================================
   2. INTRO EYEBROW
========================================================== */
.byr-stories-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-sm);
}

.byr-stories-intro__eyebrow::before,
.byr-stories-intro__eyebrow::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent-primary) 40%,
    var(--color-accent-secondary) 80%,
    transparent
  );
}


/* ==========================================================
   3. INTRO HEADING — Italic serif with accent word
========================================================== */
.byr-stories-intro__heading {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--color-heading);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.byr-stories-intro__heading em {
  font-style: italic;
  display: inline;
  background: linear-gradient(
    125deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ==========================================================
   4. INTRO BODY
========================================================== */
.byr-stories-intro__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin: 0 auto var(--space-lg);
}


/* ==========================================================
   5. INTRO ACTIONS
========================================================== */
.byr-stories-intro__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}


/* ==========================================================
   6. INTRO NOTE
========================================================== */
.byr-stories-intro__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0 auto;
}

.byr-stories-intro__note a {
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.byr-stories-intro__note a:hover {
  text-decoration-thickness: 2px;
}

.byr-stories-intro__note a:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* ==========================================================
   7. INTRO DIVIDER
========================================================== */
.byr-stories-intro__divider {
  display: block;
  width: 80px;
  height: 2px;
  margin: var(--space-lg) auto 0;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  border: none;
  border-radius: var(--radius-pill);
  opacity: 0.5;
}


/* ==========================================================
   8. CLOSING CTA — Glass Card
========================================================== */
.byr-stories-close {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: var(--space-xl) auto var(--space-lg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  overflow: hidden;

  /* Glass surface */
  background: var(--glass-bg, rgba(15, 10, 40, 0.55));
  -webkit-backdrop-filter: blur(var(--glass-blur-md, 10px));
  backdrop-filter: blur(var(--glass-blur-md, 10px));
  border: 1px solid var(--glass-border, rgba(120, 60, 228, 0.15));
  border-radius: var(--radius-xl);
  box-shadow:
    var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.25)),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Accent stripe */
.byr-stories-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Ambient glow */
.byr-stories-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.byr-stories-close > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   9. CLOSING ICON
========================================================== */
.byr-stories-close__icon {
  display: block;
  margin: 0 auto var(--space-sm);
  width: 44px;
  height: 44px;
  color: var(--color-accent-primary);
  opacity: 0.75;
}


/* ==========================================================
   10. CLOSING HEADING
========================================================== */
.byr-stories-close__heading {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 740;
  line-height: var(--leading-snug);
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
}

.byr-stories-close__heading em {
  font-style: italic;
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  background: linear-gradient(
    125deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ==========================================================
   11. CLOSING BODY
========================================================== */
.byr-stories-close__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin: 0 auto var(--space-lg);
}


/* ==========================================================
   12. CLOSING ACTIONS
========================================================== */
.byr-stories-close__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}


/* ==========================================================
   13. CLOSING META
========================================================== */
.byr-stories-close__meta {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}


/* ==========================================================
   14. CLOSING DIVIDER
========================================================== */
.byr-stories-close__divider {
  display: block;
  width: 60px;
  height: 1px;
  margin: var(--space-md) auto;
  background: var(--color-border-subtle);
  border: none;
}


/* ==========================================================
   15. CLOSING NAV LINKS
========================================================== */
.byr-stories-close__nav {
  display: flex;
  gap: var(--space-3xs);
  justify-content: center;
  flex-wrap: wrap;
}

.byr-stories-close__nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color 180ms ease, background 180ms ease;
}

.byr-stories-close__nav a:hover {
  color: var(--color-accent-primary);
  background: rgba(34, 211, 238, 0.06);
}

.byr-stories-close__nav a:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  color: var(--color-accent-primary);
}


/* ==========================================================
   16. LIGHT MODE
========================================================== */
.mode-light .byr-stories-intro__heading em {
  background: linear-gradient(125deg, #0E7490, #047857);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mode-light .byr-stories-intro__note a {
  color: #047857;
}

.mode-light .byr-stories-close {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(16, 185, 129, 0.14);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mode-light .byr-stories-close::after {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.04) 0%,
    transparent 70%
  );
}

.mode-light .byr-stories-close__heading em {
  background: linear-gradient(125deg, #0E7490, #047857);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mode-light .byr-stories-close__nav a:hover {
  color: #0E7490;
  background: rgba(14, 116, 144, 0.06);
}


/* ==========================================================
   17. RESPONSIVE
========================================================== */
@media (max-width: 560px) {
  .byr-stories-intro__actions,
  .byr-stories-close__actions {
    flex-direction: column;
    align-items: center;
  }

  .byr-stories-intro__actions .byr-primary,
  .byr-stories-intro__actions .byr-outline,
  .byr-stories-close__actions .byr-primary,
  .byr-stories-close__actions .byr-outline {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
  }

  .byr-stories-close__nav {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}


/* ==========================================================
   18. FORCED COLORS
========================================================== */
@media (forced-colors: active) {
  .byr-stories-intro__eyebrow::before,
  .byr-stories-intro__eyebrow::after,
  .byr-stories-intro__divider,
  .byr-stories-close__divider {
    background: CanvasText;
  }

  .byr-stories-close {
    border: 2px solid CanvasText;
  }

  .byr-stories-close__icon {
    color: LinkText;
    opacity: 1;
  }

  .byr-stories-intro__heading em,
  .byr-stories-close__heading em {
    -webkit-text-fill-color: LinkText;
    color: LinkText;
  }
}


/* ==========================================================
   19. REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .byr-stories-close__nav a {
    transition: none;
  }
}