/* ═══════════════════════════════════════════════════════════════
   MyCamgirl WordPress Theme — main.css
   Bridges the DS tokens (mycamgirl-ds/src/styles/theme.css) into
   plain CSS that WordPress loads directly.

   Sections:
     1. CSS Custom Properties — Light Mode
     2. Dark Mode Overrides
     3. Typography
     4. Layout Utilities
     5. Component Base Styles
     6. WordPress Overrides
     7. Responsive
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — LIGHT MODE
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font-size: 16px;

  /* Font stacks (mirrored to the names the DS uses) */
  --mc-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mc-font-body:    'Red Hat Text', system-ui, sans-serif;
  --mc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* DS-name aliases (the theme.css source uses these) */
  --font-family:  var(--mc-font-body);
  --font-heading: var(--mc-font-heading);
  --font-body:    var(--mc-font-body);
  --font-mono:    var(--mc-font-mono);

  /* MyCamgirl Brand Colors */
  --mc-primary:            #614C92;
  --mc-primary-light:      #9685BF;
  --mc-primary-ultralight: #E4DEF1;
  --mc-primary-surface:    #F9F6FF;
  --mc-primary-wash:       #EDE6FA;
  --mc-primary-overlay:    rgba(97, 76, 146, 0.7);
  --mc-modal-overlay:      rgba(0, 0, 0, 0.5);
  --mc-accent:             #B83D6B;

  /* Brand-invariant tokens from mycamgirl-ds/src/styles/theme.css.
     Deliberately NOT redefined under .dark — the footer swaps its
     background rather than these. Absent until now, which is why the
     footer fell back to a light surface instead of the Deep Ink panel. */
  --mc-pink:          #D772BD;   /* social-icon hover */
  --mc-primary-brand: #614C92;   /* footer seam start */
  --mc-accent-brand:  #B83D6B;   /* footer seam middle */
  --mc-gold-brand:    #F2C95E;   /* footer seam end + column headings */
  --mc-ink:           #1A1625;   /* Deep Ink panel bg (footer, light mode) */
  --mc-accent-light:       #EBDFE3;
  --mc-accent-surface:     #FDF2F5;
  --mc-accent-hover:       #A22E5A;
  --mc-accent-active:      #8C2249;
  --mc-accent-text-bold:   #9B2652;
  --mc-accent-border:      #DCCAD1;
  --mc-accent-muted:       #DAC7CE;
  --mc-accent-disabled-bg:   #B38D9B;
  --mc-accent-disabled-text: #DAC7CE;

  /* Neutrals */
  --mc-white:           #FFFFFF;
  --mc-offwhite:        #FAFAFA;
  --mc-light-gray:      #F5F5F5;
  --mc-border-gray:     #E0E0E0;
  --mc-muted-gray:      #CCCCCC;
  --mc-mid-gray:        #999999;
  --mc-body:            #404040;
  --mc-dark:            rgba(0, 0, 0, 0.87);
  --mc-secondary-text:  #716A82;
  --mc-input-placeholder: #C4B8E0;
  --mc-canvas-bg:       #F4F2F8;
  --mc-rail-bg:         #F7F7F7;
  --mc-action-bar-bg:   rgba(255, 255, 255, 0.94);

  /* Semantic */
  --mc-success:      #67CA9A;
  --mc-success-bg:   #EDF7EE;
  --mc-success-text: #2E7D32;
  --mc-success-icon: #67CA9A;
  --mc-warning:      #DEAD2D;
  --mc-warning-bg:   #FEF6E0;
  --mc-warning-text: #8C6B16;
  --mc-warning-icon: #DEAD2D;
  --mc-error:        #EB5757;
  --mc-error-bg:     #FEF4F4;
  --mc-error-text:   #C62828;
  --mc-error-icon:   #EB5757;
  --mc-info:         #7C95DE;
  --mc-info-bg:      #F0F3FC;
  --mc-info-text:    #3B5998;
  --mc-info-icon:    #7C95DE;
  --mc-gold:         #F2C95E;
  --mc-badge-purple: #8F78BE;

  /* Extended & State */
  --mc-primary-hover:       #4E3B78;
  --mc-primary-border-soft: #D5CCE8;
  --mc-error-hover:         #B71C1C;
  --mc-error-active:        #9B1515;
  --mc-accent-wash:         #EDCAD8;
  --mc-online:              #10B981;
  --mc-online-bg:           #ECFDF5;
  --mc-online-text:         #059669;
  --mc-tier-good:           #7CB77A;
  --mc-tier-better:         #4CAF50;
  --mc-status-away:         #F59E0B;
  --mc-status-away-text:    #92400E;
  --mc-status-offline:      #999999;
  --mc-status-offline-text: #666666;
  --mc-status-closed:       #CCCCCC;
  --mc-status-closed-text:  #999999;
  --mc-gold-text:           #5A3E05;

  /* Shadows */
  --shadow-soft:          0 1px 2px rgba(43,36,56,0.04), 0 2px 8px rgba(43,36,56,0.06);
  --shadow-soft-hover:    0 1px 2px rgba(43,36,56,0.05), 0 4px 16px rgba(97,76,146,0.12);
  --shadow-primary:       0 1px 2px rgba(97,76,146,0.16), 0 4px 12px -2px rgba(97,76,146,0.22);
  --shadow-primary-hover: 0 1px 2px rgba(97,76,146,0.20), 0 6px 18px -2px rgba(97,76,146,0.32);
  --shadow-accent:        0 1px 2px rgba(184,61,107,0.18), 0 4px 12px -2px rgba(184,61,107,0.28);
  --shadow-accent-hover:  0 1px 2px rgba(184,61,107,0.22), 0 6px 18px -2px rgba(184,61,107,0.40);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Focus rings */
  --ring-primary: 0 0 0 3px rgba(97,76,146,0.16);
  --ring-accent:  0 0 0 3px rgba(184,61,107,0.18);
  --ring-error:   0 0 0 3px rgba(235,87,87,0.16);

  /* Mapped tokens (shadcn-compatible) */
  --background:           var(--mc-offwhite);
  --foreground:           var(--mc-dark);
  --card:                 var(--mc-white);
  --card-foreground:      var(--mc-dark);
  --popover:              var(--mc-white);
  --popover-foreground:   var(--mc-dark);
  --primary:              var(--mc-primary);
  --primary-foreground:   var(--mc-white);
  --secondary:            var(--mc-primary-ultralight);
  --secondary-foreground: var(--mc-primary);
  --muted:                var(--mc-light-gray);
  --muted-foreground:     var(--mc-mid-gray);
  --accent:               var(--mc-accent);
  --accent-foreground:    var(--mc-white);
  --destructive:          var(--mc-error);
  --destructive-foreground: var(--mc-white);
  --border:               var(--mc-border-gray);
  --input:                var(--mc-primary-wash);
  --input-background:     var(--mc-primary-surface);
  --switch-background:    var(--mc-muted-gray);
  --ring:                 var(--mc-primary);
  --font-weight-medium:   500;
  --font-weight-normal:   400;
  --radius:               10px;

  /* Computed radius scale (matches @theme inline in theme.css) */
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Charts */
  --chart-1: var(--mc-primary);
  --chart-2: var(--mc-accent);
  --chart-3: var(--mc-success);
  --chart-4: var(--mc-warning);
  --chart-5: var(--mc-info);

  /* Sidebar */
  --sidebar:                      var(--mc-white);
  --sidebar-foreground:           var(--mc-dark);
  --sidebar-primary:              var(--mc-primary);
  --sidebar-primary-foreground:   var(--mc-white);
  --sidebar-accent:               var(--mc-primary-surface);
  --sidebar-accent-foreground:    var(--mc-primary);
  --sidebar-border:               var(--mc-primary-ultralight);
  --sidebar-ring:                 var(--mc-primary);
}


/* ═══════════════════════════════════════════════════════════════
   2. DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.dark {
  /* Brand */
  --mc-primary:            #9685BF;
  --mc-primary-light:      #7B64B2;
  --mc-primary-ultralight: rgba(150, 133, 191, 0.15);
  --mc-primary-surface:    #241E33;
  --mc-primary-wash:       #2E2740;
  --mc-primary-overlay:    rgba(46, 39, 64, 0.78);
  --mc-modal-overlay:      rgba(0, 0, 0, 0.5);
  --mc-accent:             #D07194;
  --mc-accent-light:       rgba(208, 113, 148, 0.2);
  --mc-accent-surface:     rgba(208, 113, 148, 0.12);
  --mc-accent-hover:       #E08BAA;
  --mc-accent-active:      #C05A82;
  --mc-accent-text-bold:   #E08BAA;
  --mc-accent-border:      rgba(208, 113, 148, 0.25);
  --mc-accent-muted:       rgba(208, 113, 148, 0.15);
  --mc-accent-disabled-bg:   rgba(208, 113, 148, 0.08);
  --mc-accent-disabled-text: rgba(208, 113, 148, 0.3);

  /* Neutrals */
  --mc-white:            #1A1625;
  --mc-offwhite:         #110D1A;
  --mc-light-gray:       #241E33;
  --mc-border-gray:      rgba(150, 133, 191, 0.15);
  --mc-canvas-bg:        #110D1A;
  --mc-rail-bg:          #16111F;
  --mc-action-bar-bg:    rgba(28, 22, 41, 0.94);
  --mc-muted-gray:       #5A5270;
  --mc-mid-gray:         #7A738C;
  --mc-body:             rgba(255, 255, 255, 0.87);
  --mc-dark:             rgba(255, 255, 255, 0.95);
  --mc-secondary-text:   #9E97AE;
  --mc-input-placeholder: #5A5270;

  /* Semantic */
  --mc-success:      #67CA9A;
  --mc-success-bg:   rgba(103, 202, 154, 0.12);
  --mc-success-text: #67CA9A;
  --mc-success-icon: #67CA9A;
  --mc-warning:      #DEAD2D;
  --mc-warning-bg:   rgba(222, 173, 45, 0.12);
  --mc-warning-text: #DEAD2D;
  --mc-warning-icon: #DEAD2D;
  --mc-error:        #EB5757;
  --mc-error-bg:     rgba(235, 87, 87, 0.12);
  --mc-error-text:   #EB5757;
  --mc-error-icon:   #EB5757;
  --mc-info:         #7C95DE;
  --mc-info-bg:      rgba(124, 149, 222, 0.12);
  --mc-info-text:    #7C95DE;
  --mc-info-icon:    #7C95DE;
  --mc-gold:         #C9A84C;
  --mc-badge-purple: #9685BF;

  /* Extended & State */
  --mc-primary-hover:       #AA99D0;
  --mc-primary-border-soft: rgba(150, 133, 191, 0.2);
  --mc-error-hover:         #F06060;
  --mc-error-active:        #D04444;
  --mc-accent-wash:         rgba(208, 113, 148, 0.15);
  --mc-online:              #34D399;
  --mc-online-bg:           rgba(16, 185, 129, 0.12);
  --mc-online-text:         #34D399;
  --mc-tier-good:           #95D293;
  --mc-tier-better:         #66BB6A;
  --mc-status-away:         #FBBF24;
  --mc-status-away-text:    #FDE68A;
  --mc-status-offline:      #7A738C;
  --mc-status-offline-text: #9E97AE;
  --mc-status-closed:       #5A5270;
  --mc-status-closed-text:  #7A738C;
  --mc-gold-text:           #2A1F0A;

  /* Shadows — deeper for dark mode */
  --shadow-soft:          0 1px 2px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.18);
  --shadow-soft-hover:    0 1px 2px rgba(0,0,0,0.22), 0 4px 16px rgba(150,133,191,0.20);
  --shadow-primary:       0 1px 2px rgba(0,0,0,0.30), 0 4px 12px -2px rgba(150,133,191,0.28);
  --shadow-primary-hover: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px -2px rgba(150,133,191,0.38);
  --shadow-accent:        0 1px 2px rgba(0,0,0,0.30), 0 4px 12px -2px rgba(208,113,148,0.28);
  --shadow-accent-hover:  0 1px 2px rgba(0,0,0,0.35), 0 6px 18px -2px rgba(208,113,148,0.40);

  /* Focus rings */
  --ring-primary: 0 0 0 3px rgba(150,133,191,0.25);
  --ring-accent:  0 0 0 3px rgba(208,113,148,0.25);
  --ring-error:   0 0 0 3px rgba(235,87,87,0.25);

  /* Mapped tokens */
  --background:           var(--mc-offwhite);
  --foreground:           var(--mc-dark);
  --card:                 #1C1629;
  --card-foreground:      var(--mc-dark);
  --popover:              #1C1629;
  --popover-foreground:   var(--mc-dark);
  --primary:              var(--mc-primary);
  --primary-foreground:   #1A1625;
  --secondary:            var(--mc-primary-ultralight);
  --secondary-foreground: var(--mc-primary);
  --muted:                #241E33;
  --muted-foreground:     #7A738C;
  --accent:               var(--mc-accent);
  --accent-foreground:    #1A1625;
  --destructive:          var(--mc-error);
  --destructive-foreground: #1A1625;
  --border:               rgba(150, 133, 191, 0.15);
  --input:                #2E2740;
  --input-background:     #241E33;
  --switch-background:    #3A3350;
  --ring:                 var(--mc-primary);

  /* Charts (explicit hexes in dark) */
  --chart-1: #9685BF;
  --chart-2: #D07194;
  --chart-3: #67CA9A;
  --chart-4: #DEAD2D;
  --chart-5: #7C95DE;

  /* Sidebar */
  --sidebar:                      #1C1629;
  --sidebar-foreground:           var(--mc-dark);
  --sidebar-primary:              var(--mc-primary);
  --sidebar-primary-foreground:   #1A1625;
  --sidebar-accent:               #241E33;
  --sidebar-accent-foreground:    var(--mc-primary);
  --sidebar-border:               rgba(150, 133, 191, 0.15);
  --sidebar-ring:                 var(--mc-primary);
}


