/* styles.css — Kappa Alpha Psi (Roseville Alumni Chapter)
   ✅ FULLY MERGED / CLEANED + MOBILE-RESPONSIVE HARDENED
   - Single source of truth (duplicates removed / merged)
   - Mobile baseline guards (no weird zoom/overflow)
   - Navbar height is variable-driven (no calc mismatches)
   - Nav menu uses dynamic viewport height (100dvh) for mobile address-bar behavior
   - [hidden] always wins (prevents stuck-open modals)
   - Cropper modal stays global (.modal), founders modal stays SCOPED
   - Upload manager, leaders page, members/admin styles included
*/

/* =========================
   Theme + Global Baseline
========================= */
:root {
  --kap-red: #852222;
  --kap-gold: #f1c232;
  --kap-black: #111;
  --kap-white: #ffffff;
  --kap-gray: #f4f4f4;

  /* ✅ single source of truth for navbar height */
  --nav-h: 88px;
}

@media (max-width: 520px) {
  :root {
    --nav-h: 82px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ✅ Mobile baseline guards */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--kap-white);
  color: var(--kap-black);
  position: relative;
  min-height: 100vh;

  /* ✅ Offset content so it doesn't sit under fixed navbar */
  padding-top: var(--nav-h);

  /* ✅ Prevent 1px horizontal scroll from grids/padding */
  overflow-x: hidden;
}

/* ✅ Make the HTML hidden attribute ALWAYS win (prevents modal stuck open) */
[hidden] {
  display: none !important;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid rgba(241, 194, 50, 0.85);
  outline-offset: 2px;
}

/* =========================
   Full-page background image
========================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("./img/hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
}

/* Disable default image background on home page */
body.home-page::before {
  display: none;
}

/* =========================
   Home background video
========================= */
.main-bg {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  padding: 2rem 0 4rem;
}

.main-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.main-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.42),
      rgba(0, 0, 0, 0.34)
    );
  z-index: 1;
  pointer-events: none;
}

/* Keep homepage content readable over video */
.home-page .main-logo {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
}

.home-page .card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

/* =========================
   Navbar (Hamburger always)
========================= */
.navbar {
  background: var(--kap-red);
  color: white;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.nav-brand img {
  height: 64px;
  display: block;
}

/* Top bar actions next to hamburger */
.nav-top-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-top-link {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);

  /* ✅ tap target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-top-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.nav-top-link:active {
  background: rgba(255, 255, 255, 0.18);
}

/* Burger */
.nav-burger {
  width: 48px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 0 6px;

  /* ✅ tap target */
  min-height: 44px;
}

.nav-burger span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 999px;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.nav-burger.is-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.nav-burger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-burger.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Dropdown menu panel (sits under the fixed navbar) */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  z-index: 999;

  /* animation-friendly open/close */
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}

/* ✅ Open state: use dynamic viewport height (handles mobile URL bar) */
.nav-menu.is-open {
  max-height: calc(100dvh - var(--nav-h));
}

/* ✅ Inner container scrolls when list is long */
.nav-menu-inner {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0 1rem;

  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.nav-menu-inner a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;

  /* ✅ tap target */
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-menu-inner a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-menu-inner a:active {
  background: rgba(255, 255, 255, 0.14);
}

/* Overlay for click-outside */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 900;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Hero / Main
========================= */
.hero img {
  width: 100%;
  display: block;
}

.main-logo-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}

.main-logo {
  width: min(320px, 92%);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12));
}

.container {
  width: min(1100px, 90%);
  margin: auto;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.card {
  background: white;
  border-top: 6px solid var(--kap-red);
  padding: 1.75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.card h2 {
  font-family: "Playfair Display", serif;
  margin-bottom: 1rem;
}

.placeholder {
  background: var(--kap-gray);
  padding: 1.25rem;
  text-align: center;
  color: #666;
}

/* =========================
   Index feeds (Announcements + Events)
========================= */
.feed {
  display: grid;
  gap: 1rem;
}

.feed-empty {
  background: var(--kap-gray);
  padding: 1rem;
  border-radius: 14px;
  text-align: center;
  color: #555;
}

.feed-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.96);
}

