/* Shared landing-page styles for character galleries (.cg-page) and member-benefits
 * (.mbenefits) pages, used on BOTH llitd.com (meridian) and elarakincaid.com (inkwell).
 *
 * Single source of truth: this file is pushed to cdn.llitd.com/scripts/gallery.css by
 * scripts/deploy/cdn_scripts_push.py and linked from each theme's default.hbs. Pages
 * carry ONLY their per-series hero gradient, via the --cg-hero-bg / --mb-hero-bg custom
 * property on the hero element:
 *
 *     <div class="cg-page__hero" style="--cg-hero-bg: linear-gradient(135deg,#0a1628,#4a90e2)">
 *
 * The hero is an intentional always-dark dramatic banner (white text on a branded dark
 * gradient) in BOTH light and dark mode — the same philosophy as the brand-accent CTAs.
 * The body/cards adapt to the theme through the --text/--bg-alt/--accent/--border tokens
 * (with light fallbacks so the page still renders if a theme omits a token).
 *
 * Replaces the per-page <style> block that was previously duplicated across 7 pages.
 */

/* ---- character gallery (.cg-page) -------------------------------------- */
.cg-page { font-family: var(--font-serif, Georgia, serif); color: var(--text, #0f172a); }
.cg-page__hero { background: var(--cg-hero-bg, linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)); padding: 4rem 1.5rem 3rem; color: #fff; text-align: center; margin: 0 -2rem 2rem; border-radius: 0 0 16px 16px; }
/* Force every hero descendant white: the heading (h1) otherwise picks up the
   theme's flipping heading color (near-black in light mode) and vanishes on the
   dark gradient. The hero is an always-dark banner, so white text is correct in
   both modes; !important beats the theme's (non-important) heading color rule. */
.cg-page__hero, .cg-page__hero * { color: #fff !important; }
.cg-page__hero-inner { max-width: 44rem; margin: 0 auto; }
.cg-page__eyebrow { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; opacity: .85; margin-bottom: 1rem; font-family: var(--font-sans, system-ui, sans-serif); }
.cg-page__title { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; font-weight: 800; line-height: 1.1; }
.cg-page__tagline { font-size: 1.25rem; font-style: italic; opacity: .92; max-width: 36rem; margin: 0 auto; line-height: 1.5; }
.cg-page__body { max-width: 60rem; margin: 0 auto; padding: 1rem 1.5rem; }
.cg-page__intro { font-size: 1.1rem; line-height: 1.75; margin: 0 0 3rem; max-width: 44rem; }
.cg-page__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 0 0 4rem; }
@media (min-width: 720px) { .cg-page__grid { grid-template-columns: 1fr 1fr; } }
.cg-card { background: var(--bg-alt, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.cg-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.cg-card__portrait { aspect-ratio: 1 / 1; overflow: hidden; background: #1a1a2e; }
.cg-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.cg-card__role { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, var(--meridian-primary, #B61CFF)); font-weight: 700; font-family: var(--font-sans, system-ui, sans-serif); margin-bottom: .25rem; }
.cg-card__name { font-size: 1.25rem; margin: 0 0 .25rem; font-weight: 700; line-height: 1.2; }
.cg-card__meta { font-size: .85rem; color: var(--text-muted, #64748b); margin-bottom: .65rem; font-style: italic; }
.cg-card__bio { font-size: .95rem; line-height: 1.6; color: var(--text-muted, #475569); margin: 0; }
.cg-page__cross { background: var(--bg-alt, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 2.5rem 1.75rem; text-align: center; margin-top: 2rem; }
.cg-page__cross-title { font-size: 1.4rem; margin: 0 0 .5rem; font-weight: 700; }
.cg-page__cross-text { font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem; color: var(--text-muted, #64748b); }
.cg-page__cross-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.cg-btn { display: inline-block; padding: .85rem 1.65rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .95rem; transition: opacity .2s ease, transform .2s ease; font-family: var(--font-sans, system-ui, sans-serif); }
.cg-btn--primary { background: var(--accent, var(--meridian-primary, #B61CFF)); color: #fff; }
.cg-btn--ghost { background: transparent; color: var(--accent, var(--meridian-primary, #B61CFF)); border: 2px solid var(--accent, var(--meridian-primary, #B61CFF)); }
.cg-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ---- member benefits (.mbenefits) -------------------------------------- */
.mbenefits { font-family: var(--font-serif, Georgia, serif); color: var(--text, #0f172a); }
.mbenefits__hero { background: var(--mb-hero-bg, linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)); padding: 4rem 1.5rem 3rem; color: #fff; text-align: center; margin: 0 -2rem 2rem; border-radius: 0 0 16px 16px; }
/* See .cg-page__hero note above — force hero text white in both themes. */
.mbenefits__hero, .mbenefits__hero * { color: #fff !important; }
.mbenefits__hero-inner { max-width: 44rem; margin: 0 auto; }
.mbenefits__eyebrow { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; opacity: .85; margin-bottom: 1rem; font-family: var(--font-sans, system-ui, sans-serif); }
.mbenefits__title { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1rem; font-weight: 800; line-height: 1.1; }
.mbenefits__tagline { font-size: 1.2rem; font-style: italic; opacity: .92; max-width: 38rem; margin: 0 auto; line-height: 1.5; }
.mbenefits__body { max-width: 56rem; margin: 0 auto; padding: 1rem 1.5rem; }
.mbenefits__section-title { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 .5rem; }
.mbenefits__section-lead { color: var(--text-muted, #64748b); font-size: 1rem; margin: 0 0 1.5rem; line-height: 1.6; }
.mbenefits__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 2rem; }
@media (min-width: 640px) { .mbenefits__grid { grid-template-columns: 1fr 1fr; } }
.mbenefits__card { display: block; background: var(--bg-alt, #f8fafc); padding: 1.5rem 1.75rem; border-radius: 12px; border: 1px solid var(--border, #e2e8f0); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mbenefits__card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); border-color: var(--accent, var(--meridian-primary, #B61CFF)); }
.mbenefits__card-eyebrow { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent, var(--meridian-primary, #B61CFF)); font-weight: 700; font-family: var(--font-sans, system-ui, sans-serif); margin-bottom: .35rem; }
.mbenefits__card-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.mbenefits__card-desc { font-size: .9rem; line-height: 1.55; color: var(--text-muted, #64748b); margin: 0 0 .75rem; }
.mbenefits__card-cta { font-size: .85rem; font-weight: 700; color: var(--accent, var(--meridian-primary, #B61CFF)); font-family: var(--font-sans, system-ui, sans-serif); }
.mbenefits__rows { display: grid; gap: 1rem; margin: 0 0 2rem; }
.mbenefits__row { display: flex; gap: 1rem; align-items: flex-start; background: var(--bg-alt, #f8fafc); padding: 1.25rem 1.5rem; border-radius: 10px; border: 1px solid var(--border, #e2e8f0); }
.mbenefits__row-icon { font-size: 1.6rem; color: var(--accent, var(--meridian-primary, #B61CFF)); line-height: 1; flex: 0 0 auto; }
.mbenefits__row-body h4 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; }
.mbenefits__row-body p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-muted, #64748b); }
.mbenefits__cta { text-align: center; padding: 2.5rem 1rem; background: var(--bg-alt, #f8fafc); border-radius: 14px; border: 1px solid var(--border, #e2e8f0); margin-top: 2rem; }
.mbenefits__cta-text { font-size: 1rem; line-height: 1.5; color: var(--text-muted, #64748b); margin: 0 0 1.25rem; }
.mbenefits__btn { display: inline-block; padding: .9rem 2rem; border-radius: 999px; background: var(--accent, var(--meridian-primary, #B61CFF)); color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem; font-family: var(--font-sans, system-ui, sans-serif); }
.mbenefits__btn:hover { opacity: .9; }
.mbenefits__cta-note { margin: 1rem 0 0; font-size: .9rem; color: var(--text-muted, #64748b); }
.mbenefits__cta-note a { color: var(--accent, var(--meridian-primary, #B61CFF)); text-decoration: none; }