/* ==========================================================================
   Rotaract Club of Kira — V4 Stylesheet
   Palette: cranberry, black, white — silver as the only secondary accent.
   Typography: Inter carries everything — headlines, navigation, body copy
   and captions. One typeface, weighted differently by role.
   Hairline borders, no shadows, no gradients, no glassmorphism.
   ========================================================================== */

:root {
  --ink: #0a0a0a;
  --ink-soft: #55524f;
  --ink-faint: #9a9691;

  --paper: #ffffff;
  --paper-alt: #f6f5f4;

  --line: #e4e2df;
  --line-strong: #d0cfcd;

  --cranberry: #d41367;
  --cranberry-ink: #a80f52;
  --silver: #d0cfcd;
  --silver-ink: #55524f;

  --black: #000000;
  --black-line: rgba(255,255,255,0.12);

  --radius: 3px;
  --radius-md: 8px;

  --font-head: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --nav-h: 73px;
}

/* ---------- Base ---------- */
/* Note: intentionally NOT setting overflow-x:hidden on html/body — that
   breaks position:sticky/fixed (incl. the mobile navbar) in most browsers.
   Horizontal-overflow sources are fixed at the component level instead
   (see .field-input, .tab-quiet, and flex-wrap on button/stat rows). */
html {
  scroll-behavior: smooth;
  /* Without this, trackpad/touch scrolling past the top, bottom or sides of
     the page lets the browser "rubber-band" past the real content edge,
     briefly exposing blank white canvas beyond it. There's no actual extra
     scrollable content (verified: document scrollWidth == viewport width on
     every page) — this is purely the browser's elastic overscroll bounce,
     which reads as the page being "loose" at the edges. Disabling it here
     is unrelated to overflow-x/clipping, so it doesn't affect the fixed
     navbar or any sticky sidebars. */
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.65;
  padding-top: var(--nav-h);
  overscroll-behavior: none;
}

img { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, h6, span, a { overflow-wrap: break-word; word-break: break-word; }

h1, h2, h3, h4, .font-head {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
}

p { color: var(--ink-soft); margin-bottom: 1rem; }
a { text-decoration: none; color: inherit; }
::selection { background: #f6d3e3; color: var(--cranberry-ink); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
  line-height: 1;
}

.ink { color: var(--ink) !important; }
.ink-soft { color: var(--ink-soft) !important; }
.cranberry { color: var(--cranberry) !important; }
.bg-paper-alt { background: var(--paper-alt) !important; }

/* Eyebrow — quiet label, primary font, no icon/dash decoration */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cranberry);
  display: block;
}

.lede { font-family: var(--font-body); font-size: 1.2rem; color: var(--ink-soft); line-height: 1.6; }

.serif-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.4;
}

.section { padding-top: 6rem; padding-bottom: 6rem; }
.section-sm { padding-top: 3.5rem; padding-bottom: 3.5rem; }

.rule { height: 1px; background: var(--line); border: none; margin: 0; }
.rule-strong { height: 1px; background: var(--line-strong); border: none; margin: 0; }

/* ---------- Buttons — flat, no glow, primary font ---------- */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cranberry);
  color: #fff;
  border: 1px solid var(--cranberry);
  border-radius: var(--radius);
  padding: 0.8rem 1.75rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-solid:hover { background: var(--cranberry-ink); border-color: var(--cranberry-ink); color: #fff; }

.btn-solid.cranberry-fill { background: var(--cranberry); border-color: var(--cranberry); }
.btn-solid.cranberry-fill:hover { background: var(--cranberry-ink); border-color: var(--cranberry-ink); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.78rem 1.7rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}
.btn-outline:hover { border-color: var(--ink); background: var(--paper-alt); }

.btn-outline.on-dark { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-outline.on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  font-size: 0.94rem;
}
.link-arrow:hover { color: var(--cranberry); border-color: var(--cranberry); }
.link-arrow .material-symbols-outlined { font-size: 18px; transition: transform 0.2s ease; }
.link-arrow:hover .material-symbols-outlined { transform: translateX(3px); }

.btn-nav-sm { padding: 0.55rem 1.3rem !important; font-size: 0.85rem !important; }

/* ---------- Navbar — quiet, primary font on labels ---------- */
/* position:fixed (not sticky) so the bar stays pinned to the true device
   viewport and doesn't visibly jump/shift when a mobile browser's address
   bar collapses or expands on scroll — a known quirk of sticky here. */
.site-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: var(--nav-h);
  z-index: 1030;
  /* own compositing layer — avoids the wobble/lag fixed bars can get
     during momentum scroll on iOS Safari */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.site-nav .navbar-brand img { height: 40px; width: auto; object-fit: contain; }
.site-nav .nav-link {
  font-family: var(--font-head);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.94rem;
  margin: 0 1rem;
  padding: 0.3rem 0 !important;
  border-bottom: 1px solid transparent;
}
.site-nav .nav-link:hover { color: var(--ink); }
.site-nav .nav-link.active { color: var(--ink); border-bottom-color: var(--cranberry); }

.nav-toggle-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  overflow: hidden;
  flex-shrink: 0;
}