/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
html {
  font-size: var(--font-size);
  scrollbar-gutter: stable;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Native smooth scroll for hash anchors (TOC links). Offset the target
     so headings don't get hidden behind the sticky site-nav (57px) plus
     the in-page section-nav band on reviews (~56px) plus breathing. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(57px + 56px + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--mc-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mc-body);
  background-color: var(--background); /* var(--mc-offwhite) — #FAFAFA in light, #110D1A in dark */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mc-dark);
  margin: 0 0 0.5em;
}

h1 { font-size: 2rem;     font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.5rem;   font-weight: 600; line-height: 1.15; }
h3 { font-size: 1.25rem;  font-weight: 600; line-height: 1.15; }
h4 { font-size: 1rem;     font-weight: 500; line-height: 1.5;  }
h5 { font-size: 0.9375rem; font-weight: 600; line-height: 1.5;  }
h6 { font-size: 0.875rem;  font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.04em; }

p { margin: 0 0 1rem; }

a {
  color: var(--mc-accent);
  text-decoration: underline;
  text-decoration-color: var(--mc-accent-muted);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
  color: var(--mc-accent-hover);
  text-decoration-color: var(--mc-accent-hover);
}

strong, b { font-weight: 700; color: inherit; }
em, i     { font-style: italic; }

small { font-size: 0.875em; color: var(--mc-secondary-text); }

code, kbd, samp, pre {
  font-family: var(--mc-font-mono);
  font-size: 0.9em;
}
code {
  background: var(--mc-primary-surface);
  color: var(--mc-primary);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--mc-primary-border-soft);
}
pre {
  background: var(--mc-light-gray);
  color: var(--mc-body);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.5;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

label, button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}
label, button {
  font-family: var(--mc-font-heading);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

::placeholder { color: var(--mc-input-placeholder); opacity: 1; }

::selection {
  background: var(--mc-primary-wash);
  color: var(--mc-dark);
}

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.dark ::-webkit-scrollbar-thumb { background: rgba(150, 133, 191, 0.3); }

/* Accessibility: skip-link and screen-reader-only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 100000;
  width: auto; height: auto;
  padding: 0.5rem 0.875rem;
  margin: 0; clip: auto; clip-path: none;
  background: var(--mc-white);
  color: var(--mc-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.mc-page-column,    .mcg-page-column,
.mc-wide-column,    .mcg-wide-column,
.mc-reading-column, .mcg-reading-column {
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
/* Widths per MCG-DS-REFERENCE.md: PageColumn 1440, WideColumn 960,
   ReadingColumn 720. These were 1100/880/720 — page and wide were both
   under-spec, which narrowed every template that wraps in .mcg-page-column
   (16 of them) while the nav and footer correctly used 1440, so the page
   body sat visibly inside the chrome. */
.mc-page-column,    .mcg-page-column    { max-width: 1440px; }
.mc-wide-column,    .mcg-wide-column    { max-width: 960px;  }
.mc-reading-column, .mcg-reading-column { max-width: 720px;  }

/* Default content container used by placeholder templates (index.php,
   404.php). Both also carry .mcg-page-column, and this rule is defined
   later in the file — so its max-width wins. Keep the two in step. */
.container {
  max-width: 1440px;
  margin-inline: auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* `.site-main` is the outer flex child; individual templates control
   their own vertical rhythm. Keeping `padding-block` on it was double-
   padding everything inside (DS mockup spacing is much tighter). */
.site-main {
  display: block;
  min-height: 60vh;
}

.site-header,
.site-footer { background: var(--mc-white); border-color: var(--mc-border-gray); }
.site-header { border-bottom: 1px solid var(--mc-border-gray); }
.site-footer { border-top: 1px solid var(--mc-border-gray); margin-top: 0; }

.site-nav {
  max-width: 1100px;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-logo {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mc-primary);
  text-decoration: none;
}
.primary-menu, .footer-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.primary-menu a, .footer-menu a {
  color: var(--mc-secondary-text);
  text-decoration: none;
  font-weight: 500;
}
.primary-menu a:hover,
.footer-menu a:hover { color: var(--mc-primary); }

.footer-inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--mc-secondary-text);
  font-size: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════
   5. COMPONENT BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Cards */
.mc-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.mc-card-header { margin-bottom: 0.75rem; }
.mc-card-title  { font-family: var(--mc-font-heading); font-size: 1.125rem; font-weight: 600; color: var(--mc-dark); }
.mc-card-meta   { color: var(--mc-secondary-text); font-size: 0.875rem; }

/* Buttons */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--mc-light-gray);
  color: var(--mc-body);
  font-family: var(--mc-font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.mc-btn:hover { background: var(--mc-border-gray); }
.mc-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-primary);
}

.mc-btn-primary {
  background: var(--mc-primary);
  color: var(--mc-white);
  border-color: var(--mc-primary);
  box-shadow: var(--shadow-primary);
}
.mc-btn-primary:hover { background: var(--mc-primary-hover); border-color: var(--mc-primary-hover); box-shadow: var(--shadow-primary-hover); }

.mc-btn-accent {
  background: var(--mc-accent);
  color: var(--mc-white);
  border-color: var(--mc-accent);
  box-shadow: var(--shadow-accent);
}
.mc-btn-accent:hover { background: var(--mc-accent-hover); border-color: var(--mc-accent-hover); box-shadow: var(--shadow-accent-hover); }

.mc-btn-ghost {
  background: transparent;
  color: var(--mc-primary);
  border-color: transparent;
}
.mc-btn-ghost:hover {
  background: var(--mc-primary-surface);
  color: var(--mc-primary-hover);
}

/* Chips / pills — DS port of `.mc-chip` from mycamgirl-ds/src/styles/theme.css.
   Tag rows in the review hero render with just `.mc-chip` and inherit
   these values verbatim; archive-card tags layer `.mcg-review-card-tag`
   on top for the tighter `px-2.5 py-0.5 / 11px` density the DS uses
   inside EditorialReviewCard. */
.mc-chip,
.mc-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', var(--mc-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--card);
  color: var(--mc-secondary-text);
  border: 1px solid var(--mc-border-gray);
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.mc-chip--interactive { cursor: pointer; }
.mc-chip:hover,
.mc-chip--interactive:hover,
.mc-category-pill:hover {
  border-color: var(--mc-primary-light);
  color: var(--mc-primary);
}
.mc-chip--active {
  background: var(--mc-primary-ultralight);
  border-color: var(--mc-primary);
  color: var(--mc-primary);
}
.mc-chip--accent.mc-chip--active {
  background: var(--mc-accent-surface);
  border-color: var(--mc-accent);
  color: var(--mc-accent);
}

/* Badges */
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--mc-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--mc-light-gray);
  color: var(--mc-secondary-text);
  border: 1px solid var(--mc-border-gray);
}
.mc-badge-success { background: var(--mc-success-bg); color: var(--mc-success-text); border-color: var(--mc-success); }
.mc-badge-warning { background: var(--mc-warning-bg); color: var(--mc-warning-text); border-color: var(--mc-warning); }
.mc-badge-error   { background: var(--mc-error-bg);   color: var(--mc-error-text);   border-color: var(--mc-error); }
.mc-badge-info    { background: var(--mc-info-bg);    color: var(--mc-info-text);    border-color: var(--mc-info); }
.mc-badge-gold    { background: var(--mc-gold);       color: var(--mc-gold-text);    border-color: var(--mc-gold); }

/* Divider */
.mc-divider {
  border: 0;
  border-top: 1px solid var(--mc-border-gray);
  margin: 1.5rem 0;
}
.mc-divider-subtle { border-top-color: var(--mc-primary-border-soft); opacity: 0.6; }

/* Global focus-visible */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring-primary);
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════
   6. WORDPRESS OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Admin bar spacing — WP hardcodes html { margin-top: 32px } when bar shows */
@media screen and (max-width: 600px) {
  html.wp-toolbar { margin-top: 0 !important; }
  body.admin-bar  { padding-top: 46px; }
}

/* Images and figures */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
figure { margin: 1.5rem 0; }
figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--mc-secondary-text);
  font-style: italic;
  text-align: center;
}

/* Block: image */
.wp-block-image img    { border-radius: var(--radius-md); }
.wp-block-image figcaption { color: var(--mc-secondary-text); }

/* Block: gallery */
.wp-block-gallery .wp-block-image img { border-radius: var(--radius-md); }

/* Block: quote / pullquote */
.wp-block-quote,
.wp-block-pullquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--mc-primary-light);
  background: var(--mc-primary-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--mc-body);
}
.wp-block-quote cite,
.wp-block-pullquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--mc-secondary-text);
}
.wp-block-pullquote {
  border-left: 0;
  border-top: 3px solid var(--mc-accent);
  border-bottom: 3px solid var(--mc-accent);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 1.125rem;
}

/* Block: separator */
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--mc-border-gray);
  margin: 2rem auto;
  max-width: 200px;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
.wp-block-separator.is-style-dots {
  background: none;
  border: 0;
  text-align: center;
  line-height: 1;
}
.wp-block-separator.is-style-dots::before {
  content: '\00b7 \00b7 \00b7';
  color: var(--mc-mid-gray);
  letter-spacing: 1em;
  font-size: 1.5rem;
}

/* Block: list */
.wp-block-list,
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}
.wp-block-list li { margin-bottom: 0.25rem; }

/* Block: code & preformatted */
.wp-block-code,
.wp-block-preformatted {
  background: var(--mc-light-gray);
  color: var(--mc-body);
  padding: 1rem;
  border-radius: var(--radius-md);
  font-family: var(--mc-font-mono);
  font-size: 0.875rem;
  overflow-x: auto;
}

/* Block: table */
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--mc-border-gray);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.wp-block-table th {
  background: var(--mc-primary-surface);
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-weight: 600;
}

/* Block: button (core) — align with mc-btn-primary */
.wp-block-button .wp-block-button__link {
  background-color: var(--mc-primary);
  color: var(--mc-white);
  border-radius: var(--radius-md);
  font-family: var(--mc-font-heading);
  font-weight: 500;
  padding: 0.625rem 1rem;
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.wp-block-button .wp-block-button__link:hover { background-color: var(--mc-primary-hover); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--mc-primary);
  border: 1px solid var(--mc-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--mc-primary-surface);
}

/* Block: search and core forms */
.wp-block-search input[type="search"],
.search-field {
  border: 1px solid var(--mc-border-gray);
  background: var(--input-background);
  color: var(--mc-body);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
}

/* Posts pagination */
.wp-block-post-pagination,
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0;
  align-items: center;
  justify-content: center;
}
.wp-block-post-pagination a,
.pagination a,
.pagination .page-numbers,
.nav-links a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--mc-white);
  color: var(--mc-primary);
  border: 1px solid var(--mc-border-gray);
  text-decoration: none;
  font-family: var(--mc-font-heading);
  font-size: 0.875rem;
}
.pagination .current,
.pagination .page-numbers.current {
  background: var(--mc-primary);
  color: var(--mc-white);
  border-color: var(--mc-primary);
}

