/**
 * Unified Editor Block Styles
 * Single source of truth for all block styling across:
 * - Editor.js tools (preview mode)
 * - Admin panel rendering
 * - Frontend display
 * - Schema-based consistency
 */

/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Refined for cutting-edge look with Proxima Nova
   ======================================== */

:root {
  /* Font Family */
  --font-family-proxima: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Brand Colors - More vibrant and modern */
  --brand-primary: #EE4B7F; /* A vibrant, slightly deeper pink */
  --brand-secondary: #FF6F9C; /* Lighter, more playful pink */
  --brand-accent: #FFC0CB; /* Soft, very light pink for highlights */
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));

  /* Text Colors - High contrast and modern neutrals */
  --text-primary: #121212; /* Nearly black for strong headings */
  --text-body: #333333; /* Dark gray for main body text */
  --text-secondary: #6B7280; /* Medium gray for supporting text */
  --text-muted: #9CA3AF; /* Light gray for subtle details */

  /* Background Colors - Clean, subtle, and engaging */
  --bg-white: #ffffff;
  --bg-light: #F9FAFB; /* Very light gray */
  --bg-soft-pink: #FFF0F5; /* Gentle blush */
  --bg-soft-blue: #F0F5FF; /* Softest blue */
  --bg-gradient-light: linear-gradient(135deg, #F0F5FF, #FFF0F5); /* Soft, airy gradient */

  /* CTA Dark Colors - Deep and inviting with subtle gradients */
  --cta-dark-1: #1E293B; /* Darker slate */
  --cta-dark-2: #0F172A; /* Deep navy-blue */
  --cta-dark-3: #020617; /* Near black */
  --cta-gradient-dark: linear-gradient(135deg, var(--cta-dark-1), var(--cta-dark-2), var(--cta-dark-3));

  /* Border & Shadows - Defined but not heavy */
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px; /* Slightly larger for modern feel */
  --shadow-sm: 0 4px 10px rgba(0,0,0,0.05); /* Softer, wider shadow */
  --shadow-md: 0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.12);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.02); /* Subtle inner shadow */

  /* Spacing - Consistent and airy */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typography - Proxima Nova optimized for desktop and mobile */
  /* Base font size for desktop for good readability */
  --font-size-body-desktop: 1.125rem; /* 18px */
  --font-size-h1-desktop: 3.25rem; /* ~52px */
  --font-size-h2-desktop: 2.5rem; /* ~40px */
  --font-size-h3-desktop: 2rem; /* ~32px */
  --font-size-h4-desktop: 1.625rem; /* ~26px */
  --font-size-h5-desktop: 1.375rem; /* ~22px */
  --font-size-h6-desktop: 1.25rem; /* ~20px */

  /* Base font size for mobile for good readability */
  --font-size-body-mobile: 1.125rem; /* 16px */
  --font-size-h1-mobile: 2.25rem; /* ~36px */
  --font-size-h2-mobile: 1.875rem; /* ~30px */
  --font-size-h3-mobile: 1.5rem; /* ~24px */
  --font-size-h4-mobile: 1.25rem; /* ~20px */
  --font-size-h5-mobile: 1.125rem; /* ~18px */
  --font-size-h6-mobile: 1rem; /* ~16px */

  /* General typography sizes based on desktop */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 3.25rem; /* 52px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-body: 1.7;
  --line-height-heading: 1.2;
}

/* Base styles for headings and body text */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-proxima);
  font-weight: var(--font-weight-extrabold); /* Make headings very bold */
  color: var(--text-primary);
  line-height: var(--line-height-heading);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.03em; /* Slightly tighter for modern feel */
}

h1 { font-size: var(--font-size-h1-desktop); }
h2 { font-size: var(--font-size-h2-desktop); }
h3 { font-size: var(--font-size-h3-desktop); }
h4 { font-size: var(--font-size-h4-desktop); }
h5 { font-size: var(--font-size-h5-desktop); }
h6 { font-size: var(--font-size-h6-desktop); }


#editorjs h2 {font-size: 2rem !important;font-weight:600 !important }
#editorjs h3 {font-size: 1.5rem !important;font-weight:600 !important }

