/* SISV v1 — Council pages (sisv-council and the LS / QS / VGP division councils).
   Included only by those pages. Scoped to html.v1. Simple, light layout in the SISV logo colours (gold + charcoal), site font. */

html.v1 .cc-page { --cc-ink: #13243a; --cc-gold: #1d6fd1; --cc-gold-d: #0e416f; --cc-line: #e6ebf2; --cc-paper: #f5f9fd; --cc-acc: var(--cc-gold); display: grid; gap: 28px; text-align: left; }
html.v1 .cc-page.is-ls { --cc-acc: #d97706; }
html.v1 .cc-page.is-qs { --cc-acc: #2f8a5f; }
html.v1 .cc-page.is-vgp { --cc-acc: #1d6fd1; }

/* ---------- Leadership (plain, no coloured background) ---------- */
html.v1 .cc-band { position: relative; padding: 0 0 26px; border-bottom: 1px solid var(--cc-line); color: var(--cc-ink); }
html.v1 .cc-crest { display: block; margin: 0 0 20px; padding-left: 12px; border-left: 3px solid var(--cc-gold); }
html.v1 .cc-crest-ico { display: none; }
html.v1 .cc-crest-txt small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-gold-d); }
html.v1 .cc-crest-txt b { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--cc-ink); }
html.v1 .cc-rule { display: none; }

html.v1 .cc-lead { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; }
html.v1 .cc-lead-photo { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--cc-paper); border: 1px solid var(--cc-line); }
html.v1 .cc-lead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
html.v1 .cc-lead-role { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-gold-d); }
html.v1 .cc-lead-name { margin: 6px 0 8px; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cc-ink); }
html.v1 .cc-lead-sub { margin: 0; max-width: 480px; font-size: 14.5px; line-height: 1.65; color: #475569; }
html.v1 .cc-lead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html.v1 .cc-lead-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #334155; background: var(--cc-paper); border: 1px solid var(--cc-line); }
html.v1 .cc-lead-chips .fa { color: var(--cc-gold); }
/* other people shown with the leader (e.g. Immediate Past President, Advisor) */
html.v1 .cc-band-more { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
html.v1 .cc-mini { display: flex; align-items: center; gap: 12px; min-width: 240px; padding: 10px 16px 10px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--cc-line); }
html.v1 .cc-mini img { width: 85px; height: 85px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--cc-paper); }
html.v1 .cc-mini small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-gold-d); }
html.v1 .cc-mini b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--cc-ink); }

/* ---------- Section headings ---------- */
html.v1 .cc-sec { display: grid; gap: 16px; }
html.v1 .cc-sec-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cc-line);
    text-align: center;
}
html.v1 .cc-sec-head small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-gold-d); }
html.v1 .cc-sec-head h3 { margin: 2px 0 0; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--cc-ink); }
html.v1 .cc-sec-head p { margin: 0; max-width: 420px; font-size: 13.5px; color: #64748b; }

/* ---------- Portrait cards ----------
   Card photos are kept narrower than the leader's photo (200px; 160px on phones). */
html.v1 .cc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); }
html.v1 .cc-grid.is-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 185px)); }
html.v1 .cc-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 170px)); }
html.v1 .cc-grid.is-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 165px)); gap: 14px; }
html.v1 .cc-card { position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--cc-line); transition: border-color .2s ease, box-shadow .2s ease; }
html.v1 .cc-card:hover { border-color: #c7d4e5; box-shadow: 0 8px 20px -14px rgba(16, 36, 64, .45); }
html.v1 .cc-card.is-ls { --cc-card-acc: #d97706; }
html.v1 .cc-card.is-qs { --cc-card-acc: #2f8a5f; }
html.v1 .cc-card.is-vgp { --cc-card-acc: #1d6fd1; }
html.v1 .cc-photo { position: relative; aspect-ratio: 4 / 5; background: var(--cc-paper); overflow: hidden; }
html.v1 .cc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
html.v1 .cc-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--cc-card-acc, var(--cc-acc));display:none;}
html.v1 .cc-cap { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; text-align: left; border-top: 2px solid var(--cc-card-acc, var(--cc-acc)); }
html.v1 .cc-role { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-gold-d);text-align:center; }
html.v1 .cc-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--cc-ink); overflow-wrap: anywhere;text-align:center;}
html.v1 .cc-link { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--cc-gold-d) !important; }
html.v1 .cc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html.v1 .cc-grid.is-sm .cc-name { font-size: 14.5px; }
html.v1 .cc-grid.is-sm .cc-cap { padding: 10px 12px 12px; }