/* Entry-level layout used by index.php fallback */
.entry-title {
  font-family: var(--mc-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.entry-title a { color: var(--mc-dark); text-decoration: none; }
.entry-title a:hover { color: var(--mc-primary); }
.entry-content > * + * { margin-top: 1rem; }


/* ═══════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --font-size: 15px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }
  .container,
  .mc-page-column,    .mcg-page-column,
  .mc-wide-column,    .mcg-wide-column,
  .mc-reading-column, .mcg-reading-column { padding-inline: 1rem; }
  .site-nav { padding: 0.875rem 1rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .primary-menu { gap: 0.875rem; }
  .mc-btn { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
}


/* ═══════════════════════════════════════════════════════════════
   8. CHROME — NAV & FOOTER
   ───────────────────────────────────────────────────────────────
   Translates the Tailwind utility classes from
   mycamgirl-ds/src/app/components/ds/{SiteNav,SiteFooter,Breadcrumbs}.tsx
   into plain CSS rules scoped to the `mcg-*` semantic class names
   that template-parts/nav.php, template-parts/footer.php, and
   inc/breadcrumbs.php emit.

   Breakpoints follow Tailwind defaults:
     sm = 640px   md = 768px   lg = 1024px
   ═══════════════════════════════════════════════════════════════ */

/* ── Site header — `display: contents` so the inner sticky nav's
   scroll container is <body>, not this <header>. With <header>
   participating in layout, its bottom edge equals the nav's bottom
   edge (it has no other children) and `position: sticky` never enters
   its fixed phase. Removing it from the flow fixes the stuck nav. */
.site-header.mcg-site-header {
  display: contents;
  background: transparent;
  border-bottom: 0;
}

/* ── Nav: outer bar ──────────────────────────────────────────── */
.mcg-site-nav {
  display: block;
  position: sticky;
  top: 0;
  z-index: 40;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border-bottom: 1px solid var(--mc-primary-ultralight);
  backdrop-filter: saturate(180%) blur(4px);
  -webkit-backdrop-filter: saturate(180%) blur(4px);
}

.mcg-site-nav-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .mcg-site-nav-inner { padding-inline: 1.5rem; }
}

.mcg-site-nav-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
}

/* ── Logo ────────────────────────────────────────────────────── */
.mcg-site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mcg-logo-text {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--mc-primary);
  white-space: nowrap;
}
.mcg-logo,
.mcg-logo-img {
  height: 28px;      /* DS: h-7 */
  width: auto;       /* 543:121 aspect -> 125.7px at this height */
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
/* The wordmark paths are fill="currentColor", so the lockup follows the
   themed text colour the way the DS component does. Matches text-mc-dark. */
.mcg-logo { color: var(--mc-dark); }
.mcg-site-footer-logo { display: inline-block; }
.mcg-site-footer-logo .mcg-logo,
.mcg-site-footer-logo .mcg-logo-img { height: 28px; }

/* ── Desktop link list ───────────────────────────────────────── */
.mcg-site-nav-desktop {
  display: none; /* hidden below lg */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.125rem;
  flex: 1 1 auto;
  margin-left: 1rem;
}
@media (min-width: 1024px) {
  .mcg-site-nav-desktop { display: flex; align-items: center; }
}

.mcg-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mcg-nav-link {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-secondary-text);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.mcg-nav-link:hover { color: var(--mc-accent); }
.mcg-nav-item-has-children:hover > .mcg-nav-link,
.mcg-nav-item-has-children:focus-within > .mcg-nav-link {
  color: var(--mc-accent);
  background-color: color-mix(in srgb, var(--mc-primary-surface) 60%, transparent);
}

.mcg-nav-item-highlight > .mcg-nav-link {
  color: var(--mc-accent);
}
.mcg-nav-item-highlight > .mcg-nav-link:hover {
  color: var(--mc-accent-hover);
}

.mcg-nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.mcg-nav-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.15s var(--ease);
}
.mcg-nav-item-has-children:hover .mcg-nav-caret,
.mcg-nav-item-has-children:focus-within .mcg-nav-caret {
  transform: rotate(180deg);
}

/* Flame animation (Stories highlight) — ported from SiteNav.tsx <style> */
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.1) rotate(-3deg); }
  40%      { transform: scale(0.95) rotate(2deg); }
  60%      { transform: scale(1.08) rotate(-2deg); }
  80%      { transform: scale(0.98) rotate(3deg); }
}
.mcg-nav-link:hover .nav-flame {
  animation: flame-flicker 0.6s ease-in-out;
}

/* ── Desktop fly-out submenus ────────────────────────────────── */
.mcg-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  display: none;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.dark .mcg-submenu {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.mcg-submenu-list { width: 320px; }
.mcg-submenu-grid { width: 560px; }

/* Hover bridge.
   The panel is offset 10px below the trigger (margin-top above), and the
   <li> only covers the link itself — so the cursor crosses 10px of dead
   space on its way down, :hover drops, and the panel disappears before it
   can be reached. This pseudo-element spans that gap. It is a descendant of
   the panel, so hovering it keeps the <li> hovered and the menu open.
   The DS solves the same problem in JS with a 150 ms close delay
   (handleLeave in SiteNav.tsx); CSS-only is steadier — no timer to expire
   while the pointer is stationary. */
.mcg-submenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Inner clip.
   The panel is rounded, but its first and last rows paint a full-bleed
   hover background — square — straight over those corners. The DS relies on
   Tailwind's "rounded-[10px] overflow-hidden" on this wrapper; those utility
   classes are in the markup but nothing compiles them here, so the rule has
   to be real CSS. Sits inside the border, and the arrow is a sibling of this
   wrapper, so neither gets clipped. */
.mcg-submenu-clip {
  border-radius: 10px;
  overflow: hidden;
}

.mcg-nav-item-has-children:hover > .mcg-submenu,
.mcg-nav-item-has-children:focus-within > .mcg-submenu {
  display: block;
}

.mcg-submenu-arrow {
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-top: 1px solid var(--mc-primary-ultralight);
  border-left: 1px solid var(--mc-primary-ultralight);
  transform: rotate(45deg);
}

/* Submenu — list (Reviews) */
.mcg-submenu-list-body { display: block; }
.mcg-submenu-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.mcg-submenu-list-item + .mcg-submenu-list-item {
  border-top: 1px solid var(--mc-primary-ultralight);
}
.mcg-submenu-list-item:hover { background-color: var(--mc-primary-surface); }
.mcg-submenu-list-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--mc-primary-surface);
  color: var(--mc-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.mcg-submenu-list-title {
  font-family: var(--mc-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-body);
  margin: 0 0 2px;
}
.mcg-submenu-list-desc {
  font-size: 12px;
  /* 400, not inherited. The legacy ".primary-menu a { font-weight: 500 }"
     rule matches every anchor inside the nav <ul>, including submenu rows,
     and the weight inherits down into this <p>. The DS renders this text at
     400; at 500 "Highest-rated performers across all camsites" measures
     247.2px against 244px of column and wraps to two lines. */
  font-weight: 400;
  color: var(--mc-mid-gray);
  line-height: 1.4;
  margin: 0;
}

/* Submenu — grid (Camsites) */
.mcg-submenu-grid-body { padding: 1rem; }
.mcg-submenu-heading {
  font-family: var(--mc-font-heading);
  padding: 0 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-mid-gray);
  border-bottom: 1px solid var(--mc-primary-ultralight);
}
.mcg-submenu-grid-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}
.mcg-submenu-grid-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  font-size: 13px;
  /* Same reason as .mcg-submenu-list-desc — ".primary-menu a" would
     otherwise make these 500. The DS renders them at 400. */
  font-weight: 400;
  color: var(--mc-body);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.mcg-submenu-grid-item:hover {
  color: var(--mc-accent);
  background-color: var(--mc-primary-surface);
}
.mcg-submenu-grid-item .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Brand tile (DS CamsiteIcon, size 26 in the fly-out). The SVG carries its
   own width/height; this only stops flexbox from squeezing it when a long
   name like SecretFriends fills the cell. */
.mcg-camsite-tile {
  display: block;
  flex: 0 0 auto;
}
.mcg-submenu-grid-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mc-primary-ultralight);
}
.mcg-submenu-grid-footer a {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-accent);
  text-decoration: none;
}
.mcg-submenu-grid-footer a:hover { background-color: var(--mc-primary-surface); }

/* ── Action buttons (right side) ─────────────────────────────── */
/* body sets line-height 1.6; the DS inherits Tailwind's 1.5. At the 12px
   used by these controls that is 19.2px vs 18px of line box, making every
   button in this row 1-2px taller than the DS. Pin the DS value. */
.mcg-site-nav-actions,
.mcg-site-nav-actions a,
.mcg-site-nav-actions button { line-height: 1.5; }

.mcg-site-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
@media (min-width: 1024px) {
  .mcg-site-nav-actions { margin-left: 0.75rem; }
}

.mcg-action-addmodel {
  font-family: var(--mc-font-heading);
  display: none; /* show at md+ */
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 6px;
  background: transparent;
  color: var(--mc-primary-light);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
@media (min-width: 768px) {
  .mcg-action-addmodel { display: inline-flex; }
}
.mcg-action-addmodel:hover {
  color: var(--mc-accent);
  border-color: var(--mc-accent-border);
}

.mcg-action-search,
.mcg-action-theme,
.mcg-action-hamburger {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--mc-secondary-text);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.mcg-action-search:hover,
.mcg-action-hamburger:hover {
  color: var(--mc-accent);
  background-color: var(--mc-primary-surface);
}
.mcg-action-theme {
  color: var(--mc-primary-light);
  border-radius: 8px;
}
.mcg-action-theme:hover { background-color: var(--mc-light-gray); }
.mcg-action-theme [hidden],
.mcg-action-hamburger [hidden] { display: none !important; }
/* The icons are wrapped in a <span> so JS can toggle them, which makes the
   span the flex item rather than the SVG. An inline SVG inside sits on the
   span's text baseline and picks up descender space below it, pushing the
   glyph visibly high. The DS renders the SVG directly as the flex child.
   Collapsing the wrapper restores the DS's centring. */
.mcg-action-theme > span,
.mcg-action-hamburger > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.mcg-action-theme svg,
.mcg-action-hamburger svg,
.mcg-action-search svg,
.mcg-nav-link-icon svg { display: block; }

.mcg-action-hamburger {
  display: inline-flex; /* visible below lg */
}
@media (min-width: 1024px) {
  .mcg-action-hamburger { display: none; }
}

/* Auth buttons (tablet+) */
.mcg-action-auth {
  display: none;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.25rem;
}
@media (min-width: 640px) {
  .mcg-action-auth { display: inline-flex; }
}
.mcg-action-signin,
.mcg-action-signup {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  cursor: pointer;
}
.mcg-action-signin {
  background: transparent;
  color: var(--mc-body);
}
.mcg-action-signin:hover {
  color: var(--mc-accent);
  background-color: var(--mc-primary-surface);
}
.mcg-action-signup {
  background-color: var(--mc-accent);
  color: var(--mc-white);
}
.dark .mcg-action-signup { color: #fff; }
.mcg-action-signup:hover { background-color: var(--mc-accent-hover); color: var(--mc-white); }

/* ── Mobile menu panel ───────────────────────────────────────── */
.mcg-mobile-menu {
  display: block;
  border-top: 1px solid var(--mc-primary-ultralight);
  background: var(--card);
}
@media (min-width: 1024px) {
  .mcg-mobile-menu { display: none !important; }
}
.mcg-mobile-menu[hidden] { display: none; }

.mcg-mobile-menu-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .mcg-mobile-menu-inner { padding: 0.75rem 1.5rem; }
}

.mcg-mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
}
@media (min-width: 640px) {
  .mcg-mobile-links { grid-template-columns: 1fr 1fr; }
  .mcg-mobile-item-has-children { grid-column: span 2; }
}

.mcg-mobile-item > div { display: flex; align-items: center; }
.mcg-mobile-link {
  font-family: var(--mc-font-heading);
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mc-body);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.mcg-mobile-link:hover {
  color: var(--mc-accent);
  background-color: var(--mc-primary-surface);
}
.mcg-mobile-item-highlight .mcg-mobile-link { color: var(--mc-accent); }
.mcg-mobile-item-highlight .mcg-mobile-link:hover { background-color: var(--mc-accent-surface); }