.post-content p,
.post-content ul,
.post-content ol {
   font-family: var(--font-family-proxima);
   font-size: var(--font-size-body-desktop);
   line-height: var(--line-height-body);
   color: var(--text-body);
}
.post-content li { /* Ensure list items also have correct body text style */
  font-family: var(--font-family-proxima);
  font-size: var(--font-size-body-desktop);
  line-height: var(--line-height-body);
  color: var(--text-body);
}
/* ========================================
   BASE BLOCK STYLES
   ======================================== */
.ce-block i{font-style:normal !important;} /* Reset italic for icons */
.editor-block {
  margin: var(--space-lg) 0; /* Slightly more vertical rhythm */
}

.editor-block:first-child {
  margin-top: 0;
}

.editor-block:last-child {
  margin-bottom: 0;
}
/* ========================================
   STYLED CARD BLOCK
   ======================================== */

.styled-card,
.styled-card-tool .styled-card {
  background: var(--card-bg, var(--bg-gradient-light));
  color: var(--card-text, var(--text-body));
  border-left: 4px solid var(--card-border, var(--brand-primary));
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.styled-card:hover {
  box-shadow: var(--shadow-md);
}

.styled-card p {
  margin: 0;
  line-height: 1.6;
}

.styled-card p:not(:last-child) {
  margin-bottom: var(--space-sm);
}

/* ========================================
   STATISTICS BLOCK
   ======================================== */

.statistics-display,
.statistics-tool .statistics-display {
  text-align: center;
  padding: var(--space-3xl); /* More generous padding */
  background: var(--bg-gradient-light);
  border-radius: var(--radius-xl);
  margin: var(--space-2xl) 0;
  border: 2px solid var(--brand-primary);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.statistics-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(238, 75, 127, 0.08) 0%, transparent 50%), /* Using new brand primary */
              radial-gradient(circle at 80% 20%, rgba(238, 75, 127, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.stat-context {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(238, 75, 127, 0.15); /* Using new brand primary */
  color: var(--brand-primary);
  padding: 6px var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  z-index: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stat-value {
  font-size: var(--font-size-5xl); /* Larger for impact */
  font-weight: var(--font-weight-extrabold);
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.05em; /* Tighter for display text */
  position: relative;
  z-index: 1;
}

.stat-value .unit {
  font-size: var(--font-size-3xl); /* Proportionately smaller */
  margin-left: 8px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.stat-label {
  font-size: var(--font-size-xl); /* Larger and clearer */
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  max-width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.stat-source {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-md);
  font-style: italic;
  position: relative;
  z-index: 1;
  opacity: 0.8;
}

/* ========================================
   CTA BLOCK
   ======================================== */

.cta-block,
.cta-tool .cta-block {
  background: var(--cta-gradient-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl); /* More generous padding */
  text-align: center;
  margin: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
  pointer-events: none;
}

.cta-icon {
  width: 90px; /* Slightly larger icon */
  height: 90px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2xl); /* More space */
  color: white;
  font-size: 2.5rem; /* Larger icon font */
  box-shadow: 0 10px 40px rgba(238, 75, 127, 0.4); /* Deeper shadow */
  position: relative;
  z-index: 1;
}

.cta-title {
  color: white;
  font-size: var(--font-size-4xl); /* More impactful title */
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
}

.cta-description {
  color: #E0E7EB; /* Lighter, subtle text */
  font-size: var(--font-size-xl);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 700px; /* Wider text for better readability */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  opacity: 0.9;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.2); /* Slightly more opaque for better contrast */
  color: white;
  padding: var(--space-md) var(--space-2xl);
  border-radius: 50px;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  backdrop-filter: blur(12px); /* Slightly stronger blur */
  position: relative;
  z-index: 1;
}

.cta-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px); /* More pronounced lift */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* CTA Outline Variant */
.cta-block.outline {
  background: var(--bg-white);
  border: 2px solid var(--brand-primary);
  box-shadow: var(--shadow-md); /* Softer shadow */
}

.cta-block.outline .cta-title {
  color: var(--brand-primary);
}

.cta-block.outline .cta-description {
  color: var(--text-body);
}

.cta-block.outline .cta-button {
  background: var(--brand-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(238, 75, 127, 0.3);
  backdrop-filter: none; /* No blur on solid button */
}
.cta-block.outline .cta-button:hover {
  background: var(--brand-secondary);
  box-shadow: 0 6px 20px rgba(238, 75, 127, 0.4);
}


/* CTA style variants (class-based) and alignment helpers */
.cta-block.align-left { text-align: left; }
.cta-block.align-center { text-align: center; }
.cta-block.align-right { text-align: right; }

/* Gradient */
.cta-block.style-gradient { background: linear-gradient(135deg, #2B0B3A, #FF4081); color: #ffffff; }
.cta-block.style-gradient .cta-title { color: #ffffff; }
.cta-block.style-gradient .cta-description { color: rgba(255,255,255,0.9); }
.cta-block.style-gradient .cta-button { background: rgba(255,255,255,0.2); color: #ffffff; border: 2px solid rgba(255,255,255,0.3); }
.cta-block.style-gradient .cta-button:hover { background: rgba(255,255,255,0.3); }

/* Solid Purple */
.cta-block.style-solid-purple { background: #2B0B3A; color: #ffffff; }
.cta-block.style-solid-purple .cta-title { color: #ffffff; }
.cta-block.style-solid-purple .cta-description { color: rgba(255,255,255,0.9); }
.cta-block.style-solid-purple .cta-button { background: #ffffff; color: #2B0B3A; border: 2px solid #ffffff; }

/* Solid Pink */
.cta-block.style-solid-pink { background: #FF4081; color: #ffffff; }
.cta-block.style-solid-pink .cta-title { color: #ffffff; }
.cta-block.style-solid-pink .cta-description { color: rgba(255,255,255,0.9); }
.cta-block.style-solid-pink .cta-button { background: #ffffff; color: #FF4081; border: 2px solid #ffffff; }

/* Outline */
.cta-block.style-outline { background: var(--bg-white); border: 2px solid var(--brand-primary); color: var(--text-body); box-shadow: var(--shadow-md); }
.cta-block.style-outline .cta-title { color: var(--brand-primary); }
.cta-block.style-outline .cta-description { color: var(--text-body); }
.cta-block.style-outline .cta-button { background: var(--brand-primary); color: #ffffff; border: 2px solid var(--brand-primary); box-shadow: 0 4px 15px rgba(238, 75, 127, 0.3); }
.cta-block.style-outline .cta-button:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); }


/* ========================================
   TAKEAWAYS BLOCK
   ======================================== */

.takeaways-block,
.takeaways-tool .takeaways-block {
  padding: var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); /* Softer corners */
  margin: var(--space-lg) 0;
  box-shadow: var(--shadow-sm);
}

.takeaways-title {
  color: var(--text-primary);
  margin-bottom: var(--space-lg); /* More space */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl); /* Larger title */
  letter-spacing: -0.02em;
}

.takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.takeaway-item {
  position: relative;
  padding-left: var(--space-2xl); /* More space for checkmark */
  margin-bottom: var(--space-md); /* More space between items */
  font-size: var(--font-size-lg); /* Consistent with body text */
  line-height: var(--line-height-body);
  color: var(--text-body);
}

.takeaway-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0; /* Align with top of text */
  color: white;
  font-weight: var(--font-weight-bold);
  width: 28px; /* Larger checkmark area */
  height: 28px;
  background: var(--brand-primary); /* Solid primary color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-base); /* Larger checkmark */
  box-shadow: var(--shadow-sm);
}
/* ========================================
   NOTICE/ALERT BLOCKS
   ======================================== */

.notice,
.notice-tool .notice {
  border-radius: var(--radius-xl); /* Softer corners */
  padding: var(--space-xl); /* More padding */
  margin: var(--space-lg) 0;
  border-left: 6px solid; /* Thicker border */
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg); /* More space between icon and text */
  box-shadow: var(--shadow-sm);
}

.notice-success {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  border-color: #28A745; /* Deeper green */
  color: #1A5E2E; /* Darker text */
}

.notice-warning {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border-color: #FFC107; /* Brighter yellow */
  color: #856404; /* Darker text */
}

.notice-error {
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
  border-color: #DC3545; /* Brighter red */
  color: #721C24; /* Darker text */
}

.notice-info {
	background: linear-gradient(135deg, #fff5f8, #f8f9ff);
    border-color: #de347f;
    color: #de347f;
}

.notice-icon {
  font-size: 1.8rem; /* Larger icon */
  margin-top: 0.15rem; /* Better alignment */
  flex-shrink: 0;
  color: inherit; /* Inherit color from notice type */
  opacity: 0.8;
}

.notice-content h4 {
  margin: 0 0 var(--space-sm);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl); /* Larger title */
  letter-spacing: -0.02em;
  color: var(--text-primary); /* Stronger title color */
}

.notice-content p {
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg); /* Consistent paragraph size */
  color: var(--text-body);
}

/* ========================================
   FEATURE LIST BLOCKS
   ======================================== */

.feature-list,
.feature-list-tool .feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.feature-list li,
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); /* Softer corners */
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.feature-list li:hover,
.feature-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent); /* Highlight border on hover */
}

.feature-icon {
  width: 50px; /* Larger icon */
  height: 50px;
  background: var(--brand-gradient);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Larger icon font */
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.feature-content h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xl); /* Larger title */
  letter-spacing: -0.02em;
}

.feature-content p {
  color: var(--text-body);
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg); /* Consistent paragraph size */
}
/* ========================================
   STEP GUIDE BLOCKS
   ======================================== */

.step-list,
.step-guide-tool .step-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}

.step-list li,
.step-item {
  counter-increment: step-counter;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 0.2s ease;
}

.step-list li:hover,
.step-item:hover {
  box-shadow: var(--shadow-md);
}

/* Ensure no default markers appear for ordered step lists */
ol.step-list, .step-list { list-style: none !important; padding-left: 0; }
ol.step-list > li::marker { content: none; color: transparent; }


.step-list li::before,
.step-item::before {
  content: counter(step-counter);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.step-content h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
}

.step-content p {
  color: var(--text-body);
  margin: 0;
  line-height: 1.6;
}

/* ========================================
   TIMELINE BLOCKS
   ======================================== */

.timeline,
.timeline-tool .timeline {
  position: relative;
  margin: var(--space-3xl) 0;
  padding-left: var(--space-lg); /* Add some left padding to make space for line */
}

.timeline::before {
  content: '';
  position: absolute;
  left: var(--space-md); /* Adjust line position */
  top: 0;
  bottom: 0;
  width: 3px; /* Thicker line */
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl); /* More space between items */
  padding-left: var(--space-3xl); /* Space for marker and content */
}