.offcanvas-end.mobile-drawer {
  width: min(320px, 88vw);
  background: var(--paper);
  color: var(--ink);
}
.mobile-drawer .nav-link {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer .nav-link.active { color: var(--cranberry); }

/* Horizontal-overflow guard lives here (not on html/body) so it never
   touches the fixed navbar's containing block — main and the footer are
   the nav's siblings, not its ancestors, so this is safe for position:fixed. */
main { padding-top: 0; overflow-x: hidden; }

/* ---------- Cards — hairline border, no shadow, small radius ---------- */
.card-plain {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}
.card-plain:hover { border-color: var(--line-strong); }

/* ---------- Clickable project cards ---------- */
.project-card { display: flex; }
.project-card:hover { border-color: var(--line-strong); }
.project-card-img { height: 180px; overflow: hidden; }
.project-card-img img { transition: transform 0.4s ease; }
.project-card:hover .project-card-img img { transform: scale(1.06); }
.project-card-img.portrait { height: auto; aspect-ratio: 3 / 4; position: relative; }
.project-card-img.square { height: auto; aspect-ratio: 1 / 1; position: relative; }
.flyer-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(10,10,10,0.25);
}
.flyer-tag.cranberry { background: var(--cranberry); color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.flyer-tag.muted { background: rgba(10,10,10,0.72); color: #fff; }
.project-card:hover .material-symbols-outlined { transform: translateX(3px); }
.project-card .material-symbols-outlined { transition: transform 0.2s ease; }


.tag {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.tag.cranberry { color: var(--cranberry); }

/* Secondary category marker — silver chip instead of colored text */
.tag-chip {
  display: inline-flex;
  align-items: center;
  background: var(--silver);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}

.img-plain {
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

/* ---------- Numbers (steps, timeline) — secondary font ---------- */
.num-serif {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--cranberry);
  font-weight: 500;
}

/* ---------- Stats — secondary font for a touch of warmth ---------- */
.stat-num {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.stat-label { font-family: var(--font-head); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }

/* ---------- Progress ---------- */
.progress-track { height: 3px; background: var(--line); }
.progress-fill { height: 100%; background: var(--cranberry); }
.progress-fill.ink { background: var(--ink); }

/* ---------- Forms ---------- */
.field-label { font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; margin-bottom: 0.4rem; display: block; color: var(--ink); }
.field-input, .field-select, textarea.field-input {
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.field-input:focus, .field-select:focus, textarea.field-input:focus {
  outline: none;
  border-color: var(--ink);
}
.field-input-dark { background: transparent; border-color: rgba(255,255,255,0.24); color: #fff; }
.field-input-dark::placeholder { color: rgba(255,255,255,0.4); }
.field-input-dark:focus { border-color: #fff; }

/* ---------- Contact page ---------- */
.contact-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper-alt);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
}
.contact-icon .material-symbols-outlined { font-size: 22px; color: var(--cranberry); }
.bg-cranberry .contact-icon { background: rgba(255,255,255,0.16); }
.bg-cranberry .contact-icon .material-symbols-outlined { color: #fff; }

.contact-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 0.85rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-social:hover { border-color: var(--cranberry); color: var(--cranberry); }
.bg-cranberry .contact-social { border-color: rgba(255,255,255,0.4); color: #fff; }
.bg-cranberry .contact-social:hover { border-color: #fff; color: #fff; }

.contact-info-strip { display: flex; flex-wrap: wrap; }
.contact-info-item { flex: 1 1 200px; min-width: 0; padding: 0.5rem 0; }
/* four-across divided layout only once the container is wide enough to fit
   it without squeezing (4 x 200px basis + side padding needs ~900px+) */
@media (min-width: 1200px) {
  .contact-info-item { padding: 0 2.5rem; border-left: 1px solid rgba(255,255,255,0.25); }
  .contact-info-item:first-child { padding-left: 0; border-left: none; }
}

.contact-map-wrap {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-alt);
}
.contact-map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 992px) { .contact-map-wrap { aspect-ratio: 1 / 1; } }

/* ---------- Accordion ---------- */
.accordion-v3 .accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0 !important; }
.accordion-v3 .accordion-button { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); background: transparent; padding: 1.5rem 0.1rem; box-shadow: none; }
.accordion-v3 .accordion-button:not(.collapsed) { color: var(--cranberry); background: transparent; box-shadow: none; }
.accordion-v3 .accordion-button:focus { box-shadow: none; }
.accordion-v3 .accordion-body { font-family: var(--font-body); padding: 0 0.1rem 1.6rem; color: var(--ink-soft); }

/* ---------- Tabs ---------- */
.tab-quiet { font-family: var(--font-head); border: none; background: transparent; color: var(--ink-soft); font-weight: 500; font-size: 0.94rem; padding: 0.6rem 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.tab-quiet.active { color: var(--ink); border-color: var(--cranberry); }

/* Filter tabs (e.g. project categories) — on mobile a long list of tabs
   would otherwise wrap onto several lines and crowd the page; below the
   lg breakpoint we turn the row into a horizontally-sliding strip instead.
   Unchanged (wraps normally) from lg up, where there's room to spare. */
@media (max-width: 991.98px) {
  .filter-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
  }
  .filter-scroll::-webkit-scrollbar { height: 3px; }
  .filter-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
  .filter-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---------- Footer — true black, tall, generous ---------- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.6); padding-top: 1rem; overflow-x: hidden; }
.site-footer h6 { color: rgba(255,255,255,0.92); font-family: var(--font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.site-footer p { color: rgba(255,255,255,0.55); font-family: var(--font-body); }
.site-footer a { color: rgba(255,255,255,0.6); }
.site-footer a:hover { color: #fff; }
.footer-logo-chip img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; font-size: 0.95rem; }
.footer-socials a:hover { border-color: rgba(255,255,255,0.6); }
.footer-bottom { border-top: 1px solid var(--black-line); font-family: var(--font-head); font-size: 0.78rem; }
.footer-bottom span { min-width: 0; }
.credit-brand { color: var(--cranberry); font-weight: 600; }
.footer-tagline { font-family: var(--font-body); font-style: italic; font-size: 1.3rem; color: #fff; line-height: 1.5; min-width: 0; }
.footer-cta-row { border-bottom: 1px solid var(--black-line); }
/* Text sitting as a flex child defaults to min-width:auto, which some
   browsers compute inconsistently for wrapped copy and can block the item
   from shrinking to fit — force it to always defer to available space. */
p { min-width: 0; }

/* ---------- Hero photo (image-forward) ---------- */
.hero-photo {
  position: relative;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.hero-photo.hero-photo-sm { min-height: 46vh; }
.hero-photo.hero-photo-tall { min-height: 88vh; }
.hero-photo-media { position: absolute; inset: 0; z-index: 0; }
.hero-photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-media.carousel,
.hero-photo-media .carousel-inner,
.hero-photo-media .carousel-item { height: 100%; }
.hero-carousel-dots {
  position: absolute; z-index: 2; bottom: 1.75rem; right: 1.75rem;
  display: flex; gap: 0.5rem;
}
.hero-carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.45); transition: all 0.25s ease; opacity: 1;
}
.hero-carousel-dots button.active { background: var(--cranberry); width: 22px; border-radius: 999px; }
.hero-photo-scrim {
  position: absolute; inset: 0;
  /* Cranberry fade — image reads clearly up top, deepens into brand
     cranberry toward the bottom where headline/eyebrow text sits. */
  background: linear-gradient(180deg,
    rgba(212,19,103,0) 0%,
    rgba(212,19,103,0.12) 35%,
    rgba(191,17,93,0.45) 65%,
    rgba(120,10,58,0.82) 88%,
    rgba(90,7,44,0.92) 100%);
}
.hero-photo-content { position: relative; z-index: 1; padding-top: 4rem; padding-bottom: 3.25rem; }
.hero-photo-sm .hero-photo-content { padding-top: 2.75rem; padding-bottom: 2.5rem; }
@media (max-width: 575.98px) {
  .hero-photo { min-height: 78vh; }
  .hero-photo.hero-photo-sm { min-height: 58vh; }
  .hero-photo.hero-photo-tall { min-height: 84vh; }
  .hero-photo-content { padding-top: 2.5rem; padding-bottom: 2rem; }
}
.eyebrow-on-dark {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: #f0a8c8; display: block;
}
.lede-on-dark { font-family: var(--font-body); font-size: 1.15rem; color: rgba(255,255,255,0.86); line-height: 1.6; }
.hero-photo-content h1, .hero-photo-content h2 { color: #fff; }
.hero-photo-caption { color: rgba(255,255,255,0.6); font-family: var(--font-body); font-style: italic; }
.hero-photo-stats {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.16);
  background: rgba(90,7,44,0.9);
}
.hero-photo-stats.cranberry-strip { background: var(--cranberry); border-top-color: rgba(255,255,255,0.22); }
.hero-photo-stats .stat-num { color: #fff; }
.hero-photo-stats .stat-label { color: rgba(255,255,255,0.66); }

/* ---------- Cranberry sections ---------- */
.bg-cranberry { background: var(--cranberry); color: rgba(255,255,255,0.92); }
.bg-cranberry h1, .bg-cranberry h2, .bg-cranberry h3, .bg-cranberry h4, .bg-cranberry h5, .bg-cranberry h6, .bg-cranberry .font-head { color: #fff; }
.bg-cranberry p { color: rgba(255,255,255,0.85); }
.bg-cranberry .eyebrow { color: rgba(255,255,255,0.78); }
.bg-cranberry .stat-num { color: #fff; }
.bg-cranberry .stat-label { color: rgba(255,255,255,0.72); }
.bg-cranberry .tag { color: rgba(255,255,255,0.78); }
.bg-cranberry .tag.cranberry { color: #fff; }
.bg-cranberry .num-serif { color: #fff; }
.bg-cranberry .rule, .bg-cranberry .rule-strong, .bg-cranberry hr.rule { background: rgba(255,255,255,0.25); }
.bg-cranberry .card-plain { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }
.bg-cranberry .card-plain:hover { border-color: rgba(255,255,255,0.5); }
.bg-cranberry .link-arrow { color: #fff; border-color: rgba(255,255,255,0.7); }
.bg-cranberry .link-arrow:hover { color: rgba(255,255,255,0.8); border-color: #fff; }
.bg-cranberry .field-label { color: #fff; }
.bg-cranberry a:not(.btn-solid):not(.btn-outline):not(.link-arrow) { color: #fff; }
.bg-cranberry .btn-solid { background: var(--ink); border-color: var(--ink); }
.bg-cranberry .btn-solid:hover { background: #000; border-color: #000; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: all 0.6s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.back-to-top {
  width: 44px; height: 44px; border-radius: 50%;
  position: fixed; bottom: 22px; right: 22px; z-index: 1050;
  background: var(--ink); color: #fff; border: none;
  align-items: center; justify-content: center;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .section { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .display-1, .display-2, .display-3, .display-4 { font-size: 2.3rem !important; }
}

/* ---------- Attendance dashboard ---------- */
/* KPI chips — small bordered tiles on the cranberry panel, so each number
   reads as its own unit even when the grid wraps to 2-across on mobile. */
.kpi-chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  height: 100%;
}
.kpi-chip .stat-num { color: #fff; }
.kpi-chip .stat-label { color: rgba(255,255,255,0.72); }

/* Small colour-coded dots — quick visual differentiation for breakdown rows
   (attendance by type, buddy groups) without leaving the existing palette. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.45rem; vertical-align: middle; }
.dot-cranberry { background: var(--cranberry); }
.dot-ink { background: var(--ink); }
.dot-silver { background: var(--silver-ink); }
.dot-cranberry-ink { background: var(--cranberry-ink); }

/* Attendance trend — a minimal vertical bar chart (last few dated
   fellowships). No chart library: each bar is just a height-animated div. */
.trend-chart { display: flex; align-items: flex-end; gap: 1rem; height: 150px; }
.trend-bar { flex: 1 1 0; min-width: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-bar-track {
  width: 100%; max-width: 44px; height: 100%;
  display: flex; align-items: flex-end;
  background: var(--paper-alt); border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.trend-bar-fill { width: 100%; background: var(--cranberry); border-radius: var(--radius) var(--radius) 0 0; transition: height 0.5s ease; }
.trend-bar-count { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 1rem; color: var(--ink); margin-bottom: 0.4rem; }
.trend-bar-label { font-size: 0.7rem; color: var(--ink-faint); text-align: center; margin-top: 0.5rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .trend-chart { overflow-x: auto; justify-content: flex-start; padding-bottom: 0.25rem; }
  .trend-bar { flex: 0 0 52px; }
}

/* Fellowship flyer thumbnail in the per-fellowship attendance cards */
.attendance-thumb { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }