/* ═══ MOREHOUSE ALUMNI — PAGE LAYOUTS ═══
   2026 Premium: Every section has visual energy. Nothing is flat. */

/* ─── HERO SECTION — brand gradient + animated overlay ─── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding-top: var(--nav-height);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 10, 11, 0.82) 0%, rgba(58, 15, 25, 0.56) 52%, rgba(13, 10, 11, 0.32) 100%),
    url('../assets/images/chicago-skyline.png') center 46% / cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 10, 11, 0.5) 0%, rgba(13, 10, 11, 0.3) 40%, rgba(13, 10, 11, 0.85) 100%),
    radial-gradient(ellipse at 20% 50%, rgba(134, 38, 51, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(197, 165, 81, 0.2) 0%, transparent 50%);
  background-size: 200% 200%;
  /* Dim 3: ambient gradient drift off by default (--duration-ambient: 0ms).
     The overlay still paints frame 0 (the full brand tint); it just stops
     drifting, which is calmer for older alumni and cheaper on older devices. */
  animation: heroGradientShift var(--duration-ambient) ease-in-out infinite;
}
@keyframes heroGradientShift {
  0% { background-position: 0% 50%; }
  33% { background-position: 100% 30%; }
  66% { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}
.hero__glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 38, 51, 0.35) 0%, transparent 70%);
  top: 15%; left: 5%; filter: blur(100px); pointer-events: none; z-index: 0;
}
.hero__glow--gold {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 165, 81, 0.2) 0%, transparent 70%);
  bottom: 10%; right: 10%; filter: blur(80px); pointer-events: none; z-index: 0;
}
.hero__content { position: relative; z-index: var(--z-base); max-width: var(--container-lg); }
.hero__eyebrow {
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-secondary); letter-spacing: var(--tracking-display);
  text-transform: uppercase; margin-bottom: var(--space-lg);
  display: flex; align-items: center; gap: var(--space-sm);
}
.hero__eyebrow::before {
  content: ''; width: 40px; height: 2px; background: var(--color-secondary);
}
.hero__title {
  font-family: var(--font-display); font-size: var(--text-hero);
  line-height: var(--leading-none); letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary); text-transform: uppercase;
  margin-bottom: var(--space-xl);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}
.hero__title-accent { color: var(--color-secondary); }
.hero__desc {
  font-size: var(--text-lg); color: var(--color-text-secondary);
  line-height: var(--leading-normal); max-width: 55ch;
  margin-bottom: var(--space-2xl);
}
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__stats {
  display: flex; gap: var(--space-3xl); margin-top: var(--space-4xl);
  padding-top: var(--space-2xl); border-top: 1px solid rgba(255,255,255,0.1);
}

/* ─── SECTION — with visual energy ─── */
.section { padding: var(--space-section) 0; position: relative; overflow: hidden; }

/* Dark sections get ambient floating orbs + noise texture */
.section--dark {
  background: var(--surface-raised);
  position: relative;
}
.section--dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(134, 38, 51, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(197, 165, 81, 0.06) 0%, transparent 50%);
  /* Ambient section glow — off by default (holds opacity 0.5). */
  animation: sectionAmbient var(--duration-ambient) ease-in-out infinite alternate;
  opacity: 0.5;
}
@keyframes sectionAmbient {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
/* Floating accent orb for dark sections */
.section--dark::after {
  content: ''; position: absolute; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none; opacity: 0.12;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  right: -100px; top: -100px; filter: blur(60px);
  /* Floating accent orb — ambient, off by default (holds its origin position). */
  animation: floatOrb var(--duration-ambient) ease-in-out infinite alternate;
}
@keyframes floatOrb {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-40px, 30px); }
}

.section__header { margin-bottom: var(--space-3xl); position: relative; z-index: 1; }
.section__header--center { text-align: center; }
.section__header--center .section-subheading { margin-left: auto; margin-right: auto; }

/* ─── BENTO GRID ─── */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.bento-hero { grid-column: span 2; }
.bento-accent { grid-column: span 1; }
.bento-wide { grid-column: span 2; }
.bento-full { grid-column: span 3; }

/* ─── EVENT GRID ─── */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-xl); }

/* ─── SPLIT LAYOUT (60/40 asymmetric) ─── */
.split-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-3xl); align-items: start; }

