/*
Theme Name: CCDC Theme
Author: Your Name
Version: 1.0
Build: 2026-07-17-grid
*/

/* ── Site-wide chrome (header, nav, footer) ── */
* { box-sizing: border-box; }

body { background: #f5f5f3; margin: 0; }

/* Gutenberg's Group block wraps its content in an extra
   .wp-block-group__inner-container div. That breaks any flex/grid
   layout (card-grid, card, card-top, card-body, page-hero, etc.)
   that expects its real content as direct children. This makes
   that wrapper invisible to layout so its children act as true
   direct children of the real container. */
.wp-block-group__inner-container {
  display: contents;
}

/* Gutenberg adds its own ~2em default spacing between sibling
   blocks inside any "flow layout" wrapper. We already control
   spacing explicitly everywhere, so turn that default off. */
.page-content .is-layout-flow > * + * {
  margin-block-start: 0;
}

.mockup-label { text-align: center; font-size: 12px; color: #888; padding: 8px 0; margin: 0 auto; max-width: 900px; background: #fffbe6; border-bottom: 1px solid #f0e6b0; font-style: italic; }
.mockup-label a { color: #185FA5; font-style: normal; font-weight: 600; }

/* ── Outer rounded container wrapping header + content + footer ── */
.site { max-width: 900px; margin: 20px auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
@media (max-width: 600px) {
  .site { margin: 0 auto; }
}

.site-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 0.5px solid #e0e0da; background: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.header-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.header-logo-mark { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1.5px solid #1a3a6b; }
.header-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.header-site-name { font-size: 12px; font-weight: 700; color: #1a3a6b; line-height: 1.2; max-width: 80px; }

.header-nav { flex: 1; overflow: hidden; }
.header-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.header-nav .nav-list li { margin: 0; }
.header-nav .nav-list a { font-size: 11px; font-weight: 500; color: #444; text-decoration: none; padding: 4px 6px; border-radius: 4px; white-space: nowrap; display: block; }
.header-nav .nav-list a:hover { background: #f0f0ee; }
.header-nav .nav-list .current-menu-item > a,
.header-nav .nav-list .current_page_item > a { color: #1a3a6b; font-weight: 700; }

.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.search-widget { position: relative; display: flex; align-items: center; }
.search-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid #e0e0da; background: none; color: #444; cursor: pointer; padding: 0; flex-shrink: 0; }
.search-toggle:hover { background: #f0f0ee; }
.search-form { display: none; position: absolute; right: 0; top: 34px; background: white; border: 0.5px solid #e0e0da; border-radius: 8px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 10; }
.search-widget.open .search-form { display: flex; }
.search-form input[type="search"] { border: none; outline: none; font-size: 12px; padding: 4px 6px; width: 140px; }

.mobile-search { display: none; padding: 12px 20px; border-bottom: 0.5px solid #f0f0ee; }
.mobile-search input[type="search"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid #e0e0da; border-radius: 6px; font-size: 14px; }

.social-icons { display: flex; gap: 6px; align-items: center; }
.social-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }
.social-icon svg { width: 12px; height: 12px; fill: white; display: block; }

.contact-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid #e0e0da; color: #444; text-decoration: none; }

.donate-btn { background: #1a3a6b; color: white !important; padding: 4px 10px; border-radius: 99px; font-weight: 600; font-size: 11px; text-decoration: none; white-space: nowrap; }

.hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; flex-shrink: 0; }
.hamburger span { display: block; height: 2px; background: #1a3a6b; border-radius: 2px; }

.mobile-menu { display: none; flex-direction: column; border-top: 0.5px solid #e0e0da; background: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mobile-menu.open { display: flex; }
.mobile-menu .mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-menu .mobile-nav-list a,
.mobile-menu > a { font-size: 14px; font-weight: 500; color: #333; text-decoration: none; padding: 12px 20px; border-bottom: 0.5px solid #f0f0ee; display: block; }
.mobile-menu .mobile-nav-list .current-menu-item > a,
.mobile-menu .mobile-nav-list .current_page_item > a { color: #1a3a6b; font-weight: 700; }
.mobile-menu a:hover { background: #f5f5f3; }
.mobile-menu-footer { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 0.5px solid #e0e0da; }
.mobile-menu-footer .social-icon { width: 32px; height: 32px; padding: 9px; box-sizing: border-box; }
.mobile-menu-footer .social-icon svg { width: 100%; height: 100%; }

/* ── Footer ── */
.site-footer { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.photos-strip { display: flex; overflow: hidden; }
.photos-strip a { flex: 1 1 0; width: 25%; height: 130px; display: block; }
.photos-strip img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }

.footer-columns { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 20px 0.5rem; }
.footer-info { font-size: 11px; color: #999; line-height: 1.7; }
.footer-info a { color: #999; }
.footer-note { font-size: 10px; color: #aaa; text-align: right; line-height: 1.6; }
.footer-meta { font-size: 10px; color: #aaa; text-align: center; padding: 0 20px 1.25rem; }
.footer-meta a { color: #999; text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .header-nav { display: none; }
  .social-icons { display: none; }
  .search-widget { display: none; }
  .mobile-search { display: block; }
  .hamburger { display: flex; }
  .photos-strip a { height: 80px; }
  .footer-columns { flex-direction: column; gap: 12px; }
  .footer-note { text-align: left; }
}
.site-header.nav-overflow .header-nav { display: none; }
.site-header.nav-overflow .hamburger { display: flex; }
/* ── Page layout ── */
.site-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-content {
  font-family: 'Quicksand', Helvetica, Arial, Lucida, sans-serif;
  line-height: 1.7;
  font-size: 14px;
  color: #666;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.3;
}

.page-content p,
.page-content ul,
.page-content ol {
  margin-bottom: 1em;
}

.page-content ul {
  padding-left: 1.2em;
}

.page-content a {
  color: #1d4ed8;
  text-decoration: none;
}

.page-content a:hover {
  text-decoration: underline;
}

/* ── Narrower reading width for plain text content (not hero/card-grid rows/row-label) ── */
.page-content > h1,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > p:not(.row-label),
.page-content > ul,
.page-content > ol,
.page-content > .content-panel,
.page-content > .election-panel {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Opt a specific direct-child paragraph out of the narrow column
   above, so it spans the full content width instead. */
.page-content > p.full-width {
  max-width: 680px;
  margin-left: 0;
  margin-right: 0;
}

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

.border-top {
  border-top: 0.5px solid #e0e0da;
  padding-top: 20px;
  margin-top: 20px;
}

/* ── Small colored accent, e.g. a star before a title ── */
.star-accent {
  color: #185FA5;
}

/* ── Highlighted panel for a section (e.g. Values list) ── */
.content-panel {
  background: #1a3a6b;
  color: white;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-top: 20px;
  margin-bottom: 20px;
}
.content-panel h2 {
  color: white;
  margin-top: 0;
}
.content-panel p,
.content-panel li {
  color: rgba(255,255,255,0.9);
}

/* ── White info panel with pill-link buttons (2026 Election) ── */
.election-panel { background: white; border: 0.5px solid #e0e0da; border-radius: 12px; padding: 1.5rem 1.75rem; margin-top: 20px; margin-bottom: 20px; }
.election-panel h2 { color: #1a3a6b; margin-top: 0; }
.election-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; margin-top: 10px; }

/* ── Candidate races (2026 Election page) ──
   Text-heavy page, so keep everything in the same narrow reading
   column as the rest of the page's prose, instead of full-bleed. */
.race { max-width: 680px; margin-left: auto; margin-right: auto; padding: 20px 20px 0; }
.race + .race { border-top: 0.5px solid #e0e0da; margin-top: 20px; }
.race h3 { font-size: 15px; color: #1a3a6b; margin: 0 0 6px; }
.race-desc { font-size: 12px; color: #666; line-height: 1.5; margin: 0 0 4px; }
.race-video { font-size: 12px; margin: 4px 0; }
.candidate-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0 20px; }
.candidate { display: flex; align-items: center; gap: 12px; }
/* Full-size images (as uploaded), not cropped to a fixed box */
.candidate-photo { border-radius: 8px; overflow: hidden; flex-shrink: 0; margin: 0; max-width: 100%; }
.candidate-photo img { max-width: 100%; height: auto; display: block; }
.candidate-role { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 2px; }
.candidate-name { font-size: 14px; font-weight: 700; color: #185FA5; margin: 0; }
.candidate-extra { font-size: 12px; color: #185FA5; margin: 4px 0 0; }
.candidate-grid { max-width: 680px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px 20px; }

/* ── Page hero banner ── */
.page-hero { background: linear-gradient(135deg, #1a3a6b 0%, #2a5298 100%); padding: 1.0rem 20px; display: flex; align-items: center; gap: 12px; border-radius: 12px 12px 0 0; }
.page-hero-icon { font-size: 32px; flex-shrink: 0; margin: 0; }
.page-hero-text { display: flex; align-items: center; gap: 12px; }
.page-hero-text h1 { font-size: 20px; font-weight: 700; color: white; line-height: 1.2; margin: 0; }
.page-hero-text p:not(.page-hero-icon) { font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 4px; }

/* ── Card grid system ── */
.row-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.07em; text-transform: uppercase; padding: 1.1rem 20px 0.4rem; margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 20px 20px; }
.card-grid.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: white; border: 0.5px solid #e0e0da; border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card.card-clickable:hover { cursor: pointer; }
.card-top { background: #1a3a6b; padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; }
.card-top-icon { font-size: 20px; margin: 0; display: flex; align-items: center; }
img.emoji { vertical-align: middle; }
.card-top h2 { font-size: 14px; font-weight: 700; color: white; line-height: 1.3; margin: 0; }
.card-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body p { font-size: 12px; color: #555; line-height: 1.55; flex: 1; margin: 0; }
.card-cta { margin-top: 8px; font-size: 12px; font-weight: 600; color: #185FA5; }
.card-cta::after { content: " →"; }

/* ── Home page hero ── */
.hero { position: relative; height: 220px; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/*.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,50,100,0.55) 0%, rgba(20,50,100,0.85) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 1.5rem 20px; }*/
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,50,100,0.55) 0%, rgba(20,50,100,0.85) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 1.5rem 20px; pointer-events: none; }
.hero-name { font-size: 22px; font-weight: 600; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.hero-tagline { font-size: 18px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.4); text-align: center; max-width: 600px; }
.hero-logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.8); margin: 0; }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }

@keyframes heroTextUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-logo { animation: heroTextUp 0.6s ease-out both; }
.hero-tagline { animation: heroTextUp 0.6s ease-out 0.15s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-tagline { animation: none; }
}

/* ── Card grid: image variant ── */
/* .card-img is a Gutenberg Image block, so the className lands on the
   <figure> wrapper, not the <img> itself — size/clip the figure, then
   let the nested img fill it. */
.card-img { width: 100%; height: 120px; overflow: hidden; margin: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Card grid: pill link variant ── */
.card-links { margin-top: 6px; margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px; }
.card-link { font-size: 11px; line-height: 1.3; padding: 2px 8px; border-radius: 99px; border: 0.5px solid #B5D4F4; background: #E6F1FB; color: #0C447C; text-decoration: none; white-space: nowrap; }

/* ── Card grid: election banner variant ── */
.primary-banner { background: #1a3a6b; padding: 1.1rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; }
.primary-banner .pb-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.primary-banner .pb-date { font-size: 22px; font-weight: 700; color: white; line-height: 1.1; text-align: center; }
.primary-banner .pb-sub { font-size: 11px; color: rgba(255,255,255,0.8); font-style: italic; margin-top: 2px; }

/* ── Card grid: auto-calendar variant ── */
.cal-wrap { background: #f8f8f6; padding: 8px 10px 6px; border-bottom: 0.5px solid #e0e0da; }
.cal-header { background: #1a3a6b; color: white; text-align: center; font-size: 11px; font-weight: 600; padding: 4px 0; border-radius: 4px 4px 0 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e0e0da; border: 0.5px solid #e0e0da; }
.cal-cell { background: white; text-align: center; font-size: 9px; padding: 3px 0; color: #666; }
.cal-cell.dow { font-weight: 600; color: #999; background: #f5f5f3; }
.cal-cell.empty { background: #fafaf8; }
.cal-cell.weekend { color: #aaa; }
.cal-cell.today { background: #1a3a6b; color: white; font-weight: 700; border-radius: 2px; }

/* ── Section divider ── */
.section-bar { background: #f5f5f3; border-top: 0.5px solid #e0e0da; border-bottom: 0.5px solid #e0e0da; margin-top: 1.25rem; text-align: center; padding: 6px 20px; }
.section-bar-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.07em; text-transform: uppercase; }

/* ── Featured two-up (Bluesky + curated) ── */
.featured-grid { display: flex; gap: 12px; padding: 16px 20px; }
.featured-panel { flex: 1 1 0; border: 0.5px solid #e0e0da; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; }
.featured-panel-header { padding: 8px 12px; background: #f5f5f3; border-bottom: 0.5px solid #e0e0da; font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.07em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.featured-panel-header .bsky-dot { width: 8px; height: 8px; border-radius: 50%; background: #0085ff; display: inline-block; }

#bsky-posts { padding: 12px; font-size: 12px; color: #333; flex: 1; }
#bsky-posts a { color: #185FA5; text-decoration: none; }
#bsky-posts img { max-width: 100%; border-radius: 8px; margin-top: 6px; display: block; }
#bsky-posts hr { border: none; border-top: 0.5px solid #e0e0da; margin: 10px 0; }
.bsky-post-label { font-size: 12px; font-weight: 500; color: #333; line-height: 1.4; }
.bsky-cta { font-size: 12px; font-weight: 600; color: #185FA5; line-height: 1.4; }
.bsky-loading { padding: 20px 12px; font-size: 11px; color: #aaa; text-align: center; }

.placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fafaf8; padding: 20px; }
.placeholder-icon { width: 48px; height: 48px; border-radius: 12px; background: #e8e8e4; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.placeholder-label { font-size: 12px; color: #aaa; text-align: center; line-height: 1.5; }
.placeholder-tag { font-size: 10px; padding: 2px 10px; border-radius: 99px; background: #e8e8e4; color: #999; }

/* Homepage text elements are built as Paragraph blocks now (so editors
   can change them), but they rely on their own flex gap for spacing —
   zero out the generic .page-content p margin so it doesn't double up. */
.hero-name, .hero-tagline,
.primary-banner p,
.section-bar-label,
.featured-panel-header,
.placeholder-icon, .placeholder-label, .placeholder-tag {
  margin: 0;
}

/* ── Person cards (headshot, name, title, email) ── */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 0 20px 20px; }
.person-card { background: white; border: 0.5px solid #e0e0da; border-radius: 12px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.person-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 0 6px; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-name { font-size: 13px; font-weight: 700; color: #1a3a6b; margin: 0; }
.person-title { font-size: 11px; color: #888; margin: 0; }
.person-email { font-size: 11px; color: #185FA5; text-decoration: none; margin-top: 4px; }
.person-email:hover { text-decoration: underline; }

/* ── Small chair byline inside a subcommittee card ── */
.chair-mini { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.chair-mini-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin: 0; }
.chair-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chair-mini-name { font-size: 13px; font-weight: 600; color: #333; margin: 0; }
.chair-mini-role { font-size: 11px; color: #888; margin: 0; }
.chair-mini-contact { font-size: 11px; color: #185FA5; text-decoration: none; }
.chair-mini-contact:hover { text-decoration: underline; }

/* ── Standalone pill button (e.g. "Short Bios of the Team") ── */
.btn-primary { display: inline-block; background: #1a3a6b; color: white !important; padding: 10px 22px; border-radius: 99px; font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-primary:hover { background: #123058; }

@media (max-width: 600px) {
  .card-grid,
  .card-grid.card-grid-2 { grid-template-columns: 1fr; }
  .card-body p { font-size: 15px; }
  .card-cta { font-size: 14px; }
  .card-link { font-size: 13px; padding: 4px 10px; }
  .bsky-post-label { font-size: 15px; }
  #bsky-posts { font-size: 15px; }
  .featured-grid { flex-wrap: wrap; }
  .featured-panel { flex: 1 1 100%; }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
}

.spotlight { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px 20px; align-items: flex-start; }
  .spotlight-photo { flex: 0 0 240px; margin: 0; border-radius: 12px; overflow: hidden; }
  .spotlight-photo img { width: 100%; height: auto; display: block; }
  .spotlight-text { flex: 1 1 320px; }
  .spotlight-text h2 { margin-top: 0; color: #1a3a6b; }
  @media (max-width: 600px) {
    .spotlight-photo { flex: 0 0 auto; width: 100%; max-width: 280px; margin: 0 auto; }
  }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; padding: 0 20px; }
.cta-row .card-cta { margin-top: 0; }

/* .area-leader { font-size: 13px; font-weight: 600; color: #1a3a6b; margin: 0 0 8px; }
  .area-leader-contact { margin-left: 4px; text-decoration: none; }
  .card-body ul { font-size: 12px; color: #555; line-height: 1.55; margin: 0; padding-left: 1.1em; }
  .card-body li { margin: 0; } */

  .area-leader { font-size: 13px; font-weight: 600; color: #1a3a6b; margin: 0 0 8px; flex: 0 0 auto; }
.area-leader-contact { margin-left: 4px; text-decoration: none; }
.card-body ul { font-size: 12px; color: #555; line-height: 1.55; margin: 0; padding-left: 1.1em; flex: 0 0 auto; }
.card-body li { margin: 0; break-inside: avoid; }
.card-body ul:has(li:nth-child(3)) { column-count: 2; column-gap: 16px; }
.card-body .area-leader { flex: 0 0 auto; }

  
  .club-alt-name { font-size: 12px; color: #fff; font-style: italic; margin: 2px 0 0; white-space: nowrap; }
  .club-meta { font-size: 12px; color: #555; margin: 0 0 4px; }
  .club-links { font-size: 13px; margin: 0; }
  .club-links a { color: #1a3a6b; text-decoration: none; font-weight: 600; }
  .club-links a:hover { text-decoration: underline; }
  .card-copy { font-size: 14px; color: #333; margin: 0 0 10px; }
  .card-feature { max-width: 606px; margin: 0 auto; }
  .card-body .club-meta,
  .card-body .club-links,
  .card-body .card-copy {
    flex: 0 0 auto;
  }

  /* .page-hero is already display:flex (icon + page-hero-text sit
     side by side); this just lets a photo join as a second item and
     wrap below on narrow screens instead of squeezing the hero. 
  .page-hero-with-photo { flex-wrap: wrap; }
  .page-hero-with-photo .page-hero-text { flex: 1 1 240px; }
  .page-hero-photo { flex: 1 1 220px; max-width: 300px; margin: 0; border-radius: 10px; overflow: hidden; }
  .page-hero-photo img { width: auto; height: 100px; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
  @media (max-width: 640px) { .page-hero-photo { max-width: 100%; } }*/

  .page-hero-with-photo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .page-hero-photo {
    justify-self: center;
    width: 150px;
    height: 100px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .page-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Small screens: drop the photo entirely to keep more real content
     above the fold, and fall back to the same flex layout + padding
     every other page's hero uses. */
  @media (max-width: 600px) {
    .page-hero-with-photo { display: flex; padding-top: 16px; padding-bottom: 16px; }
    .page-hero-photo { display: none; }
  }

  /* .newsletter-list becomes a nested <ul>, which drops out of the
     theme's ".page-content > ul" narrow-column rule (that only
     targets DIRECT children of .page-content) — so this row
     restates the same max-width/margin/padding by hand to keep it
     lined up with the rest of the page's text column. */
  .newsletter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  .newsletter-list { flex: 1 1 320px; margin: 0; }
  .newsletter-cta { flex: 0 0 220px; }
  .newsletter-cta .btn-primary { white-space: nowrap; }

  @media (max-width: 600px) {
    .newsletter-cta { flex: 0 0 auto; width: 100%; }
  }

  /* Splits the 22-item archive list into two columns on wider
     screens so it isn't one long scroll. .page-content ul already
     gives it the bullet/padding/narrow-column treatment - this just
     adds column layout on top. */
  .archive-list {
    column-count: 2;
    column-gap: 32px;
  }
  .archive-list li {
    margin-bottom: 0.3em;
  }
  @media (max-width: 600px) {
    .archive-list { column-count: 1; }
  }

  /* Small italic white line under a card's name (role, alt name,
     etc.) - same look as the existing .club-alt-name, just under a
     more generic name since it's used for a second purpose here. */
  .card-subtitle { font-size: 12px; color: #fff; font-style: italic; margin: 2px 0 0; }

  /* Centers an incomplete last row (here: 5 cards in a 3-column
     grid, leaving 2 on their own). Grid's fixed 3-column tracks
     always span the full row width, so there's no leftover space
     for justify-content to center into - switching to flexbox for
     JUST this modifier class gives a short last row real spare
     space to be centered in, while every other .card-grid on the
     site (without this second class) keeps its normal grid layout. */
  .card-grid.card-grid-center-last {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .card-grid.card-grid-center-last .card {
    flex: 0 1 calc((100% - 24px) / 3);
  }
  @media (max-width: 600px) {
    .card-grid.card-grid-center-last .card { flex: 1 1 100%; }
  }

  .card-body .chair-mini-role { flex: 0 0 auto; }

  .chair-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 6px;
}
.chair-mini.chair-mini-stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: 0;
}

 .tier-stack {
    max-width: 606px;
    margin: 0 auto;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tier-arrow {
    text-align: center;
    color: #999;
    font-size: 18px;
    line-height: 1;
    margin: 0;
  }

  .roster-table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
  }
  .roster-table th {
    background: #f5f7fa;
    text-align: left;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid #ddd;
  }
  .roster-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    line-height: 1.5;
  }
  .roster-table .roster-role {
    display: block;
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 2px;
  }
  @media (max-width: 600px) {
    .roster-table { font-size: 13px; }
    .roster-table th, .roster-table td { padding: 6px 8px; }
  }

  .page-hero-photo-wide {
  width: 255px;
  height: 84px;
}
.page-hero-photo-wide img {
  object-fit: contain;
}