.feed-item-title {
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.feed-image {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0 0.75rem;
  background: #fff;
}

.feed-body {
  color: #222;
  line-height: 1.6;
}

.feed-body p {
  margin: 0.5rem 0;
}

.feed-body ul,
.feed-body ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}

.feed-body a {
  color: var(--kap-red);
  font-weight: 800;
}

.event-meta {
  display: grid;
  gap: 0.35rem;
  color: #222;
}

/* =========================
   Footer
========================= */
.footer {
  background: var(--kap-black);
  color: white;
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

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

.footer-logo {
  width: 140px;
  margin-bottom: 1rem;
}

.footer-icons a {
  display: inline-block;
  text-decoration: none;
  border: none;
  outline: none;
}

.footer-icons img {
  width: 70px;
  margin: 0.4rem;
  background: var(--kap-black);
  padding: 6px;
  display: block;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
}

.footer-bottom a {
  color: var(--kap-gold);
  text-decoration: none;
}

/* =========================
   Register / Forms
========================= */
.page {
  padding: 3rem 0 4rem;
}

.form-shell {
  width: min(820px, 92%);
}

.page-head {
  margin-bottom: 1.25rem;
  text-align: center;
}

.page-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin-bottom: 0.35rem;
}

.page-subtitle {
  color: #444;
}

.form-card {
  background: rgba(255, 255, 255, 0.96);
  border-top: 6px solid var(--kap-red);
  padding: 1.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.form-section + .form-section {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  margin-top: 0.35rem;
}

.field input,
.field select {
  width: 100%;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  outline: none;
  background: #fff;
}

.field input:focus,
.field select:focus {
  border-color: rgba(181, 18, 27, 0.55);
  box-shadow: 0 0 0 4px rgba(181, 18, 27, 0.12);
}

.hint {
  display: block;
  margin-top: 0.35rem;
  color: #666;
  font-size: 0.85rem;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 1rem;
  padding: 0.5rem 0.25rem;
  background: rgba(244, 244, 244, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.checkbox-grid .check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.2;
  cursor: pointer;
  font-weight: 500;
}

.checkbox-grid .check input[type="checkbox"] {
  accent-color: var(--kap-red);
  width: 17px;
  height: 17px;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  align-items: center;
}

/* =========================
   Choice Group (Radios / Checks)
========================= */
.choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem 0.9rem;
  padding: 0.75rem;
  background: rgba(244, 244, 244, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.15;

  /* Prevent weird spacing */
  min-height: 44px;
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  margin: 0;                 /* ✅ kills default margin */
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--kap-red);
}

.choice span {
  display: inline-block;
}

/* Optional: highlight when chosen */
.choice:has(input:checked) {
  border-color: rgba(181, 18, 27, 0.35);
  box-shadow: 0 0 0 4px rgba(181, 18, 27, 0.10);
}

/* Mobile: make them full width for easy tap */
@media (max-width: 520px) {
  .choice-group {
    grid-template-columns: 1fr;
  }
}

/* ✅ Tight radio spacing override (fixes "spread apart") */
.checkbox-grid.radio-tight .check{
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important; /* prevents space-between layouts */
  gap: 8px !important;
}

.checkbox-grid.radio-tight .check input[type="radio"]{
  margin: 0 !important;     /* kills browser default margins */
  flex: 0 0 auto !important;
  width: 18px;
  height: 18px;
  accent-color: var(--kap-red);
}

.checkbox-grid.radio-tight .check span{
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;  /* stops span from stretching away */
  display: inline !important;
}

/* ✅ Yes/No radio row — hard override to stop “spread apart” */
.checkbox-grid.yn {
  display: flex !important;          /* overrides grid layouts */
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Each option becomes a tight pill */
.checkbox-grid.yn .check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* kills space-between */
  gap: 10px !important;

  width: auto !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Force radio + text to stay together even if something adds auto margins */
.checkbox-grid.yn .check input[type="radio"] {
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  accent-color: var(--kap-red) !important;
}

.checkbox-grid.yn .check span {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  text-align: left !important;
}

/* Mobile: stack full width */
@media (max-width: 520px) {
  .checkbox-grid.yn .check {
    width: 100% !important;
  }
}


.btn-primary {
  width: min(420px, 100%);
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 0;
  background: var(--kap-red);
  color: #fff;
  font-weight: 700;
  cursor: pointer;

  /* ✅ tap target */
  min-height: 44px;
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-link {
  color: var(--kap-black);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

.form-status {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
  min-height: 1.25rem;
}

.form-status[data-type="error"] {
  color: #b5121b;
}
.form-status[data-type="success"] {
  color: #0b6b2f;
}

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

/* =========================
   Profile
========================= */
.profile-shell {
  width: min(980px, 92%);
}

.profile-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.profile-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.muted {
  color: #555;
  margin-top: 0.25rem;
}

.divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 1.25rem 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.detail-full {
  grid-column: 1 / -1;
}

.detail .label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* ✅ long values wrap nicely */
.detail .value {
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
}

.panel {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.panel-title {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.panel-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn-small {
  padding: 0.65rem 0.95rem;
  width: auto;
  min-width: 160px;

  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--kap-red);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;

  /* ✅ tap target */
  min-height: 44px;
}

.btn-small:hover {
  background: rgba(0, 0, 0, 0.03);
}

.btn-small.danger {
  border-color: rgba(181, 18, 27, 0.35);
  color: var(--kap-white);
}

.btn-outline {
  border-radius: 999px;
  border: 2px solid var(--kap-red);
  background: transparent;
  color: var(--kap-red);
  font-weight: 800;
  cursor: pointer;

  /* ✅ tap target */
  min-height: 44px;
  padding: 0.65rem 0.95rem;
}

.btn-ghost {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: var(--kap-black);
  font-weight: 700;
  cursor: pointer;

  /* ✅ tap target */
  min-height: 44px;
  padding: 0.65rem 0.95rem;
}

/* Profile photo card layout */
.photo-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  align-items: center;
}

.photo-preview {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

@media (max-width: 720px) {
  .profile-top {
    flex-direction: column;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .btn-small {
    width: 100%;
    min-width: unset;
  }
}

@media (max-width: 520px) {
  .photo-row {
    grid-template-columns: 1fr;
  }
  .photo-preview {
    width: 140px;
    height: 140px;
  }
}

/* =========================
   Cropper Modal (Profile Photo Editor)
   IMPORTANT: keep these global .modal styles for cropper
========================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  overscroll-behavior: contain;
}

/* ✅ Strong scoping so founders modal cannot override cropper */
#cropModal.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Scrollable card */
.modal-card {
  position: relative;
  z-index: 10000;
  width: min(560px, 92vw);
  max-height: min(78vh, 720px);
  overflow: auto;

  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);

  padding: 1rem 1rem 1.1rem;
  -webkit-overflow-scrolling: touch;
}

/* Sticky top head (close always reachable) */
.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.98);
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.modal-title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  margin: 0;
}

.modal-x {
  border: none;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;

  /* ✅ tap target */
  min-height: 44px;
  min-width: 44px;
}

.modal-subtitle {
  margin: 0.65rem 0 0.85rem;
  color: #444;
}

/* Crop UI */
.crop-frame-wrap {
  display: grid;
  place-items: center;
  padding: 0.25rem 0 0.9rem;
}

.crop-frame {
  width: min(420px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #111;
  touch-action: none;
}

#cropCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.crop-controls {
  display: grid;
  gap: 0.8rem;
  padding-bottom: 0.2rem;
}

/* Sticky bottom actions */
.crop-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;

  background: rgba(255, 255, 255, 0.98);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);

  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.crop-zoom {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}

.crop-zoom input[type="range"] {
  width: 100%;
}

/* Optional bottom close button */
.modal-backdrop .modal-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.modal-backdrop .modal-btn {
  border: none;
  background: var(--kap-red);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  min-height: 44px;
}

/* Mobile tuning */
@media (max-width: 520px) {
  .modal {
    padding: 10px;
  }

  #cropModal.modal {
    padding: 10px;
  }

  .modal-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 16px;
  }

  .crop-actions {
    justify-content: flex-start;
  }
}

/* =========================
   Members / Chapter Scroll
========================= */
.members-page {
  padding: 3rem 0 4rem;
}

.members-shell {
  width: min(980px, 92%);
}

.members-card {
  background: rgba(255, 255, 255, 0.94);
}

.members-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.members-search {
  width: min(420px, 100%);
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  outline: none;
  background: #fff;
}

.members-search:focus {
  border-color: rgba(181, 18, 27, 0.55);
  box-shadow: 0 0 0 4px rgba(181, 18, 27, 0.12);
}

/* (kept for compatibility even if you remove from HTML) */
.members-count {
  font-weight: 800;
  color: var(--kap-red);
}

.members-list {
  display: grid;
  gap: 0.9rem;
}

.member-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
}

.member-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--kap-red);
  background: rgba(181, 18, 27, 0.12);
}

.member-text {
  display: grid;
  gap: 0.25rem;
}

.member-name {
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.member-sub {
  color: #555;
  font-size: 0.95rem;
  font-style: italic;
}

@media (max-width: 420px) {
  .member-row {
    grid-template-columns: 48px 1fr;
    padding: 0.75rem;
  }
  .member-avatar {
    width: 48px;
    height: 48px;
  }
}

.empty {
  text-align: center;
  color: #555;
  padding: 1.25rem 0;
}

@media (max-width: 720px) {
  .members-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .members-search {
    width: 100%;
  }
}

/* =========================
   Founders Page
========================= */
.founders-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("./img/Founders.png") center / cover no-repeat;
  opacity: 0.08;
  z-index: -1;
}

.founders-shell {
  width: min(1100px, 92%);
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.founder-card {
  background: var(--kap-red);
  color: var(--kap-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
}

.founder-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

.founder-card span {
  display: block;
  margin-top: 0.75rem;
  font-weight: 800;
}

/* ===== Founders Animated Modal (SCOPED) ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;

  overflow: auto;
  padding: 1rem;

  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop .modal {
  background: #fff;
  width: min(560px, 100%);
  margin: auto;

  border-radius: 18px;
  position: relative;

  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;

  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-backdrop .modal-close {
  position: sticky;
  top: 0;
  align-self: flex-end;

  border: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);

  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;

  padding: 0.6rem 0.8rem;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 14px;

  z-index: 2;

  /* ✅ tap target */
  min-height: 44px;
  min-width: 44px;
}

.modal-backdrop .modal-content {
  padding: 1rem 1.25rem 1.25rem;
  overflow: auto;
}

.modal-backdrop .modal-content img {
  width: 100%;
  max-height: 28vh;              /* 🔑 keeps image compact */
  object-fit: contain;           /* 🔑 shows FULL image */
  border-radius: 12px;
  background: var(--kap-red);              /* subtle frame for portrait images */
}

@media (max-width: 420px) {
  .modal-backdrop .modal-content img {
    max-height: 22vh;
  }
}

.modal-backdrop .modal-content h2 {
  margin-top: 0.9rem;
  font-family: "Playfair Display", serif;
}

.modal-backdrop .modal-years {
  font-style: italic;
  margin: 0.25rem 0 0.75rem;
}

.modal-backdrop .modal-bio {
  line-height: 1.6;
}

@media (max-width: 420px) {
  .modal-backdrop {
    padding: 0.75rem;
  }
  .modal-backdrop .modal-content {
    padding: 0.9rem 1rem 1.1rem;
  }
}

/* =========================
   Admin Members
========================= */
.admin-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.admin-user-card {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 1rem;
  background: #fff;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.admin-user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.admin-user-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-user-left {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
}

.admin-user-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f4f4f4;
  flex: 0 0 auto;
}

.admin-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-user-title {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.admin-user-name {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-mini {
  display: grid;
  gap: 0.15rem;
  color: #333;
  font-size: 0.92rem;
}

.admin-user-meta {
  display: grid;
  gap: 0.35rem;
  color: #222;
  font-size: 0.95rem;
}

.admin-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0 0.5rem;
}

.admin-details {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.admin-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 520px) {
  .admin-detail-row {
    grid-template-columns: 1fr;
  }
}

.admin-detail-k {
  font-weight: 800;
  color: #333;
}

.admin-detail-v {
  color: #111;
}

.admin-modal-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* Modal avatar */
.admin-modal-avatar {
  display: grid;
  place-items: center;
  margin: 0.75rem 0 0.25rem;
}

.admin-modal-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f4f4f4;
}

/* Leadership editor (modal) */
.admin-leadership {
  margin-top: 0.5rem;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(244, 244, 244, 0.65);
}

.leadership-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.leadership-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--kap-red);
}