/* ---------- Governance + links ---------- */
html.v1 .cc-gov { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border-radius: 10px; background: var(--cc-paper); border: 1px solid var(--cc-line); }
html.v1 .cc-gov h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--cc-ink); }
html.v1 .cc-gov p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #3b4a5c; }
html.v1 .cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.v1 .cc-stat { padding: 12px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--cc-line); text-align: center; }
html.v1 .cc-stat b { display: block; font-size: 26px; font-weight: 700; line-height: 1; color: var(--cc-gold-d); }
html.v1 .cc-stat span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
html.v1 .cc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
html.v1 .cc-foot { display: flex; justify-content: center; }

@media (max-width: 991px) {
    html.v1 .cc-gov { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    html.v1 .cc-lead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    html.v1 .cc-lead-photo { width: 160px; }
    html.v1 .cc-lead-name { font-size: 22px; }
    html.v1 .cc-lead-sub { font-size: 14px; }
    html.v1 .cc-crest-txt b { font-size: 19px; }
    html.v1 .cc-mini { min-width: 0; width: 100%; }
    html.v1 .cc-grid.is-3, html.v1 .cc-grid.is-2, html.v1 .cc-grid, html.v1 .cc-grid.is-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 140px)); gap: 12px; }
    html.v1 .cc-name { font-size: 14.5px; }
    html.v1 .cc-sec-head h3 { font-size: 19px; }
}

/* ---------- CMC page (sisv-council): each group is one centred row across the full width ---------- */
html.v1 .cc-page.is-cmc .cc-crest { text-align: center; padding-left: 0; border-left: 0; }
html.v1 .cc-page.is-cmc .cc-lead { grid-template-columns: 230px auto; justify-content: center; gap: 36px; }
html.v1 .cc-page.is-cmc .cc-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: 100px; }
html.v1 .cc-page.is-cmc .cc-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; gap: 80px; }
html.v1 .cc-page.is-cmc .cc-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) {
    html.v1 .cc-page.is-cmc .cc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    html.v1 .cc-page.is-cmc .cc-lead { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    html.v1 .cc-page.is-cmc .cc-grid.is-3, html.v1 .cc-page.is-cmc .cc-grid.is-2 { grid-template-columns: repeat(auto-fill, minmax(120px, 140px)); gap: 12px; }
    html.v1 .cc-page.is-cmc .cc-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones: always 3 people per row (2 for a pair, and 2 + 2 when a group has exactly 4) ---------- */
@media (max-width: 767px) {
    html.v1 .cc-lead, html.v1 .cc-page.is-cmc .cc-lead { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    html.v1 .cc-grid, html.v1 .cc-grid.is-3, html.v1 .cc-grid.is-sm,
    html.v1 .cc-page.is-cmc .cc-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    html.v1 .cc-grid.is-2, html.v1 .cc-page.is-cmc .cc-grid.is-2,
    html.v1 .cc-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, calc((100% - 20px) / 3))); justify-content: center; gap: 16px 24px; }
    html.v1 .cc-cap { padding: 8px 6px 10px; gap: 2px; }
    html.v1 .cc-role { font-size: 10px; letter-spacing: .02em; }
    html.v1 .cc-name, html.v1 .cc-grid.is-sm .cc-name { font-size: 13px; }
    html.v1 .cc-link { font-size: 11px; text-align: center; }
    html.v1 .cc-badge { top: 6px; left: 6px; padding: 1px 6px; font-size: 10px; }
}

/* ---------- LS / QS / VGP council pages: everything centred on desktop and tablet, like the CMC page ---------- */
@media (min-width: 768px) {
    html.v1 .cc-page:not(.is-cmc) .cc-crest { text-align: center; padding-left: 0; border-left: 0; }
    html.v1 .cc-page:not(.is-cmc) .cc-lead { grid-template-columns: 200px auto; justify-content: center; gap: 36px; }
    html.v1 .cc-page:not(.is-cmc) .cc-band-more { justify-content: center; }
    html.v1 .cc-page:not(.is-cmc) .cc-sec-head { justify-content: center; text-align: center; }
    html.v1 .cc-page:not(.is-cmc) .cc-grid { display: flex; flex-wrap: wrap; justify-content: center; }
    html.v1 .cc-page:not(.is-cmc) .cc-grid > .cc-card { flex: 0 0 170px; }
    html.v1 .cc-page:not(.is-cmc) .cc-grid.is-3 > .cc-card { flex-basis: 185px; }
    html.v1 .cc-page:not(.is-cmc) .cc-grid.is-sm > .cc-card { flex-basis: 165px; }
}