/* ─── SCHOLARSHIP CARDS ─── */
.scholarship-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center;
  transition: transform var(--duration-normal) var(--ease-default), border-color var(--duration-normal);
}
.scholarship-card:hover { transform: translateY(-4px); border-color: var(--color-secondary); }
.scholarship-card__year {
  font-family: var(--font-display); font-size: var(--text-4xl);
  color: var(--color-secondary); line-height: var(--leading-none); margin-bottom: var(--space-sm);
}
.scholarship-card__name {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  margin-bottom: var(--space-xs);
}
.scholarship-card__detail {
  font-size: var(--text-sm); color: var(--color-text-tertiary); line-height: var(--leading-normal);
}

/* ─── DONATION CARD ─── */
.donate-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  border-radius: var(--radius-2xl); padding: var(--space-2xl);
  position: relative; overflow: hidden;
  border: 1px solid rgba(197, 165, 81, 0.2);
}
.donate-card::before {
  content: ''; position: absolute; top: -50%; right: -30%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 165, 81, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.donate-card__title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  color: var(--color-text-primary); margin-bottom: var(--space-sm);
  position: relative;
}
.donate-card__text {
  color: rgba(255, 255, 255, 0.8); font-size: var(--text-sm);
  margin-bottom: var(--space-xl); position: relative; max-width: 40ch;
}
.donate-amounts {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg);
  position: relative;
}
.donate-amount {
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast);
  font-size: var(--text-base);
  /* WCAG 2.2 SC 2.5.5: amount chips are full tap targets. */
  min-height: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center;
}
.donate-amount:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.donate-amount:hover, .donate-amount.active {
  background: var(--color-secondary); color: var(--color-text-inverse);
  border-color: var(--color-secondary);
}

/* ─── MEMBERSHIP CARD ─── */
.membership-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-2xl);
  text-align: center; position: relative; overflow: hidden;
  transition: border-color var(--duration-normal), transform var(--duration-normal);
}
.membership-card:hover { border-color: var(--color-secondary); transform: translateY(-4px); }
.membership-card__price {
  font-family: var(--font-display); font-size: var(--text-5xl);
  color: var(--color-secondary); margin-bottom: var(--space-xs);
}
.membership-card__period {
  font-size: var(--text-sm); color: var(--color-text-tertiary);
  margin-bottom: var(--space-xl);
}
.membership-card__features { list-style: none; text-align: left; margin-bottom: var(--space-xl); }
.membership-card__features li {
  padding: var(--space-sm) 0; font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center; gap: var(--space-sm);
}
.membership-card__features li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary); flex-shrink: 0;
}
.membership-featured { border-color: var(--color-secondary); }
.membership-featured::before {
  content: 'Recommended'; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--color-secondary); color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-lg); font-size: var(--text-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ─── CONTACT SECTION ─── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.contact-info-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  transition: border-color var(--duration-fast);
}
.contact-info-card:hover { border-color: var(--color-border-strong); }
.contact-info-card__label {
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-sm);
}
.contact-info-card__value {
  font-size: var(--text-lg); font-weight: 600; color: var(--color-text-primary);
}

/* ─── EVENT DETAIL ─── */
.event-detail { padding-top: calc(var(--nav-height) + var(--space-3xl)); }
.event-detail__hero { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-2xl); margin-bottom: var(--space-2xl); }
.event-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-bottom: var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); }
.event-detail__meta-item { display: flex; align-items: center; gap: var(--space-sm); }
.event-detail__meta-label { font-size: var(--text-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.event-detail__meta-value { font-family: var(--font-heading); font-weight: 600; }
.event-detail__desc { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); max-width: 65ch; }
.event-detail__attendees { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-xl); border: 1px solid var(--color-border); position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.event-detail__attendee-count { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-secondary); line-height: var(--leading-none); margin-bottom: var(--space-sm); }
.event-detail__attendee-breakdown { display: flex; gap: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border-subtle); }

/* ─── ADMIN PANEL ─── */
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; padding-top: var(--nav-height); }
.admin-sidebar { background: var(--surface-raised); border-right: 1px solid var(--color-border); padding: var(--space-xl); }
.admin-sidebar__link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; transition: background var(--duration-fast), color var(--duration-fast); margin-bottom: var(--space-xs); }
.admin-sidebar__link:hover, .admin-sidebar__link.active { background: var(--color-primary-subtle); color: var(--color-text-primary); }
.admin-content { padding: var(--space-2xl); }
.admin-content__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2xl); }