.timeline-marker {
  position: absolute;
  left: var(--space-sm); /* Adjust marker position relative to line */
  top: 8px; /* Slightly lower to align with text */
  width: 24px; /* Larger marker */
  height: 24px;
  background: var(--brand-primary);
  border-radius: 50%;
  border: 4px solid var(--bg-white);
  box-shadow: var(--shadow-sm);
  z-index: 1; /* Ensure marker is above line */
}

.timeline-content {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); /* Softer corners */
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.timeline-content:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent);
}

.timeline-date {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em; /* More pronounced letter spacing */
  opacity: 0.8;
}

.timeline-title {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xl); /* Larger title */
  letter-spacing: -0.02em;
}

.timeline-content p {
  color: var(--text-body);
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg); /* Consistent paragraph size */
}

/* ========================================
   TESTIMONIAL BLOCKS
   ======================================== */

.testimonial,
.testimonial-tool .testimonial {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); /* Softer corners */
  padding: var(--space-2xl); /* More padding */
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.testimonial:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent);
}

.testimonial::before {
  content: '“'; /* Modern quotation mark */
  font-family: var(--font-family-proxima);
  font-size: 5rem; /* Larger quote mark */
  color: var(--brand-accent); /* Softer color */
  position: absolute;
  top: 10px; /* Adjust position */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2; /* Lighter opacity */
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
}

