/* ============================================================
   EBRPHA — page-level layout helpers (subpages)
   ============================================================ */

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--text-small); margin-bottom: 1.5rem; color: var(--scheme-muted); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--scheme-text); text-decoration: underline; }

/* page header */
.pagehead__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: end; }
.pagehead__grid > div:first-child { max-width: 46rem; }
.pagehead .muted { margin-top: 1rem; }
.pagehead__jump { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; }
.pagehead__jump .eyebrow { margin-bottom: 0.4rem; opacity: 0.7; }
.pagehead__jump a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--scheme-border); }
.pagehead__jump a::before { content: "→"; opacity: 0.6; }
.pagehead__jump a:hover { color: var(--color-web-orange); }
@media (min-width: 992px) {
  .pagehead__grid { grid-template-columns: 1.6fr 1fr; gap: 4rem; }
}

/* two-column split */
.split-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.split-2--top { align-items: start; }
@media (min-width: 900px) { .split-2 { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.split-head { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 900px) { .split-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* card grids */
.cards-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.cards-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.cards-4 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .cards-2 { grid-template-columns: repeat(2,1fr); } .cards-3 { grid-template-columns: repeat(2,1fr); } .cards-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .cards-3 { grid-template-columns: repeat(3,1fr); } .cards-4 { grid-template-columns: repeat(4,1fr); } }

/* steps on dark scheme need lighter accent already handled by --accent fallback */
.steps--dark .step { border-top-color: var(--color-white-20); }
.steps--dark .step .num { color: var(--color-web-orange); }
ol.steps { list-style: none; padding: 0; }

/* cta band */
.cta-band {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 2rem; border: 1px solid var(--scheme-border);
  border-radius: var(--radius-card); background: var(--color-white-5);
}
.scheme-3 .cta-band { background: var(--color-neutral-lightest); }
@media (min-width: 768px) { .cta-band { flex-direction: row; align-items: center; justify-content: space-between; } }

/* community cards */
.community { display: flex; flex-direction: column; }
.community .imgslot { aspect-ratio: 16/10; }

/* community slider (horizontal, 3-up on desktop, snap + arrows) */
.cslider { margin-top: 2.5rem; }
.cslider__viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.cslider__viewport::-webkit-scrollbar { display: none; }
.cslider__track { display: flex; gap: 1.5rem; }
.cslider__track > .card { scroll-snap-align: start; flex: 0 0 100%; }
@media (min-width: 640px) { .cslider__track > .card { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 992px) { .cslider__track > .card { flex-basis: calc((100% - 3rem) / 3); } }
.cslider__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.cslider__btn { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--scheme-border); background: transparent; color: inherit; border-radius: 0; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; }
.cslider__btn:hover:not(:disabled) { border-color: var(--scheme-text); background: var(--scheme-text); color: var(--scheme-bg, #fff); }
.cslider__btn:disabled { opacity: .3; cursor: default; }
.cslider__btn svg { width: 1.4rem; height: 1.4rem; }
.cslider__progress { font-size: var(--text-small); color: var(--scheme-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cslider__progress b { color: var(--scheme-text); font-weight: 700; }

/* community manager band */
.cmgr { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .cmgr { flex-direction: row; align-items: center; justify-content: space-between; } }

/* community managers grid */
.mgr { display: flex; flex-direction: column; }
.mgr__head { display: flex; align-items: center; gap: 1rem; }
.mgr__photo { width: 4.5rem; flex: none; aspect-ratio: 1/1; border-radius: 0; }
.mgr__communities { margin: 1rem 0 1.1rem; font-size: var(--text-small); }
.mgr__communities .muted { color: var(--scheme-muted); }
.mgr__contact { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--scheme-border); }
.mgr__phone { font-size: var(--text-small); color: var(--scheme-muted); white-space: nowrap; }

/* ---- Status banner (waitlist) ---- */
.status {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding: 2rem; border-radius: var(--radius-card);
  border: 1px solid var(--scheme-border);
}
@media (min-width: 768px) { .status { grid-template-columns: max-content 1fr; align-items: center; gap: 2rem; } }
.status__dot { width: 1rem; height: 1rem; border-radius: 999px; flex: none; }
.status__pill { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 999px; font-size: var(--text-medium); }
.status--open .status__pill { background: var(--color-sea-green-lightest); color: var(--color-sea-green-dark); }
.status--open .status__dot { background: var(--color-sea-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-sea-green) 25%, transparent); }
.status--closed .status__pill { background: var(--color-mojo-lightest); color: var(--color-mojo-dark); }
.status--closed .status__dot { background: var(--color-mojo); }
.scheme-1 .status, .scheme-2 .status { background: var(--color-white-5); }

/* two big choice cards */
.choice {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem; border-radius: var(--radius-card);
  border: 1px solid var(--scheme-border); background: var(--scheme-bg);
  transition: transform 0.18s ease, border-color 0.18s ease;
  min-height: 14rem;
}
.choice:hover { transform: translateY(-3px); border-color: var(--scheme-accent); }
.choice .ico { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-button); background: var(--color-orient-lightest); color: var(--color-orient); }
.scheme-1 .choice .ico, .scheme-2 .choice .ico { background: var(--color-white-10); color: var(--color-web-orange); }
.choice .ico svg { width: 1.6rem; height: 1.6rem; }
.choice h3 { font-size: var(--text-h4); }
.choice .btn-link { margin-top: auto; }

/* ---- forms / login ---- */
.formcard {
  max-width: 30rem; width: 100%; margin-inline: auto;
  padding: 2rem; border-radius: var(--radius-card);
  border: 1px solid var(--scheme-border); background: var(--scheme-bg);
}
.scheme-1 .formcard, .scheme-2 .formcard { background: var(--color-white-5); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 4rem; }
.pw-toggle { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--scheme-accent); font-weight: 600; font-size: var(--text-small); padding: 0.35rem 0.5rem; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; border: 1px solid var(--scheme-border); margin-bottom: 1.5rem; }
.tabs button { padding: 0.5rem 1.1rem; border-radius: 999px; border: none; background: transparent; color: inherit; font-weight: 600; font-size: var(--text-small); }
.tabs button[aria-selected="true"] { background: var(--color-orient); color: var(--color-white); }
.scheme-1 .tabs button[aria-selected="true"], .scheme-2 .tabs button[aria-selected="true"] { background: var(--color-white); color: var(--color-orient-darkest); }

/* ---- resource / document list ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.searchbox { position: relative; flex: 1; min-width: 16rem; }
.searchbox .input { padding-left: 2.75rem; }
.searchbox svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; color: var(--scheme-muted); }

.doc-list { display: flex; flex-direction: column; border-top: 1px solid var(--scheme-border); }
.doc {
  display: grid; grid-template-columns: max-content 1fr max-content; gap: 1.25rem; align-items: center;
  padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--scheme-border);
}
.doc__ico { width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--radius-button); display: grid; place-items: center; background: var(--color-orient-lightest); color: var(--color-orient); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; }
.doc__main h3 { font-size: var(--text-h6); margin-bottom: 0.2rem; }
.doc__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--text-small); color: var(--scheme-muted); margin-top: 0.35rem; }
.doc__actions { display: flex; gap: 0.5rem; }
@media (max-width: 640px) {
  .doc { grid-template-columns: max-content 1fr; }
  .doc__actions { grid-column: 1 / -1; }
}

/* ---- updates / notices list ---- */
.updates { display: flex; flex-direction: column; gap: 1rem; }
.update { display: grid; grid-template-columns: max-content 1fr; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--scheme-border); border-radius: var(--radius-card); transition: border-color 0.18s ease; }
.update:hover { border-color: var(--scheme-accent); }
.update__date { text-align: center; min-width: 4rem; }
.update__date .d { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h4); line-height: 1; }
.update__date .m { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--scheme-muted); }
.update__body h3 { font-size: var(--text-h6); margin: 0.3rem 0 0.4rem; }
.update__body p { color: var(--scheme-muted); }
@media (max-width: 540px) { .update { grid-template-columns: 1fr; gap: 0.75rem; } .update__date { display: flex; gap: 0.5rem; align-items: baseline; text-align: left; } }