.mcg-mobile-expand {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--mc-mid-gray);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.mcg-mobile-expand:hover { color: var(--mc-accent); }
.mcg-mobile-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.mcg-mobile-expand svg { transition: transform 0.15s var(--ease); }

.mcg-mobile-submenu {
  display: block;
  padding-left: 0.75rem;
  padding-bottom: 0.5rem;
}
.mcg-mobile-submenu[hidden] { display: none; }
.mcg-mobile-submenu.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}
@media (min-width: 640px) {
  .mcg-mobile-submenu.grid { grid-template-columns: 1fr 1fr 1fr; }
}
.mcg-mobile-sublink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 13px;
  color: var(--mc-secondary-text);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.mcg-mobile-sublink:hover {
  color: var(--mc-accent);
  background-color: var(--mc-primary-surface);
}
.mcg-mobile-sublink .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcg-mobile-bottom {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mc-primary-ultralight);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mcg-mobile-addmodel,
.mcg-mobile-signin,
.mcg-mobile-signup {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.mcg-mobile-addmodel {
  color: var(--mc-primary-light);
  border: 1px solid var(--mc-primary-ultralight);
}
@media (min-width: 768px) { .mcg-mobile-addmodel { display: none; } }
.mcg-mobile-addmodel:hover {
  color: var(--mc-accent);
  border-color: var(--mc-accent-border);
}
.mcg-mobile-signin { color: var(--mc-body); }
.mcg-mobile-signin:hover { color: var(--mc-accent); }
.mcg-mobile-signup { background-color: var(--mc-accent); color: var(--mc-white); }
.mcg-mobile-signup:hover { background-color: var(--mc-accent-hover); color: var(--mc-white); }
@media (min-width: 640px) {
  .mcg-mobile-signin,
  .mcg-mobile-signup { display: none; }
}

/* ══ Footer ═══════════════════════════════════════════════════ */
.site-footer.mcg-site-footer {
  background: transparent;
  border-top: 0;
  margin-top: 0;
}

/* Deep Ink panel. DS: `bg-mc-ink dark:bg-mc-primary-surface` — the footer is
   dark in light mode and swaps to the purple surface in dark mode, not the
   other way round. Every text colour below is a white alpha, which only
   reads on a dark ground. */
.mcg-site-footer-inner {
  background: var(--mc-ink);
}
.dark .mcg-site-footer-inner {
  background: var(--mc-primary-surface);
}

/* 3px full-width brand seam across the top of the footer. */
.mcg-site-footer-seam {
  height: 3px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--mc-primary-brand),
    var(--mc-accent-brand),
    var(--mc-gold-brand)
  );
}

.mcg-site-footer-grid-wrap {
  max-width: 1180px;          /* DS: max-w-[1180px] — narrower than the nav */
  margin-inline: auto;
  padding: 3.5rem 1.5rem 2.5rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .mcg-site-footer-grid-wrap { padding-inline: 2.5rem; }
}

.mcg-site-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  /* DS: grid-cols-[1.6fr_1fr_1fr_1fr] — the brand column is wider. */
  .mcg-site-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.mcg-site-footer-brand > * + * { margin-top: 1rem; }
.mcg-site-footer-logo .mcg-logo { height: 30px; color: #fff; }

.mcg-site-footer-tagline {
  font-size: 14px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.5);
  max-width: 280px;
  margin: 0;
}

.mcg-site-footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  padding-top: 0.25rem;
}
/* DS renders bare icon links, not filled circles. */
.mcg-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.mcg-social-link:hover { color: var(--mc-pink); }
.mcg-social-link svg { display: block; }

.mcg-site-footer-col-heading {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mc-gold-brand);
  margin: 0 0 1rem;
}
.mcg-site-footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcg-site-footer-col-item + .mcg-site-footer-col-item { margin-top: 0.75rem; }
.mcg-site-footer-col-link {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.mcg-site-footer-col-link:hover { color: #fff; }
.mcg-site-footer-col-sep { color: rgba(255, 255, 255, 0.66); }

/* DS keeps the copyright inside the same 1180px column, separated by a
   hairline, rather than as a separate full-width band. */
.mcg-site-footer-copyright {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mcg-site-footer-copyright p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.mcg-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 1rem 0 1.25rem;
  font-size: 13px;
}
.mcg-breadcrumbs-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--mc-muted-gray);
  flex-shrink: 0;
}
.mcg-breadcrumbs-current {
  font-family: var(--mc-font-heading);
  color: var(--mc-primary);
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.mcg-breadcrumbs-link {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--mc-primary-light);
  text-decoration: none;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s var(--ease);
}
.mcg-breadcrumbs-link:hover { color: var(--mc-primary); }
.mcg-breadcrumbs-home-label {
  display: none;
}
@media (min-width: 640px) {
  .mcg-breadcrumbs-home-label { display: inline; }
}
.mcg-breadcrumbs-static {
  color: var(--mc-primary-light);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   9. REVIEWS ARCHIVE
   ───────────────────────────────────────────────────────────────
   Index page chrome: editorial header, tag filter row, review card
   grid, paginated nav bar, SEO footer.
   Ports from:
     mycamgirl-ds/.../blog/BlogIndexHeader.tsx
     mycamgirl-ds/.../blog/CategoryFilterRow.tsx
     mycamgirl-ds/.../EditorialReviewCard.tsx (vertical layout)
     mycamgirl-ds/.../Pagination.tsx
     mycamgirl-ds/.../blog/BlogIndexSeoFooter.tsx
   ═══════════════════════════════════════════════════════════════ */

.mcg-reviews-archive {
  padding-block: 2rem 4rem;
}
.mcg-reviews-archive > * + * { margin-top: 2rem; }

/* ── Blog index header (eyebrow + display H1 + tagline) ─────── */
.mcg-blog-index-header { margin-block: 0.5rem 0; }
.mcg-blog-index-header .mcg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mc-accent);
}
.mcg-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}
.mcg-eyebrow-logo {
  width: auto;
  height: 14px;
  display: inline-block;
}
.mcg-eyebrow-line {
  display: inline-block;
  width: 60px;
  height: 1px;
  margin-left: 0.25rem;
  background: linear-gradient(90deg, var(--mc-accent-light) 0%, transparent 100%);
}
.mcg-blog-index-title {
  color: var(--mc-dark);
  margin: 0;
  font-family: var(--mc-font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 6vw, 56px);
}
.mcg-blog-index-tagline {
  font-family: var(--mc-font-heading);
  margin-top: 0.75rem;
  font-size: 18px;
  line-height: 1.5;
  color: var(--mc-secondary-text);
  max-width: 640px;
}

/* ── Category filter row (chip wrap) ─────────────────────────── */
.mc-filter-row,
.mcg-category-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
  padding-bottom: 0;
}

.mcg-filter-row-label {
  flex-shrink: 0;
  margin-right: 0.25rem;
  font-family: var(--mc-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mc-secondary-text);
  white-space: nowrap;
}
.mcg-filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--mc-border-gray);
  background: var(--card);
  color: var(--mc-body);
  text-decoration: none;
  font-family: var(--mc-font-body);
  transition: background-color 0.15s var(--ease),
              border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}
.mcg-filter-chip:hover {
  background-color: var(--mc-primary-surface);
  border-color: var(--mc-primary-light);
  color: var(--mc-primary);
}
.mcg-filter-chip.is-active {
  background: var(--mc-primary);
  border-color: var(--mc-primary);
  color: var(--mc-white);
}
.mcg-filter-chip-count {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 0.5rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--mc-light-gray);
  color: var(--mc-secondary-text);
}
.mcg-filter-chip.is-active .mcg-filter-chip-count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--mc-white);
}

/* ── Review card grid ────────────────────────────────────────── */
.mcg-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .mcg-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mcg-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ── Review card (vertical EditorialReviewCard) ──────────────── */
.mcg-review-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(97, 76, 146, 0.06);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.mcg-review-card:hover {
  box-shadow: 0 6px 24px rgba(97, 76, 146, 0.14);
  transform: translateY(-1px);
}
.mcg-review-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--mc-primary-ultralight) 50%, transparent);
  border-radius: 10px 10px 0 0;
}
.mcg-review-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.mcg-review-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--mc-primary-light);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mc-primary) 20%, transparent),
    color-mix(in srgb, var(--mc-accent) 20%, transparent));
}
.mcg-review-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mcg-review-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mc-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcg-review-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.mcg-review-card:hover .mcg-review-card-title a { color: var(--mc-accent); }
.mcg-review-card-excerpt {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mc-secondary-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcg-review-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
/* Archive-card tag chip — DS EditorialReviewCard inline-styled span
   (px-2.5 py-0.5 / 11px / weight 500 / mc-primary-ultralight border).
   Smaller than the base `.mc-chip` because card density is tighter. */
.mcg-review-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid var(--mc-primary-ultralight);
  color: var(--mc-primary);
  background: var(--card);
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.mcg-review-card-tag:hover {
  background: var(--mc-primary-surface);
  color: var(--mc-primary-hover);
}

/* ── Empty result ────────────────────────────────────────────── */
.mcg-empty-result {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--mc-secondary-text);
}
.mcg-empty-result p { margin: 0.5rem 0; }

/* ── Pagination bar ──────────────────────────────────────────── */
.mcg-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.mcg-pagination-summary {
  font-size: 13px;
  color: var(--mc-secondary-text);
}
.mcg-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.mcg-pagination-page,
.mcg-pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-body);
  background: transparent;
  border: 0;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.mcg-pagination-page:hover,
.mcg-pagination-arrow:not(.is-disabled):hover {
  background: var(--mc-primary-surface);
}
.mcg-pagination-page.is-current {
  background: var(--mc-primary);
  color: var(--mc-white);
}
.mcg-pagination-arrow.is-disabled {
  color: var(--mc-muted-gray);
  cursor: not-allowed;
}
.mcg-pagination-dots {
  display: inline-block;
  width: 32px;
  text-align: center;
  color: var(--mc-mid-gray);
  font-size: 13px;
}
.mcg-pagination-arrow-prev { transform: rotate(180deg); }
@media (max-width: 480px) {
  .mcg-pagination { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── SEO footer ──────────────────────────────────────────────── */
.mcg-blog-index-seo {
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--mc-border-gray);
  background: var(--card);
  color: var(--mc-secondary-text);
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .mcg-blog-index-seo { padding: 2.25rem; }
}
.mcg-seo-section + .mcg-seo-section { margin-top: 1.5rem; }
.mcg-seo-heading {
  margin: 0 0 0.5rem;
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mc-body);
}
.mcg-seo-body {
  font-size: 14px;
  line-height: 1.65;
}
.mcg-seo-body p { margin: 0 0 0.75rem; }
.mcg-seo-body p:last-child { margin-bottom: 0; }
.mcg-seo-body a {
  color: var(--mc-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mc-primary) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s var(--ease);
}
.mcg-seo-body a:hover { text-decoration-color: var(--mc-primary); }


/* ═══════════════════════════════════════════════════════════════
   10. REVIEW SINGLE
   ───────────────────────────────────────────────────────────────
   Direct port of mycamgirl-ds/src/app/review-detail.tsx — the
   review-detail mock that assembles every review component into
   the canonical page composition. Every Tailwind utility on every
   element in that file is translated below to a semantic class
   rule. No Tailwind utilities used in markup.

   Page composition (top → bottom):
     PageColumn:
       1. Breadcrumbs
       2. ReviewHero — two-column [320px portrait] [meta flex column]
     Full-bleed sticky section nav
     PageColumn:
       3. (optional) VerdictCard
       4. In-page TOC Card
       5. Platform sidebar — mobile only (lg:hidden)
       6. Body grid [1fr | 280px sticky platform sidebar]
       7. Forum CTA section
       8. Trust framework
       9. Related reviews
      10. Post nav
   ═══════════════════════════════════════════════════════════════ */

.mcg-review-article { padding-block: 0.75rem 3rem; }
.mcg-review-top > * + * { margin-top: 1rem; }
.mcg-review-content > * + * { margin-top: 1.5rem; }
.mcg-review-content { padding-top: 1.25rem; }

/* ── ReviewHero — single bordered card (DS ReviewHero.tsx) ────────
   Layout: column on mobile, row on md+. The whole hero is one card
   with the photo (and verdict band) flush in the left column and the
   editorial content in the right column. No internal gap — the photo
   column is bg-tinted and the verdict band sits flush at its bottom. */
.mcg-review-hero {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mcg-review-hero { flex-direction: row; }
}