.testimonial-text {
  font-size: var(--font-size-2xl); /* Larger, more impactful text */
  color: var(--text-primary); /* Stronger text color */
  font-style: italic;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.testimonial-avatar {
  width: 70px; /* Larger avatar */
  height: 70px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.testimonial-info h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: 0;
  font-size: var(--font-size-lg);
}

.testimonial-info p {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* ========================================
   COMPARISON TABLE BLOCKS
   ======================================== */

.comparison-table-container,
.comparison-table-tool .comparison-table-container {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl); /* More generous padding */
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-md); /* Slightly more prominent shadow */
  overflow-x: auto; /* Enable horizontal scrolling for smaller screens */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.comparison-title {
  font-family: var(--font-family-proxima);
  color: var(--text-primary);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: var(--font-size-3xl); /* Larger, more impactful title */
  letter-spacing: -0.03em;
}

.comparison-table {
  width: 100%;
  border-collapse: separate; /* Use separate to allow border-radius on cells */
  border-spacing: 0;
  margin: 0;
  background: var(--bg-white);
  border-radius: var(--radius-lg); /* Rounded table corners */
  overflow: hidden; /* Hide overflow for rounded corners */
  box-shadow: var(--shadow-sm);
  min-width: 600px; /* Ensure table doesn't get too cramped on mobile */
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-lg) var(--space-md); /* More padding */
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-family: var(--font-family-proxima);
}