.leadership-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .leadership-grid {
    grid-template-columns: 1fr;
  }
  .leadership-actions {
    justify-content: stretch;
  }
}

/* =========================
   Admin blocks / lists
========================= */
.admin-block {
  margin-bottom: 2rem;
}

.admin-block-head {
  margin-bottom: 1rem;
}

.admin-block-title {
  font-family: "Playfair Display", serif;
  margin-bottom: 0.25rem;
}

.admin-block-sub {
  color: #333;
  opacity: 0.85;
}

.admin-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1.25rem 0;
}

.admin-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.admin-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.admin-list-title {
  margin: 0;
  font-weight: 900;
}

.admin-list-note {
  color: #555;
  font-size: 0.95rem;
}

.admin-list {
  display: grid;
  gap: 0.9rem;
}

.admin-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 1rem;
}

.admin-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.admin-item-title {
  font-weight: 900;
}

.status-badge {
  display: inline-flex;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.badge-live {
  color: var(--kap-red);
  background: rgba(181, 18, 27, 0.1);
  border-color: rgba(181, 18, 27, 0.25);
}
.badge-scheduled {
  color: #6b4b00;
  background: rgba(241, 194, 50, 0.18);
  border-color: rgba(241, 194, 50, 0.35);
}
.badge-hidden {
  color: #333;
  background: rgba(0, 0, 0, 0.08);
}
.badge-expired {
  color: #222;
  background: rgba(0, 0, 0, 0.06);
}

.admin-item-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

@media (max-width: 520px) {
  .admin-item-meta {
    grid-template-columns: 1fr;
  }
}

.admin-thumb {
  width: 92px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.admin-item-sub {
  display: grid;
  gap: 0.25rem;
  color: #222;
}

.admin-item-actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* =========================
   Editor (Announcements/Events)
========================= */
.editor-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: rgba(0, 0, 0, 0.02);
  flex-wrap: wrap;
}

.tool-btn {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
  font-weight: 900;
  cursor: pointer;

  /* ✅ tap target */
  min-height: 44px;
}

.tool-btn:hover {
  background: rgba(0, 0, 0, 0.03);
}

.tool-sep {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.15);
  margin: 0 0.25rem;
}

.editor {
  min-height: 140px;
  padding: 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0 0 14px 14px;
  background: #fff;
  outline: none;
}

.editor:focus {
  border-color: rgba(181, 18, 27, 0.45);
  box-shadow: 0 0 0 4px rgba(181, 18, 27, 0.1);
}

/* Preview */
.file-preview {
  margin-top: 0.75rem;
}

.file-preview img {
  width: min(420px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

/* =========================
   Leaders Page
========================= */
.leaders-shell {
  width: min(1100px, 92%);
}

.leaders-root {
  display: grid;
  gap: 1.25rem;
}

.leaders-section {
  background: rgba(255, 255, 255, 0.96);
  border-top: 6px solid var(--kap-red);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.leaders-section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.leader-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  padding: 0.95rem;
  text-align: center;
}

.leader-title {
  font-weight: 900;
  color: var(--kap-black);
  margin-bottom: 0.65rem;
}

.leader-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 0.65rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(244, 244, 244, 0.75);
}

.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leader-name {
  color: #111;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 420px) {
  .leader-photo {
    width: 150px;
    height: 150px;
  }
}

/* =========================
   Upload Manager (Admin)
========================= */
.upload-head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.upload-toolbar {
  display: grid;
  gap: 0.75rem;
}

.upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem;
  align-items: end;
}

@media (max-width: 720px) {
  .upload-row {
    grid-template-columns: 1fr;
  }
}

.albums-grid {
  display: grid;
  gap: 1rem;
}

.album-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 1rem;
}

.album-set-cover {
  color: var(--kap-white);
}

.album-card.is-dragging,
.photo-item.is-dragging,
.video-item.is-dragging {
  opacity: 0.6;
}

.album-head {
  display: grid;
  grid-template-columns: auto 92px 1fr;
  gap: 0.9rem;
  align-items: start;
}

@media (max-width: 720px) {
  .album-head {
    grid-template-columns: auto 78px 1fr;
  }
}

.album-drag,
.photo-drag,
.video-drag {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  cursor: grab;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
}

.album-cover {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-cover-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #666;
  background: rgba(244, 244, 244, 0.75);
}