/* ---- press / article list ---- */
.press { display: flex; flex-direction: column; }
.press a.row { display: grid; grid-template-columns: 1fr max-content; gap: 1.5rem; align-items: center; padding: 1.5rem 0.25rem; border-bottom: 1px solid var(--scheme-border); transition: padding 0.18s ease; }
.press a.row:first-child { border-top: 1px solid var(--scheme-border); }
.press a.row:hover { padding-left: 0.75rem; }
.press .row h3 { font-size: var(--text-h5); margin-bottom: 0.35rem; }
.press .row .meta { font-size: var(--text-small); color: var(--scheme-muted); }
.press .row .arrow { width: 1.4rem; height: 1.4rem; transition: transform 0.18s ease; }
.press a.row:hover .arrow { transform: translateX(4px); }

/* ---- video / gallery grid ---- */
.gallery { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .gallery { grid-template-columns: repeat(3,1fr); } }
.tile { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--scheme-border); background: var(--scheme-bg); }
.tile .thumb { position: relative; aspect-ratio: 16/10; }
.tile .thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.tile .thumb .play span { width: 3.25rem; height: 3.25rem; border-radius: 999px; background: var(--color-white); color: var(--color-orient-darkest); display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); }
.tile .thumb .play svg { width: 1.4rem; height: 1.4rem; }
.tile .pad { padding: 1.1rem 1.25rem 1.4rem; }
.tile .pad h3 { font-size: var(--text-h6); margin-bottom: 0.3rem; }
.tile .pad p { font-size: var(--text-small); color: var(--scheme-muted); }
.gallery.photos .tile .pad { display: none; }
.gallery.photos .imgslot { aspect-ratio: 1/1; border-radius: 0; }