.comparison-table th {
  background: var(--bg-gradient-light); /* Soft gradient for headers */
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-table th:first-child {
  border-top-left-radius: var(--radius-md); /* Rounded top-left */
}
.comparison-table th:last-child {
  border-top-right-radius: var(--radius-md); /* Rounded top-right */
}
.comparison-table tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md); /* Rounded bottom-left */
}
.comparison-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md); /* Rounded bottom-right */
}


.feature-header {
  background: linear-gradient(135deg, var(--cta-dark-1), var(--cta-dark-2)) !important; /* Darker, more premium feel */
  color: white !important;
  text-align: left !important;
  font-weight: var(--font-weight-extrabold) !important;
  letter-spacing: 0.02em !important;
}

.plan-header {
  background: var(--brand-gradient) !important; /* Vibrant brand gradient */
  color: white !important;
  position: relative;
  font-weight: var(--font-weight-extrabold) !important;
  letter-spacing: 0.02em !important;
  padding-bottom: calc(var(--space-lg) + 10px); /* Space for arrow */
}

.plan-header::after {
  content: '';
  position: absolute;
  bottom: -10px; /* Adjust position */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--brand-primary); /* Use primary brand color */
  transition: border-top-color 0.3s ease;
}

.comparison-table th.plan-header:hover::after {
  border-top-color: var(--brand-secondary); /* Highlight on hover */
}

.feature-cell {
  background: var(--bg-light);
  font-weight: var(--font-weight-medium);
  color: var(--text-body);
  text-align: left;
  border-right: 2px solid var(--border-medium);
  font-size: var(--font-size-base); /* Consistent with body text */
}

.value-cell {
  color: var(--text-body);
  font-size: var(--font-size-base);
  transition: background-color 0.2s ease;
}

.value-cell:hover {
  background: var(--bg-soft-pink); /* Subtle hover effect */
}

.boolean-cell {
  font-size: var(--font-size-xl);
}

.boolean-cell i {
  font-size: 1.4rem; /* Larger icon */
  color: #28A745; /* Success green for checkmarks */
  vertical-align: middle;
}
.boolean-cell i.false { /* Style for false/cross icons if needed */
  color: #DC3545; /* Error red for crosses */
}


.comparison-table tr:nth-child(even) td:not(.feature-cell) {
  background: var(--bg-soft-blue); /* Alternate row background */
}

.comparison-table tr:hover td:not(.feature-cell) {
  background: var(--bg-soft-pink); /* Stronger hover for rows */
}
/* 3. Table of Contents */
.table-of-contents {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl); /* More generous padding */
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}

.toc-title {
  font-family: var(--font-family-proxima);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xl); /* More space below title */
  font-size: var(--font-size-2xl); /* Larger title */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
}

.toc-title i { /* Icon for TOC title */
  color: var(--brand-primary);
  font-size: 1.8rem;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--border-light); /* Dashed border for modern feel */
}

.toc-list li:last-child {
  border-bottom: none;
}

.toc-list a {
  font-family: var(--font-family-proxima);
  color: var(--text-body);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg); /* Consistent with body text */
}

.toc-list a:hover {
  color: var(--brand-primary);
  transform: translateX(5px); /* Subtle slide effect */
}

.toc-list .toc-number {
  background: rgba(238, 75, 127, 0.15); /* Using new brand primary with opacity */
  color: var(--brand-primary);
  width: 30px; /* Larger number badge */
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0; /* Prevent shrinking on smaller screens */
}

/* TOC Style Variants */
.toc-style-minimal .table-of-contents {
  background: transparent !important;
  border: none !important;
  padding: var(--space-lg) 0 !important;
  margin: var(--space-lg) 0 !important;
  box-shadow: none !important;
}
.toc-style-minimal .toc-list a {
  color: var(--text-secondary);
}
.toc-style-minimal .toc-list a:hover {
  color: var(--brand-primary);
}
.toc-style-minimal .toc-title {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
}
.toc-style-minimal .toc-list .toc-number {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  box-shadow: none;
}
.toc-style-minimal .toc-list a:hover .toc-number {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}