.album-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.album-cover-row,
.album-upload {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.45rem;
}

.photo-list {
  display: grid;
  gap: 0.75rem;
}

.photo-item {
  display: grid;
  grid-template-columns: auto 96px 1fr;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 720px) {
  .photo-item {
    grid-template-columns: auto 86px 1fr;
  }
}

@media (max-width: 520px) {
  .photo-item {
    grid-template-columns: 1fr;
  }
}

.photo-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.photo-move {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.videos-grid {
  display: grid;
  gap: 0.9rem;
}

.video-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 520px) {
  .video-item {
    grid-template-columns: 1fr;
  }
}

.video-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* =========================
   GALLERY (matches gallery.html/gallery.js)
   Albums grid + album thumbs + lightbox
========================= */

/* Albums grid container */
.gallery-albums {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* Album card is a <button> */
.gallery-album {
  grid-column: span 4;

  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);

  cursor: pointer;
  text-align: left;
  padding: 0;

  transition: transform 140ms ease, box-shadow 140ms ease;
}

.gallery-album:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

.gallery-album:focus-visible {
  outline: 3px solid rgba(241, 194, 50, 0.85);
  outline-offset: 3px;
}

.gallery-album-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #111;
  display: block;
  overflow: hidden;
}

.gallery-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.gallery-album-meta {
  padding: 0.85rem 1rem 1rem;
  display: grid;
  gap: 0.35rem;
}

.gallery-album-title {
  font-weight: 900;
  color: #111;
  line-height: 1.2;
}

.gallery-album-count {
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.95rem;
}

@media (max-width: 980px) {
  .gallery-album {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .gallery-album {
    grid-column: span 12;
  }
}

/* =========================
   Album thumbs grid (inside album modal)
========================= */

.gallery-thumbs {
  margin-top: 0.9rem;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

/* Thumb is a <button> */
.gallery-thumb {
  grid-column: span 3;

  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);

  cursor: pointer;
  text-align: left;
  padding: 0;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.gallery-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
}

.gallery-thumb:focus-visible {
  outline: 3px solid rgba(241, 194, 50, 0.85);
  outline-offset: 3px;
}

.gallery-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  background: #111;
}

.gallery-thumb-cap {
  padding: 0.55rem 0.65rem 0.65rem;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.85);

  /* keep long captions from blowing up cards */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .gallery-thumb {
    grid-column: span 4; /* 3 across */
  }
}
@media (max-width: 720px) {
  .gallery-thumb {
    grid-column: span 6; /* 2 across */
  }
}
@media (max-width: 420px) {
  .gallery-thumb {
    grid-column: span 12; /* 1 across */
  }
}

/* =========================
   Lightbox modal (matches your structure)
========================= */

/* Make sure this modal looks like a lightbox but doesn't fight the founders modal */
.modal.gallery-lightbox {
  width: min(1100px, 96vw);
  margin: auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.96);
  color: #fff;

  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
}

.gallery-lightbox-body {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
  align-items: center;

  padding: 12px 12px 14px;
}

.gallery-nav {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;

  border-radius: 14px;
  cursor: pointer;

  width: 56px;
  height: 56px;

  font-size: 2rem;
  line-height: 1;

  display: grid;
  place-items: center;

  min-height: 44px;
}

.gallery-nav:hover {
  background: rgba(255, 255, 255, 0.12);
}

.gallery-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gallery-figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

#lightboxImg {
  width: 100%;
  height: auto;
  max-height: calc(86vh - 210px);
  object-fit: contain;
  background: #000;
  border-radius: 14px;
  display: block;
}

.gallery-caption {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
}

.gallery-cap-title {
  font-weight: 900;
  margin-bottom: 3px;
}

.gallery-cap-text {
  opacity: 0.85;
  line-height: 1.5;

  /* prevent huge captions from pushing everything */
  max-height: 7.5em;
  overflow: auto;
}

.gallery-close-inside {
  margin-top: 10px;
  width: 100%;
}

@media (max-width: 720px) {
  .modal.gallery-lightbox {
    width: 100%;
    max-height: 90vh;
    border-radius: 16px;
  }

  .gallery-lightbox-body {
    grid-template-columns: 1fr;
  }

  .gallery-nav {
    width: 100%;
    height: 48px;
    border-radius: 999px;
  }

  #lightboxImg {
    max-height: calc(90vh - 280px);
  }
}