/* ---- team grid ---- */
.team { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .team { grid-template-columns: repeat(4,1fr); } }
.member .imgslot { aspect-ratio: 1/1; border-radius: var(--radius-card); margin-bottom: 1rem; }
.member h3 { font-size: var(--text-h6); }
.member .role { font-size: var(--text-small); color: var(--color-orient); font-weight: 600; }
.member p { font-size: var(--text-small); color: var(--scheme-muted); margin-top: 0.5rem; }

/* ---- event schedule ---- */
.events { display: flex; flex-direction: column; }
.event { display: grid; grid-template-columns: max-content 1fr max-content; gap: 1.5rem; align-items: center; padding: 1.5rem 0.25rem; border-bottom: 1px solid var(--scheme-border); }
.event:first-child { border-top: 1px solid var(--scheme-border); }
.event__when { text-align: center; min-width: 5rem; padding: 0.75rem; border-radius: var(--radius-button); background: var(--color-orient-lightest); color: var(--color-orient-dark); }
.event__when .d { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h4); line-height: 1; }
.event__when .m { font-size: var(--text-tiny); text-transform: uppercase; letter-spacing: 0.06em; }
.event__info h3 { font-size: var(--text-h6); margin-bottom: 0.3rem; }
.event__info .meta { font-size: var(--text-small); color: var(--scheme-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
@media (max-width: 700px) { .event { grid-template-columns: max-content 1fr; } .event .btn { grid-column: 2; justify-self: start; } }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-item { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--scheme-border); }
.contact-item .ico { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-button); display: grid; place-items: center; background: var(--color-orient-lightest); color: var(--color-orient); }
.contact-item .ico svg { width: 1.3rem; height: 1.3rem; }
.contact-item h3 { font-size: var(--text-medium); margin-bottom: 0.2rem; }
.contact-item p, .contact-item a { color: var(--scheme-muted); font-size: var(--text-medium); }
.contact-item a:hover { color: var(--color-orient); text-decoration: underline; }
.map { aspect-ratio: 16/11; }

/* benefits / value props */
.values { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .values { grid-template-columns: repeat(4,1fr); } }
.value .ico { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-button); background: var(--color-white-10); color: var(--color-web-orange); margin-bottom: 1rem; }
.scheme-3 .value .ico { background: var(--color-orient-lightest); color: var(--color-orient); }
.value .ico svg { width: 1.6rem; height: 1.6rem; }
.value h3 { font-size: var(--text-h6); margin-bottom: 0.4rem; }
.value p { color: var(--scheme-muted); font-size: var(--text-small); }

/* misc */
.lead-measure { max-width: 40rem; }
.pagehead .h1 { margin-bottom: 0; font-size: 50px; }
.pagehead .text-large { font-size: 16px; }
.section-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.section-label .eyebrow { color: var(--color-orient); }
.scheme-1 .section-label .eyebrow, .scheme-2 .section-label .eyebrow { color: var(--color-web-orange); }