.toc-style-card .table-of-contents {
  background: var(--bg-soft-blue) !important; /* Soft background */
  border: 2px solid var(--brand-accent) !important; /* Accent border */
  border-radius: var(--radius-xl) !important;
  padding: var(--space-3xl) !important; /* More padding */
  margin: var(--space-3xl) 0 !important;
  box-shadow: var(--shadow-lg) !important; /* More prominent shadow */
}
.toc-style-card .toc-title {
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
}
.toc-style-card .toc-list a {
  color: var(--text-body);
  font-weight: var(--font-weight-semibold);
}
.toc-style-card .toc-list a:hover {
  color: var(--brand-primary);
}
.toc-style-card .toc-list .toc-number {
  background: var(--brand-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.control-select {
  padding: 6px 10px; /* Slightly larger padding */
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-white);
  color: var(--text-body);
  font-family: var(--font-family-proxima);
  cursor: pointer;
  transition: all 0.2s ease;
}
.control-select:hover {
  border-color: var(--brand-primary);
}
.control-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(238, 75, 127, 0.2); /* Focus ring */
}

.color-button {
  width: 28px; /* Slightly larger */
  height: 28px;
  border: 3px solid var(--bg-white); /* Thicker white border */
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-button:hover {
  transform: scale(1.15); /* More pronounced scale */
  border-color: var(--brand-accent); /* Subtle highlight on hover */
}
/* ========================================
   STAT GRID BLOCKS
   ======================================== */

.stat-grid,
.stat-grid-tool .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Min width increased */
  gap: var(--space-xl); /* More gap */
  margin: var(--space-xl) 0;
}

/* Force 3 columns on desktop and compact sizing */
@media (min-width: 992px) {
  .stat-grid,
  .stat-grid-tool .stat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
  .stat-card {
    padding: var(--space-xl) var(--space-lg);
  }
  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
  }
  .stat-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .stat-value .unit {
    margin-left: 0;
  }
}


.stat-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl); /* More padding */
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px); /* More pronounced lift */
  border-color: var(--brand-accent);
}

.stat-trend {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: rgba(238, 75, 127, 0.15); /* Using new brand primary */
  color: var(--brand-primary);
  padding: 6px var(--space-sm);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: 6px; /* More gap for icon */
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.stat-trend i {
  font-size: 0.9em;
}


.stat-icon {
  width: 70px; /* Larger icon */
  height: 70px;
  background: linear-gradient(135deg, var(--stat-color, var(--brand-primary)), var(--brand-secondary));
  border-radius: var(--radius-lg); /* Slightly less rounded than full circle */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl); /* More space */
  color: white;
  font-size: 2rem; /* Larger icon font */
  box-shadow: var(--shadow-md); /* More prominent shadow */
}