/* Left column — portrait + verdict band */
.mcg-review-hero-photo-col {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--mc-primary-ultralight) 40%, transparent);
}
@media (min-width: 768px) {
  .mcg-review-hero-photo-col { width: 250px; }
}
.mcg-review-hero-photo {
  flex: 1 1 auto;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 3 / 4;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .mcg-review-hero-photo { min-height: 0; aspect-ratio: auto; }
}
.mcg-review-hero-photo--fallback {
  background-image: linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcg-review-hero-photo-initial {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 96px;
  color: rgba(255, 255, 255, 0.85);
}

/* ── ReviewVerdictBand — flush at bottom of photo column.
   Tier mapping is score-driven server-side: ≥7 success, ≥5 warning,
   <5 error. Tile is a 36×36 rounded-sm square, white icon. */
.mcg-hero-verdict-band {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.mcg-hero-verdict-band--success { background: var(--mc-success-bg); }
.mcg-hero-verdict-band--warning { background: var(--mc-warning-bg); }
.mcg-hero-verdict-band--error   { background: var(--mc-error-bg); }
.mcg-hero-verdict-tile {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mc-white);
}
.mcg-hero-verdict-band--success .mcg-hero-verdict-tile { background: var(--mc-success); }
.mcg-hero-verdict-band--warning .mcg-hero-verdict-tile { background: var(--mc-warning); }
.mcg-hero-verdict-band--error   .mcg-hero-verdict-tile { background: var(--mc-error); }
.mcg-hero-verdict-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mcg-hero-verdict-label {
  font-family: var(--mc-font-heading);
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcg-hero-verdict-band--success .mcg-hero-verdict-label { color: var(--mc-success-text); }
.mcg-hero-verdict-band--warning .mcg-hero-verdict-label { color: var(--mc-warning-text); }
.mcg-hero-verdict-band--error   .mcg-hero-verdict-label { color: var(--mc-error-text); }
.mcg-hero-verdict-sublabel {
  font-family: var(--mc-font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-mid-gray);
  margin-top: 2px;
}
.mcg-hero-verdict-score {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.mcg-hero-verdict-score-num {
  font-family: var(--mc-font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.mcg-hero-verdict-band--success .mcg-hero-verdict-score-num { color: var(--mc-success-text); }
.mcg-hero-verdict-band--warning .mcg-hero-verdict-score-num { color: var(--mc-warning-text); }
.mcg-hero-verdict-band--error   .mcg-hero-verdict-score-num { color: var(--mc-error-text); }
.mcg-hero-verdict-score-suf {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-mid-gray);
}

/* Right column — editorial content */
.mcg-review-hero-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

/* Kicker row — wraps the always-on "Editorial Review" pill plus the
   optional camsite pill. `align-self: flex-start` keeps the row from
   stretching to the column width while letting the children sit on
   the same baseline with a tight gap. */
.mcg-review-hero-kickers {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* CategoryPill variant="review" — hugs its text. */
.mcg-review-category-pill {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 2px;
  background: var(--mc-primary-surface);
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
/* Camsite variant — inline `--mcg-camsite-color` carries the term's
   `camsite_brand_color` ACF meta. Solid brand-color background with
   white text so the platform identity reads strongly next to the
   neutral "Editorial Review" pill. */
.mcg-review-category-pill--camsite {
  --mcg-camsite-color: var(--mc-primary);
  background: var(--mcg-camsite-color);
  border-color: var(--mcg-camsite-color);
  color: #fff;
  text-decoration: none;
}
.mcg-review-category-pill--camsite:hover {
  background: var(--mcg-camsite-color);
  filter: brightness(1.08);
  color: #fff;
}

/* H1 — "{name} — {title}" with accent em-dash */
.mcg-review-title {
  font-family: var(--mc-font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--mc-primary);
  margin: 0;
}
@media (min-width: 768px) {
  .mcg-review-title { font-size: 30px; }
}
.mcg-review-title-em {
  color: var(--mc-accent);
  display: inline-block;
  margin: 0 2px;
}

/* Italic dek (standfirst) */
.mcg-review-dek {
  font-family: 'Red Hat Text', var(--mc-font-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--mc-secondary-text);
  margin: 0;
}

/* Tag chips row — collapsed truncates to N visible + "+X more" toggle */
.mcg-review-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mcg-review-tags.is-collapsed {
  flex-wrap: nowrap;
  overflow: hidden;
}
.mcg-review-tags.is-collapsed .mcg-review-tags-item.is-overflow {
  display: none;
}
.mcg-review-tags-item {
  flex-shrink: 0;
  text-decoration: none;
}
/* "+N more" overflow toggle — uses base `.mc-chip` for sizing (matches
   the DS `mc-chip mc-chip--interactive` button inside ReviewHero) and
   only overrides what the DS sets inline: dashed border + button reset.
   No padding/font-size override here — those come from `.mc-chip`. */
.mcg-review-tags-toggle {
  flex-shrink: 0;
  border-style: dashed;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Inline meta line — age (birthday) · country · price · status */
.mcg-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: 'Red Hat Text', var(--mc-font-body);
  font-size: 12px;
  color: var(--mc-secondary-text);
}
.mcg-review-meta-age {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mcg-review-meta-age-num {
  font-weight: 600;
  color: var(--mc-primary);
}
.mcg-review-meta-age-bday {
  color: var(--mc-mid-gray);
  font-size: 11px;
}
.mcg-review-meta-dot { color: var(--mc-mid-gray); }
.mcg-review-meta-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mcg-review-meta-fact svg { width: 12px; height: 12px; }
.mcg-review-meta-fact--active { color: var(--mc-success-text); }
.mcg-review-meta-dim { color: var(--mc-mid-gray); }

/* Spacer pushes the byline down so the content column matches the
   photo column height when there's plenty of vertical room. */
.mcg-review-hero-spacer { flex: 1 1 auto; min-height: 0; }

/* Byline row — hairline top border separates byline from meta */
.mcg-review-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--mc-border-gray);
}
.mcg-review-byline-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  flex-shrink: 0;
  color: var(--mc-white);
  font-family: 'Plus Jakarta Sans', var(--mc-font-heading);
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
}
.mcg-review-byline-stack {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcg-review-byline-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mcg-review-byline-name {
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--mc-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcg-review-byline-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--mc-accent);
  color: var(--mc-white);
  font-family: var(--mc-font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mcg-review-byline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-family: 'Red Hat Text', var(--mc-font-body);
  font-size: 12px;
  color: var(--mc-mid-gray);
}
.mcg-review-byline-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mcg-review-byline-fact svg { width: 12px; height: 12px; }

/* Freebies pill — right-side green pill: image-count · video-count · FREE */
.mcg-review-byline-freebies {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--mc-success-bg);
  color: var(--mc-success-text);
  font-family: 'Plus Jakarta Sans', var(--mc-font-heading);
  font-weight: 600;
  font-size: 12px;
}
.mcg-review-byline-freebies-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mcg-review-byline-freebies-item svg { width: 14px; height: 14px; }
.mcg-review-byline-freebies-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Full-bleed sticky section-nav band ──────────────────────── */
.mcg-review-section-nav {
  position: sticky;
  top: 57px; /* SITE_NAV_HEIGHT_PX */
  z-index: 30;
  width: 100%;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--mc-border-gray);
  margin-block: 0;
}
/* DS StickyNavBar is "constrained to a 1440px content column" — must match
   .mcg-page-column or the sticky sub-nav sits narrower than the content it
   navigates. Was 1100px. */
.mcg-review-section-nav-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mcg-review-section-nav-inner::-webkit-scrollbar { display: none; }
.mcg-review-section-nav-link {
  white-space: nowrap;
  font-family: var(--mc-font-heading);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--mc-secondary-text);
  padding: 14px 20px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.mcg-review-section-nav-link:hover { color: var(--mc-accent); }
.mcg-review-section-nav-link.is-active {
  color: var(--mc-accent);
  border-bottom-color: var(--mc-accent);
}

/* ── In-page TOC Card ───────────────────────────────────────── */
.mcg-review-toc-card {
  padding: 20px;
  border: 1px solid var(--mc-border-gray);
  border-radius: 10px;
  background: var(--card);
  margin: 0 0 2rem;
}
.mcg-review-toc-eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0 0 12px;
}
.mcg-review-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .mcg-review-toc-list { columns: 2; column-gap: 2rem; }
}
.mcg-review-toc-list li {
  break-inside: avoid;
}
.mcg-review-toc-list li[data-depth="2"] {
  padding-left: 1rem;
  border-left: 2px solid var(--mc-border-gray);
  margin-left: 2px;
}
.mcg-review-toc-list a {
  display: block;
  padding: 4px 0;
  font-family: var(--mc-font-body);
  font-size: 13px;
  color: var(--mc-secondary-text);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.mcg-review-toc-list a:hover { color: var(--mc-accent); }
.mcg-review-toc-skeleton {
  height: 1.5rem;
  background: linear-gradient(90deg,
    var(--mc-light-gray) 0%,
    color-mix(in srgb, var(--mc-light-gray) 50%, transparent) 50%,
    var(--mc-light-gray) 100%);
  border-radius: 4px;
  list-style: none;
  width: 60%;
}

/* ── Body grid: 1fr article | 280px sticky sidebar ───────────── */
.mcg-review-platforms-mobile { margin-bottom: 2rem; }
@media (min-width: 1024px) {
  .mcg-review-platforms-mobile { display: none; }
}

.mcg-review-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .mcg-review-body-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
  }
}

.mcg-review-body {
  min-width: 0;
  scroll-margin-top: 120px;
}

.mcg-review-aside { display: none; }
@media (min-width: 1024px) {
  .mcg-review-aside {
    display: block;
  }
  .mcg-review-aside > .mcg-platform-sidebar {
    position: sticky;
    top: calc(57px + 60px + 1rem); /* SiteNav + section-nav + breathing */
  }
}

/* Platform sidebar card — DS PlatformNicknameList parity:
   0.5px border, 18px 20px padding, rounded card, light card bg. */
.mcg-platform-sidebar {
  padding: 18px 20px;
  border: 0.5px solid var(--mc-border-gray);
  border-radius: 10px;
  background: var(--card);
  box-sizing: border-box;
}
/* `.mcg-platform-sidebar-facts*` rules removed — the facts (age,
   country, price) moved to the hero stats bar in the Stats Bar Redesign,
   so the sidebar is now eyebrow + rows only, matching the DS exactly. */
.mcg-platform-sidebar-eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0 0 14px;
}
.mcg-platform-sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── SectionHeader (icon + title) ──────────────────────────── */
.mcg-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-family: var(--mc-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--mc-dark);
}
.mcg-section-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-primary);
}

/* ── Forum CTA (DS Card pattern) ─────────────────────────────── */
.mcg-review-forum-section { margin: 3.5rem 0; }
.mcg-forum-cta {
  padding: 1.25rem;
  border: 1px solid var(--mc-border-gray);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .mcg-forum-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.mcg-forum-cta-text {
  font-family: var(--mc-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mc-secondary-text);
  max-width: 60ch;
  margin: 0;
}
.mcg-forum-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-family: var(--mc-font-heading);
  font-weight: 600;
  color: var(--mc-accent);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.mcg-forum-cta-link:hover { color: var(--mc-accent-hover); }
.mcg-forum-cta-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
}

/* ── Trust framework (port of TrustFramework.tsx) ────────────── */
.mcg-trust-framework {
  width: 100%;
  background: var(--mc-light-gray);
  padding: 1.25rem;
  border-radius: 10px;
  margin: 3.5rem 0 2.5rem;
}
.mcg-trust-eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mc-secondary-text);
  margin: 0 0 0.5rem;
}
.mcg-trust-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mc-body);
  margin: 0 0 1rem;
}
.mcg-trust-name {
  font-family: var(--mc-font-heading);
  color: var(--mc-primary);
}
.mcg-trust-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.mcg-trust-tile {
  background: var(--card);
  border: 1px solid var(--mc-border-gray);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.mcg-trust-value {
  font-family: var(--mc-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-primary);
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mcg-trust-label {
  font-family: var(--mc-font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mc-secondary-text);
  margin: 0.375rem 0 0;
}

/* ── Related reviews — DS EditorialReviewCard horizontal ─────── */
.mcg-related-reviews { margin-bottom: 2.5rem; }
.mcg-related-heading {
  font-family: var(--mc-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-dark);
  margin: 0 0 1rem;
}
.mcg-related-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mc-editorial-card {
  background: var(--card);
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(97, 76, 146, 0.06);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.mc-editorial-card:hover {
  box-shadow: 0 6px 24px rgba(97, 76, 146, 0.14);
  transform: translateY(-1px);
}
.mc-editorial-card--horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.mc-editorial-card--vertical {
  display: flex;
  flex-direction: column;
}

.mc-editorial-card__image {
  flex-shrink: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--mc-primary-ultralight) 50%, transparent);
  display: block;
}
.mc-editorial-card--horizontal .mc-editorial-card__image {
  width: 200px;
  height: 130px;
  border-radius: 10px 0 0 10px;
}
.mc-editorial-card--vertical .mc-editorial-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 480px) {
  .mc-editorial-card--horizontal .mc-editorial-card__image {
    width: 130px;
    height: auto;
    align-self: stretch;
  }
}
.mc-editorial-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.mc-editorial-card__image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--mc-primary-light);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mc-primary) 20%, transparent),
    color-mix(in srgb, var(--mc-accent) 20%, transparent));
}

