/* ============================================================
   11 — GROUPS PAGE
   ============================================================
   Purpose:  Page-specific styles for the Groups (Patient
             Community Success Stories) page. Frosted glass
             accordion cards, vertical timelines, core lesson
             callouts, and external links.

   Depends:  01-core-tokens-base.css (tokens)
             10-shared-page-components.css (shared components)
   Enqueue:  functions.php → byr-groups (after byr-tokens)

   Shared components used in groups-page.php:
     .byr-two-col, .byr-toc, .byr-prose, .byr-heading-serif,
     .byr-gradient-heading, .byr-eyebrow--lined, .byr-callout,
     .byr-divider--bar, .byr-cta-panel, .byr-fade-in

   TABLE OF CONTENTS:
     1.  Section Spacing
     2.  Stories Grid
     3.  Frosted Glass Card
     4.  Card Summary / Header
     5.  Chevron Indicator
     6.  Card Content
     7.  Timeline
     8.  Highlights List
     9.  Core Lesson Callout
     10. External Link
     11. Serif Heading Override (two-col specificity fix)
     12. Light Mode
     13. Responsive
     14. Reduced Motion
     15. Forced Colors (High Contrast)
   ============================================================ */


/* ==========================================================
   1. SECTION SPACING
========================================================== */
.byr-grp-section {
  margin-bottom: var(--space-2xl);
}

.byr-grp-section:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   2. STORIES GRID
   Auto-fit 2-column grid that collapses to 1-col on narrow.
========================================================== */
.byr-grp-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min, 280px), 1fr));
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ==========================================================
   3. FROSTED GLASS CARD
   Each accordion card uses the glass token system.
========================================================== */
.byr-grp-card {
  position: relative;
  background: var(--glass-card-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: var(--glass-card-frost);
  -webkit-backdrop-filter: var(--glass-card-frost);
  box-shadow: var(--glass-card-shadow);
  transition:
    transform var(--dur-card, 0.3s) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--dur-card, 0.3s) ease,
    box-shadow var(--dur-glow, 0.4s) ease;
}

.byr-grp-card:hover {
  transform: var(--glass-card-lift);
  border-color: var(--border-hover-cyan, rgba(34, 211, 238, 0.40));
  box-shadow:
    var(--glass-card-shadow),
    var(--glow-cyan);
}

/* Shimmer overlay on hover */
.byr-grp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(34, 211, 238, 0.04) 50%,
    transparent 60%
  );
  background-size: 250% 250%;
  opacity: 0;
  transition: opacity var(--dur-glow, 0.4s) ease;
  pointer-events: none;
  z-index: 0;
}

.byr-grp-card:hover::before {
  opacity: 1;
  animation: byrGrpShimmer 2.5s ease-in-out infinite;
}

@keyframes byrGrpShimmer {
  0%   { background-position: 200% 200%; }
  100% { background-position: -50% -50%; }
}


/* ==========================================================
   4. CARD SUMMARY / HEADER
   The clickable accordion trigger.
========================================================== */
.byr-grp-card summary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
  padding-right: 3.5rem;
  cursor: pointer;
  list-style: none;
}

.byr-grp-card summary::-webkit-details-marker,
.byr-grp-card summary::marker {
  display: none;
}

.byr-grp-card summary:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: -3px;
  border-radius: calc(var(--radius-lg) - 1px);
}

.byr-grp-icon {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.byr-grp-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: var(--weight-extrabold, 800);
  line-height: var(--leading-snug);
  margin: 0 0 0.3rem 0;
  background: linear-gradient(90deg, #67e8f9, var(--color-accent-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.byr-grp-teaser {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}


/* ==========================================================
   5. CHEVRON INDICATOR
   SVG arrow that rotates when card is open.
========================================================== */
.byr-grp-chevron {
  position: absolute;
  right: var(--space-md);
  top: var(--space-md);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent-primary);
  transition: transform 0.35s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  flex-shrink: 0;
}

.byr-grp-card[open] .byr-grp-chevron {
  transform: rotate(180deg);
}


/* ==========================================================
   6. CARD CONTENT
   The expandable body inside each accordion.
========================================================== */
.byr-grp-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-md) var(--space-lg);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  animation: byrGrpSlideDown 0.4s ease forwards;
}

@keyframes byrGrpSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================
   7. TIMELINE
   Vertical track with year markers and descriptions.
========================================================== */
.byr-grp-timeline {
  position: relative;
  padding-left: 2rem;
  margin: var(--space-md) 0;
}

/* Vertical line */
.byr-grp-timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  background: linear-gradient(to bottom,
    var(--color-accent-primary),
    #3B82F6,
    #8B5CF6
  );
  border-radius: var(--radius-pill);
  opacity: 0.7;
}

.byr-grp-milestone {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.byr-grp-milestone:last-child {
  margin-bottom: 0;
}

/* Dot on the timeline */
.byr-grp-milestone::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  background: var(--color-bg-primary);
  border: 3px solid var(--color-accent-primary);
  border-radius: 50%;
}