.stat-value {
  font-size: var(--font-size-4xl); /* Larger, more impactful */
  font-weight: var(--font-weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.stat-value .unit {
  font-size: var(--font-size-2xl); /* Proportionately smaller */
  margin-left: 6px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.stat-label {
  font-size: var(--font-size-xl); /* Larger, clearer label */
  font-weight: var(--font-weight-bold);
  color: var(--text-body);
  margin-bottom: var(--space-md);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.stat-description {
  font-size: var(--font-size-base); /* Consistent with body text */
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
/* ========================================
   BEFORE/AFTER COMPARISON BLOCKS
   ======================================== */

.stat-comparison,
.before-after-tool .stat-comparison {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl); /* Generous padding */
  box-shadow: var(--shadow-md);
  margin: var(--space-2xl) 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-comparison:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2xl); /* More space between sections */
  margin-bottom: var(--space-3xl); /* More space between rows */
}

.comparison-section {
  display: flex;
  flex-direction: column; /* Stack label and value */
  justify-content: center;
  align-items: center;
}

.comparison-item {
  text-align: center;
  width: 100%;
}

.comparison-item .label {
  font-size: var(--font-size-lg); /* Larger label */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px; /* More prominent letter spacing */
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.comparison-item.before .label {
  color: #DC3545; /* Error red */
}

.comparison-item.after .label {
  color: #28A745; /* Success green */
}

.comparison-item .value {
  font-size: var(--font-size-5xl); /* Very large, impactful value */
  font-weight: var(--font-weight-extrabold);
  color: var(--text-primary);
  letter-spacing: -0.05em;
  line-height: 1;
}

.comparison-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px; /* Taller divider area */
  min-width: 100px;
}

.comparison-arrow {
  width: 60px; /* Larger arrow */
  height: 60px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem; /* Larger icon */
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-arrow:hover {
  transform: scale(1.15); /* More pronounced scale */
  box-shadow: var(--shadow-lg);
}

.comparison-result {
  text-align: center;
  margin-top: var(--space-3xl); /* More space above result */
  padding-top: var(--space-2xl); /* More padding */
  border-top: 2px solid var(--border-medium); /* Thicker border */
  font-size: var(--font-size-2xl); /* Larger result text */
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
}
.comparison-result i {
  font-size: 1.2em;
}

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


@media (max-width: 1024px) { /* Adjust for larger tablets */
  :root {
    --font-size-h1-desktop: 2.8rem;
    --font-size-h2-desktop: 2.2rem;
    --font-size-h3-desktop: 1.8rem;
    --font-size-h4-desktop: 1.5rem;
    --font-size-h5-desktop: 1.25rem;
    --font-size-h6-desktop: 1.125rem;
  }
}


@media (max-width: 768px) { /* Mobile and smaller tablets */
  :root {
    /* Adjust typography for mobile readability */
    --font-size-body-desktop: var(--font-size-body-mobile); /* Use mobile body font size */

    h1 { font-size: var(--font-size-h1-mobile); }
    h2 { font-size: var(--font-size-h2-mobile); }
    h3 { font-size: var(--font-size-h3-mobile); }
    h4 { font-size: var(--font-size-h4-mobile); }
    h5 { font-size: var(--font-size-h5-mobile); }
    h6 { font-size: var(--font-size-h6-mobile); }

    .post-content p, .post-content ul, .post-content ol, .post-content li {
      font-size: var(--font-size-body-mobile);
    }

    /* Smaller spacing */
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Smaller radii */
    --radius-xl: 16px;
  }

  /* General Block Adjustments */
  .editor-block {
    margin: var(--space-xl) 0;
  }
  .styled-card, .statistics-display, .cta-block, .takeaways-block,
  .notice, .feature-list li, .step-list li, .timeline-content,
  .testimonial, .comparison-table-container, .stat-card, .stat-comparison, .table-of-contents {
    padding: var(--space-xl); /* Consistent mobile padding */
    margin: var(--space-xl) 0;
  }

  /* Statistics Block */
  .stat-value {
    font-size: var(--font-size-4xl); /* Adjusted for mobile */
    letter-spacing: -0.03em;
  }
  .stat-value .unit {
    font-size: var(--font-size-2xl);
  }
  .stat-label {
    font-size: var(--font-size-lg);
    max-width: 95%;
  }

  /* CTA Block */
  .cta-title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
  }
  .cta-description {
    font-size: var(--font-size-base);
    max-width: 90%;
  }
  .cta-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
    margin-bottom: var(--space-xl);
  }
  .cta-button {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-base);
  }

  /* Takeaways Block */
  .takeaways-title {
    font-size: var(--font-size-xl);
  }
  .takeaway-item {
    font-size: var(--font-size-base);
    padding-left: var(--space-xl);
    margin-bottom: var(--space-sm);
  }
  .takeaway-item::before {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-sm);
  }

  /* Notice/Alert Blocks */
  .notice-icon {
    font-size: 1.5rem;
  }
  .notice-content h4 {
    font-size: var(--font-size-lg);
  }
  .notice-content p {
    font-size: var(--font-size-base);
  }

  /* Feature List Blocks */
  .feature-list li,
  .feature-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  .feature-icon {
    align-self: center;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  .feature-content h4 {
    font-size: var(--font-size-lg);
  }
  .feature-content p {
    font-size: var(--font-size-base);
  }

  /* Step Guide Blocks */
  .step-list li,
  .step-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  .step-list li::before,
  .step-item::before {
    align-self: center;
    width: 45px;
    height: 45px;
    font-size: var(--font-size-lg);
  }
  .step-content h4 {
    font-size: var(--font-size-lg);
  }
  .step-content p {
    font-size: var(--font-size-base);
  }

  /* Timeline Blocks */
  .timeline::before {
    left: 15px;
  }
  .timeline-item {
    padding-left: 50px;
    margin-bottom: var(--space-xl);
  }
  .timeline-marker {
    left: 5px;
    width: 20px;
    height: 20px;
  }
  .timeline-title {
    font-size: var(--font-size-lg);
  }
  .timeline-content p {
    font-size: var(--font-size-base);
  }

  /* Testimonial Blocks */
  .testimonial-text {
    font-size: var(--font-size-xl);
  }
  .testimonial-avatar {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
  }
  .testimonial-info h4 {
    font-size: var(--font-size-base);
  }
  .testimonial-info p {
    font-size: var(--font-size-sm);
  }

  /* Comparison Table Blocks */
  .comparison-title {
    font-size: var(--font-size-2xl);
  }
  .comparison-table {
    min-width: unset; /* Allow table to shrink, but overflow-x is active */
  }
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-sm);
  }
  .plan-header::after {
    display: none; /* Hide arrow on mobile to save space */
  }
  .feature-header {
    font-weight: var(--font-weight-bold) !important;
  }

  /* Table of Contents */
  .toc-title {
    font-size: var(--font-size-xl);
  }
  .toc-list a {
    font-size: var(--font-size-base);
  }
  .toc-list .toc-number {
    width: 26px;
    height: 26px;
    font-size: var(--font-size-sm);
  }

  /* Stat Grid Blocks */
  .stat-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--space-lg);
  }
  .stat-card {
    padding: var(--space-xl) var(--space-lg);
  }
  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
  }
  .stat-value {
    font-size: var(--font-size-3xl);
  }
  .stat-value .unit {
    font-size: var(--font-size-xl);
  }
  .stat-label {
    font-size: var(--font-size-lg);
  }
  .stat-trend {
    position: static; /* Place trend inline on mobile */
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
    align-self: flex-start;
  }

  /* Before/After Comparison Blocks */
  .comparison-row {
    grid-template-columns: 1fr; /* Stack vertically on mobile */
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }
  .comparison-divider {
    height: 80px;
    min-width: 60px;
    transform: rotate(90deg); /* Rotate arrow to point down */
  }
  .comparison-arrow {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  .comparison-item .value {
    font-size: var(--font-size-4xl);
  }
  .comparison-item .label {
    font-size: var(--font-size-base);
  }
  .comparison-result {
    font-size: var(--font-size-xl);
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
    flex-direction: column; /* Stack result text and icon */
    gap: var(--space-sm);
  }
}
/* ========================================
   EDITOR-SPECIFIC STYLES
   ======================================== */