.mc-editorial-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem;
}
.mc-editorial-card__title-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.mc-editorial-card__title {
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mc-primary);
  margin: 0 0 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s var(--ease);
}
.mc-editorial-card:hover .mc-editorial-card__title { color: var(--mc-accent); }
.mc-editorial-card__excerpt {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mc-secondary-text);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-editorial-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.mc-editorial-card__tag {
  font-family: var(--mc-font-heading);
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--mc-primary-ultralight);
  background: var(--card);
  color: var(--mc-primary);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}

/* ── Post navigation (prev/next review) ──────────────────────── */
.mcg-post-nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mc-border-gray);
  margin-top: 2rem;
}
.mcg-post-nav-prev,
.mcg-post-nav-next { font-size: 13px; }
.mcg-post-nav-next { text-align: right; margin-left: auto; }
.mcg-post-nav a {
  color: var(--mc-primary);
  text-decoration: none;
}
.mcg-post-nav a:hover { color: var(--mc-accent); }
.mcg-post-nav-arrow {
  display: inline-block;
  color: var(--mc-muted-gray);
  margin: 0 0.375rem;
}

/* ── Full-bleed CTA band — DS CTAHeroSection port ────────────── */
.mcg-cta-band {
  display: block;
  width: 100%;
  margin-top: 3.5rem;
  /* CTA band is the last child of `.mcg-review-article`, which has
     `padding-block: 0.75rem 3rem`. Pull the band down through that
     bottom padding so it sits flush against the site footer without
     adding a `:has()` rule that needs Safari 15.4+. */
  margin-bottom: -3rem;
  background: linear-gradient(135deg, var(--mc-accent) 0%, var(--mc-primary) 100%);
}
.mcg-cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  max-width: 720px;
  margin-inline: auto;
}
.mcg-cta-band-title {
  font-family: var(--mc-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mc-white);
  margin: 0 0 1rem;
  max-width: 36rem;
}
.mcg-cta-band-subtitle {
  font-family: var(--mc-font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2rem;
  max-width: 32rem;
}
.mcg-cta-band-button {
  display: inline-block;
  padding: 12px 32px;
  border: 0;
  border-radius: 8px;
  background: var(--mc-white);
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s var(--ease);
  cursor: pointer;
}
.mcg-cta-band-button:hover { transform: scale(1.03); color: var(--mc-primary); }
.mcg-cta-band-button:active { transform: scale(0.98); }

/* ── Inline TOC (JS-generated DOM, optional in 3h) ───────────── */
.mc-inline-toc {
  margin: 1rem 0;
  border-radius: 10px;
  border: 1px solid var(--mc-border-gray);
  background: var(--card);
  overflow: hidden;
}
.mc-inline-toc__summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--mc-light-gray);
  border: 0;
  cursor: pointer;
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-dark);
}
.mc-inline-toc__summary:hover { color: var(--mc-primary); }
.mc-inline-toc__list {
  list-style: none;
  margin: 0;
  padding: 0.625rem 1rem;
}
.mc-inline-toc__list li { padding: 0.25rem 0; }
.mc-inline-toc__list li[data-depth="1"] { padding-left: 1rem; }
.mc-inline-toc__list a {
  display: block;
  padding: 0.25rem 0.625rem;
  margin-left: -0.625rem;
  border-radius: 6px;
  font-size: 14px;
  color: var(--mc-body);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease), border-left-color 0.15s var(--ease);
}
.mc-inline-toc__list a:hover {
  color: var(--mc-primary);
  background: var(--mc-primary-surface);
  border-left-color: var(--mc-primary-light);
}


/* ═══════════════════════════════════════════════════════════════
   11. BLOG
   ───────────────────────────────────────────────────────────────
   Direct port of:
     mycamgirl-ds/src/app/blog.tsx          (blog index composition)
     mycamgirl-ds/src/app/blog-post.tsx     (single-post composition)
     mycamgirl-ds/.../BlogPostCard.tsx      (card default variant)
     mycamgirl-ds/.../blog/BlogPostHeader.tsx
     mycamgirl-ds/.../blog/BlogHero.tsx
     mycamgirl-ds/.../blog/BlogAuthorCard.tsx

   Prose typography lives in assets/css/blog-prose.css — enqueued
   only on single blog posts.
   ═══════════════════════════════════════════════════════════════ */

/* ── Archive page outer scaffold ─────────────────────────────── */
.mcg-blog-archive {
  padding-block: 0 4rem;
}
.mcg-blog-archive > * + * { margin-top: 2rem; }
.mcg-blog-archive-breadcrumbs {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--mc-border-gray);
}
.mcg-blog-archive .mcg-blog-index-header { margin-top: 3rem; }

/* ── Blog card grid (default variant) ────────────────────────── */
.mcg-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .mcg-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mcg-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── BlogPostCard default ────────────────────────────────────── */
.mcg-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(97, 76, 146, 0.06);
  transition: box-shadow 0.2s var(--ease);
}
.mcg-blog-card:hover {
  box-shadow: 0 6px 24px rgba(97, 76, 146, 0.14);
}
.mcg-blog-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--mc-primary-ultralight) 40%, transparent);
  border-radius: 8px 8px 0 0;
}
.mcg-blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.3s var(--ease);
}
.mcg-blog-card:hover .mcg-blog-card-image img { transform: scale(1.02); }
.mcg-blog-card-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 36px;
  color: var(--mc-primary-light);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mc-primary) 20%, transparent),
    color-mix(in srgb, var(--mc-accent) 20%, transparent));
}
.mcg-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 1rem;
}
.mcg-blog-card-category {
  align-self: flex-start;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background: var(--mc-primary);
  color: var(--mc-white);
  font-family: var(--mc-font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.mcg-blog-card-title-link { text-decoration: none; color: inherit; }
.mcg-blog-card-title {
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mc-body);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s var(--ease);
}
.mcg-blog-card:hover .mcg-blog-card-title { color: var(--mc-accent); }
.mcg-blog-card-excerpt {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mc-secondary-text);
  flex: 1 1 auto;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcg-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--mc-primary-ultralight);
  font-size: 12px;
  color: var(--mc-mid-gray);
}
.mcg-blog-card-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--mc-border-gray);
}
.mcg-blog-card-reading {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Single blog post layout — tier wrappers ─────────────────── */
.mcg-blog-article > * + * { margin-top: 2.5rem; }
.mcg-blog-article {
  padding-block: 0 4rem;
}
.mcg-blog-breadcrumbs {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--mc-border-gray);
}
.mcg-blog-article .mcg-blog-post-header { margin-top: 3rem; }

/* ── BlogPostHeader (reading-column) ─────────────────────────── */
.mcg-blog-post-header { margin: 0; }
.mcg-blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mcg-blog-post-category {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--mc-primary);
  color: var(--mc-white);
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mcg-blog-post-reading,
.mcg-blog-post-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 13px;
  color: var(--mc-secondary-text);
}
.mcg-blog-post-updated::before {
  content: '·';
  margin-right: 0.375rem;
  color: var(--mc-muted-gray);
}
.mcg-blog-post-title {
  font-family: var(--mc-font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mc-dark);
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
}
.mcg-blog-post-subtitle {
  font-family: var(--mc-font-heading);
  margin: 1rem 0 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mc-secondary-text);
}
.mcg-blog-post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mc-border-gray);
  font-size: 13px;
  color: var(--mc-secondary-text);
}
.mcg-blog-post-byline-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: var(--mc-white);
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
}
.mcg-blog-post-byline-name { display: inline-block; }
.mcg-blog-post-byline-link { color: var(--mc-primary); font-weight: 600; }
.mcg-blog-post-byline-sep { color: var(--mc-muted-gray); }
.mcg-blog-post-byline-date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ── BlogHero (page-column) ──────────────────────────────────── */
.mcg-blog-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 24px 48px -24px rgba(97, 76, 146, 0.45);
  background:
    radial-gradient(circle at 20% 30%, rgba(184, 61, 107, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(97, 76, 146, 0.55) 0%, transparent 42%),
    linear-gradient(125deg, #2A1F3F 0%, #4E3B78 55%, #1A1228 100%);
}
.mcg-blog-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.mcg-blog-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.04) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
  mix-blend-mode: normal;
}
.mcg-blog-hero-text {
  font-family: var(--mc-font-heading);
  position: relative;
  z-index: 1;
  padding: 1.75rem 1.5rem;
  color: var(--mc-white);
}
@media (min-width: 640px) {
  .mcg-blog-hero-text { padding: 2.25rem; }
}
.mcg-blog-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.25rem;
  opacity: 0.7;
}
.mcg-blog-hero-headline {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .mcg-blog-hero-headline { font-size: 32px; }
}

/* ── Footer cluster: tags + BlogAuthorCard ───────────────────── */
.mcg-blog-footer-cluster {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mcg-blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.mcg-blog-tags-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-secondary-text);
}
.mcg-blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--mc-primary-ultralight);
  background: var(--card);
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}
.mcg-blog-tag:hover { background: var(--mc-primary-surface); color: var(--mc-primary-hover); }

.mcg-blog-author-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--mc-border-gray);
  border-radius: 12px;
  background: var(--card);
}
.mcg-blog-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--mc-white);
  background: linear-gradient(135deg, var(--mc-primary) 0%, var(--mc-accent) 100%);
}
.mcg-blog-author-body { min-width: 0; }
.mcg-blog-author-name {
  font-family: var(--mc-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--mc-dark);
}
.mcg-blog-author-byline {
  font-size: 13px;
  color: var(--mc-secondary-text);
  margin-top: 0.125rem;
}
.mcg-blog-author-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mc-body);
  margin: 0.75rem 0;
}
.mcg-blog-author-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 13px;
  color: var(--mc-secondary-text);
}
.mcg-blog-author-stats strong { color: var(--mc-dark); font-weight: 700; }
.mcg-blog-author-stat-sep { color: var(--mc-mid-gray); }

/* ── Related posts block (single page) ───────────────────────── */
.mcg-blog-related { margin-top: 3rem; }
.mcg-blog-related-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.mcg-blog-related-eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-accent);
}
.mcg-blog-related-heading {
  font-family: var(--mc-font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--mc-dark);
  letter-spacing: -0.01em;
  margin: 0.25rem 0 0;
}
.mcg-blog-related-view-all {
  display: none;
  align-items: center;
  gap: 0.25rem;
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
@media (min-width: 640px) {
  .mcg-blog-related-view-all { display: inline-flex; }
}
.mcg-blog-related-view-all:hover { color: var(--mc-accent); }
.mcg-blog-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .mcg-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mcg-blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════
   12. Camsite Reviews
   PageColumn-wide two-column layout for `review_type=camsite` posts.
   Left rail: details card + TOC + prose. Right sidebar (sticky on lg):
   rating card with half-step stars + related model reviews list. The
   header chrome (BlogPostHeader, BlogHero, breadcrumbs) reuses the
   blog-single styles; nothing here overrides those.
   ═══════════════════════════════════════════════════════════════ */

.mcg-camsite-article { padding-block: 0.75rem 3rem; }
.mcg-camsite-breadcrumbs { padding-block: 0.5rem 0; }
.mcg-camsite-header { margin-top: 2rem; }
.mcg-camsite-body-wrap { padding-top: 1.75rem; }
.mcg-camsite-blog-hero {
  /* Slightly taller than the blog single hero — camsite hero is the
     primary visual ID for the article since there's no big portrait. */
  min-height: 280px;
}

/* Two-column grid — stacks on small viewports, splits 1fr / 320px on
   lg. The aside is sticky on lg so the rating card stays in view while
   the body scrolls; below lg it just stacks under the prose. */
.mcg-camsite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 960px) {
  .mcg-camsite-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
  }
}