/* ─── APPROVAL TABLE ─── */
.approval-table { width: 100%; border-collapse: collapse; }
.approval-table th { text-align: left; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.approval-table td { padding: var(--space-md); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); vertical-align: middle; }
.approval-table tr:hover td { background: var(--surface-raised); }
.approval-actions { display: flex; gap: var(--space-sm); }

/* ─── DIRECTORY ─── */
.directory-header { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-2xl); flex-wrap: wrap; }
.directory-search { flex: 1; min-width: 280px; }
.directory-search__input { width: 100%; padding: var(--space-md) var(--space-md) var(--space-md) var(--space-2xl); background: var(--surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-primary); font-size: var(--text-base); }
.directory-search__input:focus { outline: none; border-color: var(--color-secondary); }
.directory-filters { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-md); }

/* ─── KENTE DIVIDER ─── */
.kente-divider { height: 4px; border: none; margin: var(--space-4xl) 0; background: linear-gradient(90deg, var(--kente-gold), var(--kente-green), var(--kente-red), var(--kente-gold)); background-size: 200% 100%; animation: kenteShimmer 6s ease-in-out infinite; border-radius: var(--radius-full); opacity: 0.5; }

/* ─── FOOTER ─── */
.footer { background: var(--surface-raised); border-top: 1px solid var(--color-border); padding: var(--space-4xl) 0 var(--space-2xl); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); }
.footer__col { min-width: 0; }
.footer__brand { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-text-primary); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-md); }
.footer__desc { font-size: var(--text-sm); color: var(--color-text-tertiary); line-height: var(--leading-relaxed); max-width: 35ch; }
.footer__heading { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--color-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-sm); }
.footer__links { display: flex; flex-direction: column; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.footer__item { display: block; min-width: 0; }
/* Dim 3: footer links carry a visible underline (color alone is not a sufficient
   affordance for older/low-vision users) and a 44px tap row. */
.footer__link {
  display: flex; align-items: center; width: 100%; min-height: var(--touch-target);
  padding: var(--space-xs) 0;
  font-size: var(--text-sm); color: var(--color-text-secondary);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}
.footer__link:hover { color: var(--color-text-primary); text-decoration-color: var(--color-secondary); }
.footer__bottom { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); text-align: center; font-size: var(--text-sm); color: var(--color-text-tertiary); }
.footer__bottom a { color: var(--color-text-tertiary); text-decoration: underline; text-underline-offset: 0.2em; }
.footer__bottom a:hover { color: var(--color-text-primary); }

/* ─── MEMBERSHIP DASHBOARD PAGE ─── */
.membership-page {
  padding-top: calc(var(--nav-height) + var(--space-3xl));
  min-height: var(--viewport-full);
  padding-bottom: calc(var(--space-4xl) + var(--safe-area-bottom));
}
.membership-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}
.membership-hero__name {
  font-family: var(--font-display); font-size: var(--text-3xl);
  color: var(--color-text-primary); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; margin-bottom: var(--space-xs);
}
.membership-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; margin-top: var(--space-md);
}
.membership-section { margin-bottom: var(--space-3xl); }
.membership-section__title {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  color: var(--color-text-primary); margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border);
}
/* Invoice history table inside membership page */
.invoice-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-subtle); }
.invoice-row:last-child { border-bottom: none; }
.invoice-row__desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.invoice-row__amount { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }

/* ─── ADMIN DUES PAGE ─── */
.admin-dues-page {
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  min-height: var(--viewport-full);
  padding-bottom: calc(var(--space-3xl) + var(--safe-area-bottom));
}
.admin-dues-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-2xl);
}
.admin-dues-header__title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.admin-dues-filters {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center;
  padding: var(--space-md); background: var(--surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}
.admin-dues-filters .form-label { margin-bottom: 0; white-space: nowrap; }
.admin-dues-filters .form-select { min-width: 140px; padding: var(--space-sm) var(--space-md); }
.admin-dues-summary {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md); margin-bottom: var(--space-2xl);
}
.dues-summary-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
}
.dues-summary-card__number {
  font-family: var(--font-display); font-size: var(--text-4xl);
  color: var(--color-secondary); line-height: var(--leading-none);
}
.dues-summary-card__label {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  margin-top: var(--space-xs);
}
.dues-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.dues-table-wrap .dues-table { margin: 0; }