/* Ensure the close button stays readable on dark lightbox */
.modal.gallery-lightbox .modal-close {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-bottom-left-radius: 14px;
}

/* Optional: prevent background scroll when any modal-backdrop is open */
body.modal-open {
  overflow: hidden;
}

/* =========================
   Videos Page (Public)
========================= */
.videos-list {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.video-item-row {
  margin: 0;
}

.video-row-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.9rem;
  align-items: center;

  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);

  cursor: pointer;
  text-align: left;

  /* ✅ tap target */
  min-height: 44px;
}

.video-row-btn:hover {
  border-color: rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-badge {
  position: absolute;
  inset: auto auto 10px 10px;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
}

.video-meta {
  display: grid;
  gap: 0.3rem;
}

.video-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.video-sub {
  font-size: 0.95rem;
  opacity: 0.75;
}

@media (max-width: 640px) {
  .video-row-btn {
    grid-template-columns: 1fr;
  }
}

/* YouTube responsive embed */
.yt-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.yt-embed-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===============================
   Role + Leader Badges (SINGLE SOURCE OF TRUTH)
   ✅ Deduped: `.role-badge` defined ONCE
================================ */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 0.25rem 0.6rem;
  border-radius: 999px;

  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: #333;

  white-space: nowrap;
  line-height: 1;
}

/* Admin role badge */
.role-badge.is-admin {
  border-color: rgba(181, 18, 27, 0.35);
  background: rgba(181, 18, 27, 0.1);
  color: var(--kap-red);
}

/* Special Status Badges */
.role-badge.new,
.role-badge[data-role="New"] {
  background: #2563eb;
  color: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

.role-badge.kappa-league,
.role-badge[data-type="Kappa League"] {
  background: #7c1d1d;
  color: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

.role-badge.consent-required {
  background: #f59e0b;
  color: #000;
  border-color: rgba(0, 0, 0, 0.12);
}

.role-badge.consent-received {
  background: #16a34a;
  color: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

/* Badge groups */
.leader-badges,
.title-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Leadership title badges (small) */
.leader-badge,
.title-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.72rem;
  border: 1px solid rgba(181, 18, 27, 0.25);
  background: rgba(181, 18, 27, 0.1);
  color: var(--kap-red);
  text-transform: none;
}

/* Modal badge spacing */
.admin-role-row .role-badge {
  margin-right: 4px;
}

/* =========================
   Kappa League Page-Only Layout Polish
   (safe additions)
========================= */
.kl-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: center;
}

@media (max-width: 900px) {
  .kl-hero {
    grid-template-columns: 1fr;
  }
}

.kl-logo {
  width: min(420px, 90%);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.18));
}

.kl-lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.78);
}

.kl-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.kl-tile {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  background: #f4f4f4;
  min-height: 160px;
}

.kl-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Fun, modern mosaic layout */
.t1 {
  grid-column: span 7;
  min-height: 260px;
}
.t2 {
  grid-column: span 5;
  min-height: 260px;
}
.t3,
.t4,
.t5 {
  grid-column: span 4;
  min-height: 190px;
}
.t6,
.t7 {
  grid-column: span 6;
  min-height: 220px;
}

@media (max-width: 900px) {
  .t1,
  .t2,
  .t3,
  .t4,
  .t5,
  .t6,
  .t7 {
    grid-column: span 12;
    min-height: 210px;
  }
}

.kl-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.kl-phases {
  margin: 10px 0 0;
  padding-left: 18px;
}

.kl-phases li {
  margin: 10px 0;
}

.kl-phase {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.kl-phase em {
  font-weight: 600;
  font-style: italic;
}

.kl-members-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.kl-search {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  outline: none;
  font: inherit;
}

.kl-member-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.kl-member {
  grid-column: span 6;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
  .kl-member {
    grid-column: span 12;
  }
}

.kl-member-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.kl-member-meta {
  margin-top: 4px;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.7);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #7c1d1d;
  color: #fff;
}

.nav-action-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 15px;
  border: none;
}

.about-shell {
  width: min(1100px, 92%);
}