.mcg-camsite-main { min-width: 0; }
.mcg-camsite-main > * + * { margin-top: 1.5rem; }

.mcg-camsite-aside { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 960px) {
  .mcg-camsite-aside {
    position: sticky;
    /* Site nav 57px + 1.5rem breathing room. */
    top: calc(57px + 1.5rem);
    align-self: start;
    max-height: calc(100vh - 57px - 1.5rem);
    overflow-y: auto;
  }
}

/* ── Details card (from ACF, not from post_content table) ─────── */
.mcg-camsite-details {
  border: 1px solid var(--mc-border-gray);
  border-radius: 12px;
  background: var(--card);
  padding: 1.25rem 1.5rem;
}
.mcg-camsite-details-heading {
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--mc-primary);
  margin: 0 0 0.75rem;
}
.mcg-camsite-details-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
@media (max-width: 540px) {
  .mcg-camsite-details-list { grid-template-columns: 1fr; }
}
.mcg-camsite-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mc-border-gray);
}
.mcg-camsite-details-row:last-child,
.mcg-camsite-details-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 540px) {
  .mcg-camsite-details-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--mc-border-gray); }
  .mcg-camsite-details-row:last-child { border-bottom: 0; }
}
.mcg-camsite-details-key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-mid-gray);
  margin: 0;
}
.mcg-camsite-details-icon {
  display: inline-flex;
  color: var(--mc-mid-gray);
}
.mcg-camsite-details-value {
  font-family: var(--mc-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-primary);
  margin: 0;
  text-align: right;
}

/* ── Rating card (sidebar) ────────────────────────────────────── */
.mcg-camsite-rating-card {
  border: 1px solid var(--mc-border-gray);
  border-radius: 12px;
  background: var(--card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mcg-camsite-rating-card-header { text-align: center; }
.mcg-camsite-rating-card-title {
  font-family: var(--mc-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--mc-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.mcg-camsite-rating-card-by {
  font-family: var(--mc-font-body);
  font-size: 12px;
  color: var(--mc-mid-gray);
  margin: 0.125rem 0 0;
  font-style: italic;
}
.mcg-camsite-rating-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mcg-camsite-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--mc-border-gray);
}
.mcg-camsite-rating-row:last-child { border-bottom: 0; }
.mcg-camsite-rating-label {
  font-family: var(--mc-font-body);
  font-size: 14px;
  color: var(--mc-dark);
}
.mcg-camsite-rating-stars,
.mcg-camsite-rating-summary-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.mcg-camsite-rating-summary {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mc-border-gray);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.mcg-camsite-rating-summary-score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.mcg-camsite-rating-summary-num {
  font-family: var(--mc-font-heading);
  font-size: 48px;
  font-weight: 700;
  color: var(--mc-primary);
  line-height: 1;
}
.mcg-camsite-rating-summary-suf {
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--mc-mid-gray);
}
.mcg-camsite-rating-summary-tagline {
  font-family: var(--mc-font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--mc-secondary-text);
  margin: 0;
  line-height: 1.45;
}

/* ── Related model reviews (sidebar) ─────────────────────────── */
.mcg-camsite-related {
  border: 1px solid var(--mc-border-gray);
  border-radius: 12px;
  background: var(--card);
  padding: 1.25rem;
}
.mcg-camsite-related-eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0;
}
.mcg-camsite-related-heading {
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--mc-primary);
  margin: 0.25rem 0 0.75rem;
  letter-spacing: -0.005em;
}
.mcg-camsite-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mcg-camsite-related-row {
  border-bottom: 1px solid var(--mc-border-gray);
}
.mcg-camsite-related-row:last-child { border-bottom: 0; }
.mcg-camsite-related-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  text-decoration: none;
  color: inherit;
}
.mcg-camsite-related-link:hover .mcg-camsite-related-name { color: var(--mc-primary-hover); }
.mcg-camsite-related-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mcg-camsite-related-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcg-camsite-related-avatar-fallback {
  color: var(--mc-white);
  font-family: var(--mc-font-heading);
  font-weight: 700;
  font-size: 14px;
}
.mcg-camsite-related-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcg-camsite-related-name {
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-primary);
}
.mcg-camsite-related-headline {
  font-family: var(--mc-font-body);
  font-size: 12px;
  color: var(--mc-secondary-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Star primitives ──────────────────────────────────────────
   Used by mcg_render_stars(); colours are baked into the SVG so they
   stay correct in dark mode without an extra rule. */
.mcg-star { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ── Screenshot figure (block pattern) ──────────────────────── */
.mcg-screenshot {
  margin: 1.5rem auto;
}
.mcg-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--mc-border-gray);
}
.mcg-screenshot figcaption,
.mcg-screenshot .wp-element-caption {
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: var(--mc-secondary-text);
  margin-top: 0.5rem;
}

/* ── Back-to-top button (global) ─────────────────────────────── */
.mcg-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-primary);
  color: var(--mc-white);
  border: 0;
  border-radius: 9999px;
  box-shadow: var(--shadow-primary);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
/* theme.js toggles the [hidden] attribute, but the UA's
   `[hidden] { display: none }` loses to the `display: inline-flex` above —
   author styles beat the UA sheet. Without this the button stayed in the
   layer permanently: invisible at opacity 0, yet still hit-testing over the
   bottom-right corner of every page and swallowing clicks meant for the
   content beneath it.
   Kept displayed rather than `display: none` so the fade still runs;
   `visibility` is in the transition list so the hide animates out before
   the element goes inert. Every other [hidden] toggle in this file
   (.mcg-mobile-menu, .mcg-mobile-submenu, .mcg-lightbox) has an explicit
   rule — this was the one that was missing it. */
.mcg-back-to-top[hidden] {
  pointer-events: none;
  visibility: hidden;
}
.mcg-back-to-top:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.mcg-back-to-top:hover {
  background: var(--mc-primary-hover);
  box-shadow: var(--shadow-primary-hover);
}
.mcg-back-to-top:focus-visible {
  outline: none;
  box-shadow: var(--ring-primary), var(--shadow-primary-hover);
}


/* ════════ Review block patterns (CSS ready for Phase 3g) ════════ */

/* VerdictCard */
.mc-verdict {
  width: 100%;
  border-radius: 12px;
  border: 2px solid var(--mc-success);
  overflow: hidden;
  background: var(--card);
  margin: 1.5rem 0;
}
.mc-verdict--recommended,
.mc-verdict--highly-recommended { border-color: var(--mc-success); }
.mc-verdict--mixed              { border-color: var(--mc-warning); }
.mc-verdict--caution            { border-color: var(--mc-error); }
.mc-verdict__band {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--mc-success-bg);
}
.mc-verdict--mixed   .mc-verdict__band { background: var(--mc-warning-bg); }
.mc-verdict--caution .mc-verdict__band { background: var(--mc-error-bg); }
.mc-verdict__icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--mc-success);
  color: var(--mc-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mc-verdict--mixed   .mc-verdict__icon-tile { background: var(--mc-warning); }
.mc-verdict--caution .mc-verdict__icon-tile { background: var(--mc-error); }
.mc-verdict__eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-mid-gray);
  margin: 0;
}
.mc-verdict__label {
  font-family: var(--mc-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mc-success-text);
  margin: 0.125rem 0 0;
}
.mc-verdict--mixed   .mc-verdict__label { color: var(--mc-warning-text); }
.mc-verdict--caution .mc-verdict__label { color: var(--mc-error-text); }
.mc-verdict__band-body {
  flex: 1 1 auto;
  min-width: 0;
}
.mc-verdict__score {
  text-align: right;
  flex-shrink: 0;
}
.mc-verdict__score-value {
  font-family: var(--mc-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--mc-success-text);
  margin: 0;
}
.mc-verdict--mixed   .mc-verdict__score-value { color: var(--mc-warning-text); }
.mc-verdict--caution .mc-verdict__score-value { color: var(--mc-error-text); }
.mc-verdict__score-denom {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-mid-gray);
  margin: 0.25rem 0 0;
}
.mc-verdict__summary {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
}
.mc-verdict__summary dt,
.mc-verdict__summary .mc-verdict__row-label {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-mid-gray);
}
.mc-verdict__summary dd,
.mc-verdict__summary .mc-verdict__row-value {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mc-body);
  margin: 0;
}
/* Warning row in the verdict summary (DS VerdictCard.tsx line 127). */
.mc-verdict__row-label--warning {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--mc-warning-text) !important;
}
.mc-verdict__row-value--warning {
  color: var(--mc-warning-text) !important;
}

/* Lede paragraph (Phase 3e-fix2). Sits between the verdict card and
   the TOC. DS review-detail.tsx renders it at 16px/1.75 secondary-text;
   we bump to 18px to set the slot apart from the body prose (which is
   also 16px/1.75) so a quick scan can tell hook from section copy. */
.mcg-review-lede {
  font-family: var(--mc-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--mc-secondary-text);
  margin: 0 0 2rem;
  max-width: 65ch;
}

/* TrustFramework (already used by template-parts/review-footer.php) */

/* ReviewFAQ */
.mc-review-faq {
  width: 100%;
  border: 1px solid var(--mc-primary-ultralight);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  margin: 1.5rem 0;
}
.mc-review-faq__item + .mc-review-faq__item {
  border-top: 1px solid var(--mc-primary-ultralight);
}
.mc-review-faq__item > summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-body);
}
.mc-review-faq__item > summary::-webkit-details-marker { display: none; }
.mc-review-faq__item > summary:hover { background: color-mix(in srgb, var(--mc-primary-surface) 50%, transparent); }
.mc-review-faq__chev {
  color: var(--mc-mid-gray);
  margin-left: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.mc-review-faq__item[open] .mc-review-faq__chev { transform: rotate(180deg); }
.mc-review-faq__body {
  padding: 0 1.25rem 1rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mc-body);
}
.mc-review-faq__body p { margin: 0; }

/* ProsConsList */
.mc-pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
@media (min-width: 768px) {
  .mc-pros-cons { grid-template-columns: 1fr 1fr; }
}
.mc-pros-cons__panel {
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid;
}
.mc-pros-cons__panel--pros {
  background: var(--mc-success-bg);
  border-color: color-mix(in srgb, var(--mc-success) 40%, transparent);
}
.mc-pros-cons__panel--cons {
  background: var(--mc-error-bg);
  border-color: color-mix(in srgb, var(--mc-error) 40%, transparent);
}
.mc-pros-cons__title {
  font-family: var(--mc-font-heading);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mc-pros-cons__panel--pros .mc-pros-cons__title { color: var(--mc-success-text); }
.mc-pros-cons__panel--cons .mc-pros-cons__title { color: var(--mc-error-text); }
/* New shortcode markup uses `.mc-pros-cons__items` + `.__item` + `.__marker`
   + `.__text` (a flat <div>/<span> structure). The marker is an inline
   `+` or `−` glyph, no bullet, no underline. The legacy `<ul>` markup
   below this block continues to work for any reviews still rendering
   pros/cons via the block pattern (block-patterns/pros-cons.php). */
.mc-pros-cons__items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mc-pros-cons__item {
  display: flex;
  gap: 0.5rem;
  font-size: 13px;
  line-height: 1.5;
  align-items: baseline;
}
.mc-pros-cons__marker {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.mc-pros-cons__panel--pros .mc-pros-cons__marker,
.mc-pros-cons__panel--pros .mc-pros-cons__text  { color: var(--mc-success-text); }
.mc-pros-cons__panel--cons .mc-pros-cons__marker,
.mc-pros-cons__panel--cons .mc-pros-cons__text  { color: var(--mc-error-text); }
.mc-pros-cons__text { min-width: 0; }

/* Legacy <ul class="mc-pros-cons__list"> from the block pattern. */
.mc-pros-cons__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each row is one inline run with a hanging +/− bullet.
   `display: flex` here was a bug — it turned any child element (e.g. a
   `<strong>` in legacy `<li><strong>Title</strong>: description` markup)
   into a separate flex item, producing a fake "two-column table" effect.
   Position the bullet absolutely so the body text wraps naturally. */
.mc-pros-cons__list li {
  position: relative;
  padding-left: 1.5em;
  font-size: 13px;
  line-height: 1.5;
}
.mc-pros-cons__list li + li { margin-top: 0.375rem; }
.mc-pros-cons__panel--pros li { color: var(--mc-success-text); }
.mc-pros-cons__panel--cons li { color: var(--mc-error-text); }
.mc-pros-cons__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mc-font-heading);
  font-weight: 700;
}
.mc-pros-cons__panel--pros li::before { content: "+"; color: var(--mc-success-text); }
.mc-pros-cons__panel--cons li::before { content: "−"; color: var(--mc-error-text); }
/* Legacy reviews authored as `<li><strong>Title</strong>: description`
   render that emphasis inside the row without breaking the layout. */