/* ─── CONTENT HUB PAGE ─── */
.content-hub-page {
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  min-height: var(--viewport-full);
  padding-bottom: calc(var(--space-4xl) + var(--safe-area-bottom));
}
.content-hub-hero {
  text-align: center; padding: var(--space-2xl) 0 var(--space-xl);
}
.content-hub-hero__title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary); margin-bottom: var(--space-sm);
}
.content-hub-hero__desc {
  font-size: var(--text-base); color: var(--color-text-secondary);
  max-width: 56ch; margin: 0 auto; line-height: var(--leading-normal);
}
.content-toolbar {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center;
  padding: var(--space-md); background: var(--surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
}
.content-toolbar .form-label { margin-bottom: 0; white-space: nowrap; font-size: var(--text-sm); }
.content-toolbar .form-select { min-width: 140px; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.content-featured-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg); margin-bottom: var(--space-2xl);
}
.content-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg); margin-bottom: var(--space-xl);
}
.content-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); margin: var(--space-xl) 0;
  flex-wrap: wrap;
}
.content-pagination .btn { min-height: var(--touch-target); }
.provenance-note {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  text-align: center; padding: var(--space-md);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-raised); margin: 0 0 var(--space-2xl);
  line-height: var(--leading-relaxed);
}

/* ─── ADMIN CONTENT QUEUE PAGE ─── */
.admin-content-main {
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  min-height: var(--viewport-full);
  padding-bottom: calc(var(--space-3xl) + var(--safe-area-bottom));
}
.admin-content-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl);
}
.admin-content-header__title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.queue-toolbar {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center;
  padding: var(--space-md); background: var(--surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}
.queue-toolbar .form-label { margin-bottom: 0; white-space: nowrap; font-size: var(--text-sm); }
.queue-toolbar .form-select { min-width: 130px; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.manual-form {
  background: var(--surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-2xl); margin-bottom: var(--space-xl);
}
.manual-form__title {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  margin-bottom: var(--space-md);
}
.manual-form__note {
  font-size: var(--text-sm); color: var(--color-text-tertiary);
  margin-bottom: var(--space-lg); line-height: var(--leading-relaxed);
}
.form-row { margin-bottom: var(--space-lg); }
.form-row .form-label { display: block; margin-bottom: var(--space-sm); }
.char-count { font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: right; margin-top: var(--space-xs); }
.char-count--over { color: var(--color-error); font-weight: 600; }
.form-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
/* Admin content modals — dark themed */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-modal-backdrop);
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-2xl);
  max-width: 480px; width: 90%;
  max-height: 92dvh; overflow-y: auto;
  z-index: var(--z-modal);
}
.modal-box h3 {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  margin-bottom: var(--space-lg);
}
.modal-box label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-sm); color: var(--color-text-secondary); }
.modal-box input, .modal-box textarea {
  width: 100%; padding: var(--space-md); font-size: var(--text-base);
  background: var(--surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}
.modal-box input:focus-visible, .modal-box textarea:focus-visible {
  outline: 2px solid var(--color-border-focus); outline-offset: 1px;
}
.modal-box textarea { min-height: 100px; resize: vertical; }
.modal-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; flex-wrap: wrap; }
/* Toast in admin-content (dark themed) */
#toast-container {
  position: fixed; bottom: calc(var(--space-xl) + var(--safe-area-bottom));
  right: var(--space-xl); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-sm);
  max-width: calc(100vw - var(--space-2xl));
}

/* ─── DIRECTORY PAGE ─── */
.directory-page { padding-top: calc(var(--nav-height) + var(--space-3xl)); min-height: var(--viewport-full); padding-bottom: calc(var(--space-4xl) + var(--safe-area-bottom)); }