.byr-grp-year {
  font-weight: var(--weight-extrabold, 800);
  color: #67e8f9;
  min-width: 3.75rem;
  flex-shrink: 0;
}


/* ==========================================================
   8. HIGHLIGHTS LIST
   Bullet list of key outcomes.
========================================================== */
.byr-grp-highlights {
  margin: var(--space-sm) 0;
  padding-left: 1.25rem;
  color: var(--color-text-primary);
}

.byr-grp-highlights li {
  margin-bottom: 0.35rem;
  line-height: var(--leading-normal);
  font-size: var(--text-md);
}


/* ==========================================================
   9. CORE LESSON CALLOUT
   Highlighted takeaway box inside each card.
========================================================== */
.byr-grp-lesson {
  margin: var(--space-md) 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(34, 211, 238, 0.08);
  border-left: 4px solid var(--color-accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--color-text-primary);
}

.byr-grp-lesson strong {
  display: block;
  margin-bottom: 0.4rem;
  font-style: normal;
  color: #67e8f9;
}


/* ==========================================================
   10. EXTERNAL LINK
   Card footer link with arrow.
========================================================== */
.byr-grp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-primary);
  font-weight: var(--weight-medium, 600);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: gap 0.3s ease, color 0.2s ease;
}

.byr-grp-link:hover,
.byr-grp-link:focus-visible {
  gap: 0.75rem;
  color: #a5f3fc;
}

.byr-grp-link:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}


/* ==========================================================
   11. SERIF HEADING OVERRIDE
   .byr-two-col-main h2 sets font-weight: 800 at 0,1,1.
   This bumps specificity to 0,2,0 so .byr-heading-serif wins.
========================================================== */
.byr-two-col-main .byr-heading-serif {
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}


/* ==========================================================
   12. LIGHT MODE
========================================================== */
.mode-light .byr-grp-card {
  background: var(--glass-card-bg);
  box-shadow: var(--glass-card-shadow);
}

.mode-light .byr-grp-card:hover {
  box-shadow:
    var(--glass-card-shadow),
    0 0 20px rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.35);
}

.mode-light .byr-grp-card::before {
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(8, 145, 178, 0.04) 50%,
    transparent 60%
  );
}

.mode-light .byr-grp-title {
  background: linear-gradient(90deg, #0891B2, #0e7490);
  -webkit-background-clip: text;
  background-clip: text;
}

.mode-light .byr-grp-year {
  color: #0891B2;
}

.mode-light .byr-grp-lesson {
  background: rgba(8, 145, 178, 0.06);
  border-left-color: #0891B2;
}

.mode-light .byr-grp-lesson strong {
  color: #0891B2;
}

.mode-light .byr-grp-link {
  color: #0891B2;
}

.mode-light .byr-grp-link:hover,
.mode-light .byr-grp-link:focus-visible {
  color: #0e7490;
}

.mode-light .byr-grp-milestone::before {
  background: var(--color-bg-primary);
  border-color: #0891B2;
}

.mode-light .byr-grp-timeline::before {
  background: linear-gradient(to bottom, #0891B2, #2563eb, #7c3aed);
}


/* ==========================================================
   13. RESPONSIVE
========================================================== */

/* Tablet: single column cards */
@media (max-width: 860px) {
  .byr-grp-stories-grid {
    grid-template-columns: 1fr;
  }
}

/* Small phone */
@media (max-width: 480px) {
  .byr-grp-card summary {
    padding: var(--space-sm) var(--space-sm);
    padding-right: 3rem;
    gap: var(--space-xs);
  }

  .byr-grp-chevron {
    right: var(--space-sm);
    top: var(--space-sm);
  }

  .byr-grp-content {
    padding: 0 var(--space-sm) var(--space-md);
  }

  .byr-grp-icon {
    font-size: 2rem;
  }

  .byr-grp-timeline {
    padding-left: 1.75rem;
  }
}


/* ==========================================================
   14. REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .byr-grp-card,
  .byr-grp-card::before,
  .byr-grp-chevron,
  .byr-grp-link {
    animation: none !important;
    transition: none !important;
  }

  .byr-grp-content {
    animation: none !important;
  }
}


/* ==========================================================
   15. FORCED COLORS (HIGH CONTRAST)
========================================================== */
@media (forced-colors: active) {
  .byr-grp-card {
    border: 2px solid ButtonText;
    background: Canvas;
    box-shadow: none;
    backdrop-filter: none;
  }

  .byr-grp-card:hover {
    border-color: Highlight;
    box-shadow: none;
    transform: none;
  }

  .byr-grp-card::before {
    display: none;
  }

  .byr-grp-title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: LinkText;
    color: LinkText;
  }

  .byr-grp-year {
    color: Highlight;
  }

  .byr-grp-lesson {
    border-left-color: Highlight;
    background: Canvas;
  }

  .byr-grp-lesson strong {
    color: Highlight;
  }

  .byr-grp-link {
    color: LinkText;
  }

  .byr-grp-timeline::before {
    background: Highlight;
  }

  .byr-grp-milestone::before {
    border-color: Highlight;
    background: Canvas;
  }

  .byr-grp-chevron {
    color: ButtonText;
  }
}