/* Hide controls in read-only mode */
.cdx-block[data-readonly="true"] .block-controls {
  display: none;
}

/* Editor tool wrapper styles */
.editor-block-tool {
  position: relative;
}

.block-controls {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  padding: var(--space-xs);
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.control-button {
  padding: 4px var(--space-xs);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-white);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s ease;
}

.control-button:hover {
  background: var(--bg-light);
}

.control-button.active {
  background: var(--button-bg, var(--brand-primary));
  color: white;
  border-color: var(--button-bg, var(--brand-primary));
}
/* ========================================
   INLINE POST IMAGES & SVG (4:3 Aspect)
   ======================================== */

figure.post-image, figure.post-svg {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  margin: var(--space-lg) 0; border-radius: var(--radius-xl);
  overflow: hidden; background: var(--bg-gradient-light);
  box-shadow: var(--shadow-md); border: 1px solid var(--border-light);
}
figure.post-image img, figure.post-svg svg {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
figure.post-image figcaption, figure.post-svg figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(29,29,31,.88); color: #fff;
  padding: 12px 16px; text-align: center;
}

/* Ensure SVG scales crisply and respects 4:3 container */
figure.post-svg svg {
  height: 100%;
  width: 100%;
  preserveAspectRatio: xMidYMid meet;
}

/* Soft hover elevation */
figure.post-image:hover,
figure.post-svg:hover {
  box-shadow: var(--shadow-lg);
}

/* Mobile adjustments: keep caption readable */
@media (max-width: 768px) {
  figure.post-image figcaption,
  figure.post-svg figcaption {
    font-size: var(--font-size-sm);
    padding: 10px 12px;
  }
}