.about-card {
  background: rgba(255, 255, 255, 0.96);
  border-top: 6px solid var(--kap-red);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.about-block {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 0;
}

.about-block + .about-block {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.about-block.reverse {
  grid-template-columns: 0.95fr 1.05fr;
}

.about-img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.about-img img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

.about-text {
  line-height: 1.7;
  color: #222;
}

.about-text p + p {
  margin-top: 0.85rem;
}

.about-h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 0 0 0.65rem;
}

.about-quote {
  margin: 0;
  padding: 1.1rem 1.15rem;
  border-left: 6px solid var(--kap-gold);
  background: rgba(244, 244, 244, 0.7);
  border-radius: 14px;
}

.about-quote p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.about-quote figcaption {
  margin-top: 0.6rem;
  font-weight: 700;
  color: #333;
}

.about-list {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
  line-height: 1.65;
}

.about-divider {
  margin: 1rem 0;
  border: none;
  border-top: 1px dashed rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
  .about-block,
  .about-block.reverse {
    grid-template-columns: 1fr;
  }

  .about-img img {
    max-height: 320px;
  }
}

/* =========================
   Messaging Admin Console
========================= */
.msg-admin-card {
  padding: 16px;
  border-radius: 18px;
}

.msg-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.msg-tab {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.msg-tab.is-active {
  border-color: rgba(241, 194, 50, 0.35);
  background: rgba(241, 194, 50, 0.16);
}

.msg-panel {
  margin-top: 10px;
}

.msg-panel-title {
  font-weight: 900;
  margin-bottom: 6px;
}

.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 16px 0;
}

.msg-user-list {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(0,0,0,0.18);
}

.msg-user-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}

.msg-user-row:last-child { border-bottom: none; }

.msg-user-name {
  font-weight: 800;
}

.msg-user-meta {
  grid-column: 2;
  opacity: 0.85;
  font-size: 0.92rem;
}

.msg-user-cb {
  margin-top: 4px;
}

.msg-actions {
  justify-content: flex-end;
}

/* field helpers (if you don't already have .field/.label) */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 800; opacity: 0.9; }
textarea, input, select {
  border-radius: 12px;
}

/* =========================
   Dues page
========================= */
.dues-shell {
  max-width: 980px;
}

.dues-card .dues-text {
  margin-top: 0.25rem;
  color: var(--text);
  line-height: 1.6;
}

.dues-amount {
  margin-top: 1.2rem;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.dues-amount-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.9;
  margin-bottom: 8px;
}

.dues-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dues-amount-name {
  font-weight: 600;
}

.dues-amount-value {
  font-weight: 800;
  font-size: 1.15rem;
}

.dues-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.dues-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.dues-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(241, 194, 50, 0.35);
  background: rgba(241, 194, 50, 0.08);
}

.dues-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dues-address {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: rgba(0, 0, 0, 0.15);
  line-height: 1.7;
  font-size: 100%;
}

.dues-address strong {
  font-size: 90%;
  font-weight: bold;
}

@media (max-width: 860px) {
  .dues-address strong {
    font-size: 73%;
  }
}

/* Payment history drawer */
.dues-history {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.dues-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dues-history-body {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.dues-pay-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}

.dues-pay-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.dues-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  opacity: 0.95;
}

.dues-pill-completed {
  border-color: rgba(46, 204, 113, 0.35);
}

.dues-pill-pending {
  border-color: rgba(241, 194, 50, 0.45);
}

.dues-pill-failed {
  border-color: rgba(255, 99, 71, 0.45);
}


@media (max-width: 860px) {
  .dues-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Scholarships page
========================= */
.scholar-shell {
  width: min(980px, 92%);
}

.scholar-card {
  border-radius: 16px;
}

.scholar-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: center;
}

.scholar-lead {
  line-height: 1.75;
  font-size: 1.02rem;
  color: #222;
}

.scholar-hero-img {
  display: grid;
  place-items: center;
}

.scholar-hero-img img {
  width: min(420px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.scholar-section {
  display: grid;
  gap: 0.65rem;
}

.scholar-body {
  line-height: 1.7;
  color: #222;
}

.scholar-list {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  line-height: 1.65;
  color: #222;
}

.scholar-actions {
  text-align: center;
}

.scholar-postmark{
  font-weight: 800;
  color: var(--kap-red);
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .scholar-hero {
    grid-template-columns: 1fr;
  }
}