/* Texas Baptist Children's Home only.
   Styles here load after site.css on this site and nowhere else.
   Put any look change that was asked for this site alone here, with a short note saying what it is and when it was asked for.
   Once a month we review these files and move anything all four sites should share into site.css. */

/* Scripture band styled like tbch.org: light gray band, the verse's theme word above it in the TBCH blue, Cabin text in dark blue, reference in bold capitals. Text stays our size, not the live site's larger size (Luke, 2026-11-02) */
.verse-band { background: #f2f1f3; }
.verse-word { margin: 0 0 .9em; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: #08a7e0; }
.verse-text { font-family: var(--font-body); font-weight: 400; color: #004d85; }
.verse-rotator cite { font-weight: 700; font-size: 1rem; text-transform: uppercase; color: #0c2537; }

/* Homepage: the 2025 numbers sit under the "Our name says" story in the same section, instead of a section of their own (Luke, 2026-11-02) */
.name-stats { margin-top: clamp(40px, 5vw, 64px); }
.name-stats .fine { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }

/* Staff and counselor cards: light gray cards with no border, four across on wide screens, credentials on their own small line under the name, and the contact or bio link lined up at the bottom of every card (Luke, 2026-11-02) */
.people { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.person { background: #f4f6f8; border: 0; }
.person-name { line-height: 1.25; }
.person-cred { display: block; margin-top: 3px; font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.person-role { margin-top: 6px; line-height: 1.4; text-wrap: pretty; }
@media (min-width: 621px) {
  .person { display: flex; flex-direction: column; }
  .person-body { display: flex; flex-direction: column; flex: 1; }
  .person-contact, .person .bio-open { margin-top: auto; padding-top: 10px; }
}
/* Counselor bios open in a pop-up on the same page instead of stretching the card (Luke, 2026-11-02) */
.bio-open { align-self: flex-start; margin-top: 8px; padding: 0; background: none; border: 0; font: 600 .92rem var(--font-body); color: var(--brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; cursor: pointer; }
.bio-open:hover { text-decoration-color: currentColor; }
html:has(.bio-dialog[open]) { overflow: hidden; }
.bio-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--radius); background: #fff; color: var(--text); box-shadow: 0 24px 64px rgba(15, 20, 25, .28); overflow: auto; overscroll-behavior: contain; }
.bio-dialog::backdrop { background: rgba(9, 34, 57, .55); backdrop-filter: blur(2px); }
.bio-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 12px 12px 0; background: linear-gradient(#fff 70%, rgba(255,255,255,0)); }
.bio-close { padding: .45em 1em; border: 1px solid var(--line); border-radius: var(--btn-radius, 6px); background: #fff; font: 600 .9rem var(--font-ui, var(--font-body)); color: var(--ink); cursor: pointer; }
.bio-close:hover { border-color: var(--ink); }
.bio-dialog-body { padding: 0 clamp(20px, 4vw, 32px) 28px; }
.bio-head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.bio-head img { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; }
.bio-head .person-name { font-size: 1.25rem; }
.bio-dialog .bio p { margin: 0 0 1em; }
.bio-dialog .bio .h4 { margin: 1.4em 0 .4em; }
.bio-dialog .bio ul { margin: 0 0 1em; padding-left: 1.2em; }