/* ─── ADMIN PAGE — sidebar mobile ─── */
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: var(--viewport-full); padding-top: var(--nav-height); }
.admin-sidebar { background: var(--surface-raised); border-right: 1px solid var(--color-border); padding: var(--space-xl); }
.admin-sidebar__link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; transition: background var(--duration-fast), color var(--duration-fast); margin-bottom: var(--space-xs); min-height: var(--touch-target); }
.admin-sidebar__link:hover, .admin-sidebar__link.active { background: var(--color-primary-subtle); color: var(--color-text-primary); }
.admin-sidebar__link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.admin-content { padding: var(--space-2xl); padding-bottom: calc(var(--space-2xl) + var(--safe-area-bottom)); }
.admin-content__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2xl); flex-wrap: wrap; gap: var(--space-md); }

.admin-member-invite {
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
}
.admin-member-invite summary {
  cursor: pointer;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: 700;
}
.admin-member-invite__note {
  max-width: 68ch;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-prose);
}
.admin-member-invite__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
}
.admin-member-invite__form .form-error,
.admin-member-invite__form .btn { align-self: end; }

@media (max-width: 720px) {
  .admin-member-invite__form { grid-template-columns: 1fr; }
}

/* ─── MOBILE ADMIN NAV ─── */
#mobile-admin-nav {
  padding-left: calc(var(--space-md) + var(--safe-area-left));
  padding-right: calc(var(--space-md) + var(--safe-area-right));
}
#mobile-admin-nav .btn { min-height: var(--touch-target); }

/* ═══ RESPONSIVE — MOBILE FIRST (min-width breakpoints) ═══ */

/* xs: 390px baseline — already true because base styles are mobile */

/* sm: 480px */
@media (min-width: 480px) {
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .content-featured-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .admin-dues-summary { grid-template-columns: repeat(2, 1fr); }
}

/* md: 768px */
@media (min-width: 768px) {
  .content-hub-hero__title { font-size: var(--text-4xl); }
  .admin-dues-summary { grid-template-columns: repeat(4, 1fr); }
  .content-toolbar, .queue-toolbar, .admin-dues-filters { flex-wrap: nowrap; }
  .membership-hero__name { font-size: var(--text-4xl); }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .content-hub-hero__title { font-size: var(--text-5xl); }
  .admin-layout { grid-template-columns: 260px 1fr; }
}

/* ═══ OLD MAX-WIDTH OVERRIDES (preserved, now supplemented by min-width above) ═══ */
@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-hero, .bento-full { grid-column: span 2; }
  .split-layout { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
  .footer__col--brand, .footer__col--network { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero { padding-top: var(--nav-height); min-height: var(--viewport-small); }
  .hero__title { font-size: clamp(2.2rem, 9vw, 4.5rem); }
  .hero__stats { flex-direction: column; gap: var(--space-xl); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero, .bento-wide, .bento-full { grid-column: span 1; }
  .event-grid { grid-template-columns: 1fr; }
  .event-detail__hero { height: 250px; }
  .footer { padding: var(--space-2xl) 0 var(--space-xl); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
  .footer__col--brand, .footer__col--network { grid-column: 1 / -1; }
  .footer__brand { font-size: var(--text-2xl); margin-bottom: 0; }
  .footer__heading { margin-bottom: var(--space-xs); }
  .footer__link { font-size: var(--text-base); line-height: var(--leading-snug); }
  .footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-lg); text-align: left; }
  .donate-amounts { gap: var(--space-xs); }
  .donate-amount { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
  /* New page layouts */
  .content-grid { grid-template-columns: 1fr; }
  .content-featured-grid { grid-template-columns: 1fr; }
  .admin-dues-header { flex-direction: column; align-items: flex-start; }
  .admin-content-header { flex-direction: column; align-items: flex-start; }
  .queue-card__header { flex-direction: column; }
  .dues-table-wrap { overflow-x: auto; }
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.8rem, 8vw, 3rem); }
  .stat-block__number { font-size: var(--text-3xl); }
  .content-toolbar { flex-direction: column; align-items: flex-start; }
  .queue-toolbar { flex-direction: column; align-items: flex-start; }
  .admin-dues-filters { flex-direction: column; align-items: flex-start; }
  /* Invoice row collapses on tiny screens */
  .invoice-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .modal-box { padding: var(--space-xl); }
  /* Toast anchors above safe-area */
  #toast-container { right: var(--space-sm); bottom: calc(var(--space-lg) + var(--safe-area-bottom)); }
  /* Nav safe-area */
  .nav { padding-left: var(--safe-area-left); padding-right: var(--safe-area-right); }
}