.mc-pros-cons__list li strong {
  font-weight: 600;
  color: inherit;
}

/* Pullquote */
.mc-pullquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.75rem;
  border-left: 4px solid var(--mc-accent);
  background: var(--mc-accent-surface);
  border-radius: 0 12px 12px 0;
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  color: var(--mc-accent);
}
.mc-pullquote p { margin: 0; }

/* ModelLink — inline cross-reference */
.mc-model-link {
  font-family: var(--mc-font-heading);
  color: var(--mc-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--mc-accent) 30%, transparent);
  transition: border-color 0.15s var(--ease);
}
.mc-model-link:hover { border-bottom-color: var(--mc-accent); }

/* KeyNumberCallout */
.mc-key-number {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--mc-primary-surface);
  border: 1px solid var(--mc-accent-border);
  border-left: 4px solid var(--mc-accent);
  border-radius: 10px;
  margin: 1.5rem 0;
}
@media (min-width: 768px) {
  .mc-key-number { max-width: 520px; margin-inline: auto; }
}
.mc-key-number--with-context { align-items: flex-start; }
.mc-key-number__stat {
  font-family: var(--mc-font-heading);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mc-primary);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.mc-key-number__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.mc-key-number__label {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0;
}
.mc-key-number__context {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mc-secondary-text);
  margin: 0;
}

/* QuickAnswerCallout */
.mc-quick-answer {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--mc-primary-surface);
  border: 1px solid var(--mc-accent-border);
  border-left: 4px solid var(--mc-accent);
  border-radius: 10px;
  margin: 1.5rem 0;
}
.mc-quick-answer__eyebrow {
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin: 0 0 0.5rem;
}
.mc-quick-answer__question {
  font-family: var(--mc-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mc-primary);
  margin: 0 0 0.5rem;
}
.mc-quick-answer__answer {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mc-secondary-text);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   11. Phase 3h — JS-driven state styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Logged-in state (auth.js toggles .mcg-logged-in on body) ─── */
.mcg-logged-in .mcg-action-auth { display: none; }
/* `.mcg-user-menu` placeholder — populated by a future phase when
   the actual avatar/dropdown markup ships. Until then the slot is
   hidden by default and only revealed when the body is logged-in. */
.mcg-user-menu { display: none; }
.mcg-logged-in .mcg-user-menu { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ── Compact platform rows (model-status.js renders these) ──────
 * One row per nickname. Layout: [hex badge] [nickname] · · · [site].
 * The whole row is a single anchor → model's profile on the camsite.
 * Tight vertical spacing; no row dividers.
 * ──────────────────────────────────────────────────────────────── */
.mcg-platform-row { margin: 0; padding: 0; }
.mcg-platform-row-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-family: var(--mc-font-heading);
  font-size: 13px;
  line-height: 1.3;
}
a.mcg-platform-row-inner:hover .mcg-platform-row-nick { text-decoration: underline; }
.mcg-platform-row--inactive .mcg-platform-row-inner { opacity: 0.6; }

/* Left group: badge + nickname. Grows + shrinks; nickname truncates. */
.mcg-platform-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Right group: site name + live dot. Stays one line, never wraps. */
.mcg-platform-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mcg-platform-row-badge {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.mcg-platform-row-hex { display: block; }

.mcg-platform-row-nick {
  font-weight: 500;
  color: var(--mc-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
a.mcg-platform-row-inner:hover .mcg-platform-row-nick { color: var(--mc-accent-hover); }
.mcg-platform-row--inactive .mcg-platform-row-nick { color: var(--mc-mid-gray); }

.mcg-platform-row-site {
  font-weight: 400;
  font-size: 13px;
  color: var(--mc-secondary-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Live indicator — pulsing green dot to the right of the site name.
   Only painted when the row has [data-mcg-status="live"]. */
.mcg-platform-row-live {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mc-online);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-online) 25%, transparent);
}
.mcg-platform-row[data-mcg-status="live"] .mcg-platform-row-live {
  display: inline-block;
  animation: mcg-platform-row-pulse 1.6s ease-in-out infinite;
}
@keyframes mcg-platform-row-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .mcg-platform-row[data-mcg-status="live"] .mcg-platform-row-live { animation: none; }
}

/* Skeleton rows shown in PHP before JS replaces them. */
.mcg-platform-row--skeleton .mcg-platform-row-badge,
.mcg-platform-row--skeleton .mcg-platform-row-nick,
.mcg-platform-row--skeleton .mcg-platform-row-site {
  background: var(--mc-light-gray);
  border-radius: 4px;
  color: transparent;
}
.mcg-platform-row--skeleton .mcg-platform-row-badge { border-radius: 6px; }
.mcg-platform-row--skeleton .mcg-platform-row-nick { width: 90px; height: 12px; }
.mcg-platform-row--skeleton .mcg-platform-row-site { width: 64px; height: 12px; }

.mcg-platform-row--empty {
  font-size: 13px;
  color: var(--mc-mid-gray);
  font-style: italic;
  padding: 4px 0;
}

/* ── Aggregate status badge ([data-mcg-model-status]) ─────────── */
[data-mcg-model-status][data-state] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mc-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--mc-border-gray);
}
[data-mcg-model-status][data-state="live"] {
  color: var(--mc-online-text);
  background: var(--mc-online-bg);
  border-color: color-mix(in srgb, var(--mc-online) 50%, transparent);
}
[data-mcg-model-status][data-state="offline"] {
  color: var(--mc-secondary-text);
  background: var(--mc-light-gray);
}
[data-mcg-model-status][data-state="unknown"] { display: none; }

/* ── TOC active link (review.js scroll-spy) ──────────────────── */
.mcg-review-toc-list a.is-active {
  color: var(--mc-accent);
  font-weight: 600;
}

/* ── Image lightbox (review.js) ──────────────────────────────── */
.mcg-prose img.mcg-lightbox-trigger,
.blog-prose img.mcg-lightbox-trigger {
  cursor: zoom-in;
}
body.mcg-lightbox-open { overflow: hidden; }
/* Top padding is deliberately larger than the other three sides: it
   reserves the gutter the close button sits in, so the button never
   overlaps the image regardless of aspect ratio. */
.mcg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--mc-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem 1.5rem;
  animation: mcg-lightbox-fade 0.15s var(--ease, ease-out);
}
.mcg-lightbox[hidden] { display: none; }
.mcg-lightbox-inner {
  position: relative;
  max-width: min(1400px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Explicit calc rather than a percentage — the flex parent has no
   definite height, so max-height:100% would not resolve. 5.5rem is the
   overlay's vertical padding (4rem + 1.5rem). dvh first so mobile
   address-bar chrome doesn't clip the image. */
.mcg-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 5.5rem);
  max-height: calc(100dvh - 5.5rem);
  width: auto;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
/* Fixed, not absolute. Absolute anchored it to .mcg-lightbox-inner at
   top:-2.5rem, which put it above the image — off-screen once the image
   was tall enough to fill the overlay, and floating mid-screen next to
   narrow portrait images. .mcg-lightbox animates opacity only, so it
   creates no containing block and `fixed` resolves against the viewport. */
.mcg-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No font-size / line-height: the glyph is an inline SVG (review.js),
     so there is no line box or baseline to fight — flex centring lands
     it exactly. `display:block` stops the SVG sitting on the parent's
     text baseline and adding descender space below it. */
  padding: 0;
  transition: background 0.15s var(--ease, ease);
}
.mcg-lightbox-close svg { display: block; }
.mcg-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
@keyframes mcg-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mcg-lightbox { animation: none; }
}



/* ═══════════════════════════════════════════════════════════════
   Round 3 — review-card verdict badge, video grid, photo grid.
   ═══════════════════════════════════════════════════════════════ */

/* ── Verdict badge overlay on .mcg-review-card-image ──────────── */
.mcg-card-verdict {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--mc-font-heading);
  line-height: 1;
}
.dark .mcg-card-verdict { background: rgba(26, 22, 37, 0.94); }
.mcg-card-verdict-tile {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: var(--mc-warning);
}
.mcg-card-verdict--recommended .mcg-card-verdict-tile { background: var(--mc-success); }
.mcg-card-verdict--mixed       .mcg-card-verdict-tile { background: var(--mc-warning); }
.mcg-card-verdict--caution     .mcg-card-verdict-tile { background: var(--mc-error); }
.mcg-card-verdict-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.mcg-card-verdict-eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-warning-text);
}
.mcg-card-verdict-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mc-warning-text);
}
.mcg-card-verdict--recommended .mcg-card-verdict-eyebrow,
.mcg-card-verdict--recommended .mcg-card-verdict-label,
.mcg-card-verdict--recommended .mcg-card-verdict-score { color: var(--mc-success-text); }
.mcg-card-verdict--caution .mcg-card-verdict-eyebrow,
.mcg-card-verdict--caution .mcg-card-verdict-label,
.mcg-card-verdict--caution .mcg-card-verdict-score { color: var(--mc-error-text); }
.mcg-card-verdict-score {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
  flex-shrink: 0;
  color: var(--mc-warning-text);
}
/* The .mcg-review-card-image anchor must position-relative for the
   absolute overlay to anchor inside it. */
.mcg-review-card-image { position: relative; display: block; }

/* ── Videos section ──────────────────────────────────────────── */
.mcg-review-videos-section { margin: 2.5rem 0; scroll-margin-top: calc(57px + 56px + 1rem); }
.mcg-section-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  margin-left: 0.375rem;
  border-radius: 999px;
  background: var(--mc-primary-ultralight);
  color: var(--mc-primary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
}

/* ── Video gallery: one wide stage + thumbnail strip ─────────── */
.mcg-video-gallery { display: block; }

/* Stage is the full width of the prose column, 16:9. */
.mcg-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.mcg-video-stage iframe,
.mcg-video-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

/* Strip. Horizontal scroll on narrow viewports, wraps once there is room.
   scrollbar hidden the same way the DS hides .static-mobile-pills. */
.mcg-video-strip {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0 0 0.25rem;
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mcg-video-strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .mcg-video-strip { flex-wrap: wrap; overflow-x: visible; }
}
.mcg-video-strip-item { flex: 0 0 auto; margin: 0; }

.mcg-video-thumb {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  /* Gradient stands in for the ~47% of rows with no poster, matching the
     DS InlineVideoEmbed's documented "dark gradient placeholder". */
  background: linear-gradient(135deg, #2A2237 0%, #1A1625 100%);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.mcg-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
/* review.js adds this when a poster 404s — Bunny thumbnails are unreliable. */
.mcg-video-thumb.has-no-poster img { display: none; }

.mcg-video-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.15s var(--ease);
}
.mcg-video-thumb-play svg { display: block; }

.mcg-video-thumb-index {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.mcg-video-thumb:hover { transform: translateY(-1px); }
.mcg-video-thumb:hover .mcg-video-thumb-play { color: #fff; }
.mcg-video-thumb:focus-visible {
  outline: none;
  box-shadow: var(--ring-primary);
}
.mcg-video-thumb.is-active {
  border-color: var(--mc-accent);
  cursor: default;
}
.mcg-video-thumb.is-active:hover { transform: none; }
.mcg-video-thumb.is-active .mcg-video-thumb-play { color: var(--mc-accent); }

@media (prefers-reduced-motion: reduce) {
  .mcg-video-thumb,
  .mcg-video-thumb:hover { transition: none; transform: none; }
}

.mcg-video-noscript {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.875rem;
}


/* ── Photos section ──────────────────────────────────────────── */
.mcg-review-photos-section { margin: 2.5rem 0; scroll-margin-top: calc(57px + 56px + 1rem); }
.mcg-review-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .mcg-review-photos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .mcg-review-photos-grid { grid-template-columns: repeat(4, 1fr); }
}
.mcg-review-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mc-light-gray);
}
.mcg-review-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scroll-margin for the FAQ section anchor — same offset as the
   `scroll-padding-top` on <html>. Keeps the section title visible
   under the sticky sub-nav after a hash jump. */
[id="review-faq"] { scroll-margin-top: calc(57px + 56px + 1rem); }