/**
 * DSBN School Profiles - Frontend Styles
 * Uses the dsbn theme's --dsbn-* design tokens (css/design-tokens.css).
 */

.dsbn-school-directory {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.dsbn-school-directory .dsbn-school-search {
    border: 2px solid var(--dsbn-color-accent);
    border-radius: var(--dsbn-radius-sm);
    padding: 0.5rem;
}

.dsbn-school-directory .dsbn-school-search input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    box-shadow: none;
    min-height: 44px;
    padding-inline: 0.5rem;
    font-family: var(--dsbn-font-body);
    font-size: var(--dsbn-fs-body);
    color: var(--dsbn-color-body);
    background: transparent;
}

.dsbn-school-directory .dsbn-school-search input:focus-visible {
    outline: 2px solid var(--dsbn-color-primary);
    outline-offset: 2px;
}

.dsbn-school-directory__hint {
    margin-top: 1rem;
    color: var(--dsbn-color-muted);
}

.dsbn-school-directory__groups {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 768px) {
    .dsbn-school-directory__groups {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.dsbn-school-directory h2 {
    font-family: var(--dsbn-font-heading);
    color: var(--dsbn-color-primary);
    margin-top: 0;
}

.dsbn-school-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dsbn-school-list--columns {
    column-count: 2;
    column-gap: 2rem;
}

@media (max-width: 560px) {
    .dsbn-school-list--columns {
        column-count: 1;
    }
}

.dsbn-school-item {
    margin-bottom: 0.5rem;
    break-inside: avoid;
}

.dsbn-school-list .dsbn-school-link {
    color: var(--dsbn-color-primary);
    text-decoration: none;
    font-family: var(--dsbn-font-body);
    font-size: 0.95rem;
}

.dsbn-school-list .dsbn-school-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: var(--dsbn-color-secondary);
}

.dsbn-school-directory__empty {
    color: var(--dsbn-color-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Single school profile — same card treatment as the theme's own
   .dsbn-staff-card (patterns.css), reused rather than reinvented, since
   that's already the established "structured info on a plain content
   page" pattern site-wide. .dsbn-school-cards is a 2-column grid: an
   even 50/50 split between the contact card and the logo card when
   both are present. .dsbn-school-card:only-child spans both columns
   when there's no logo, so it doesn't leave the second column empty. */
.dsbn-school-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 1.5rem;
    margin-block: clamp(1.5rem, 3vw, 2rem);
}

.dsbn-school-card:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .dsbn-school-cards {
        grid-template-columns: 1fr;
    }
}

.dsbn-school-logo-card {
    padding: 1.25rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dsbn-radius-lg);
    background: var(--dsbn-color-surface);
    box-shadow: 0 4px 32px rgba(18, 35, 61, 0.16);
}

.dsbn-school-logo-card img {
    display: block;
    width: 10rem;
    max-width: 100%;
    height: auto;
}

.dsbn-school-card {
    box-sizing: border-box;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--dsbn-radius-lg);
    background: var(--dsbn-color-surface);
    box-shadow: 0 4px 32px rgba(18, 35, 61, 0.16);
}

.dsbn-school-card__title {
    margin: 0 0 0.75rem;
    font-family: var(--dsbn-font-body);
    font-size: 1.2rem;
    font-weight: var(--dsbn-fw-bold);
    color: var(--dsbn-color-ink);
}

.dsbn-school-type {
    font-weight: var(--dsbn-fw-medium);
    color: var(--dsbn-color-body);
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Icon-led list, same construction as .dsbn-staff-card__contact-list:
   a colored ::before mask icon per item, chosen by field via an explicit
   modifier class (not content-sniffed like the staff card's phone/mail
   :has(a) check — with 4 distinct field types here, two of which contain
   a link, that heuristic can't tell them apart). */
.dsbn-school-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsbn-school-details li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.95rem;
}

.dsbn-school-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.1rem;
    height: 1.1rem;
    background-color: var(--dsbn-color-primary);
}

.dsbn-school-details__phone::before {
    -webkit-mask: var(--dsbn-icon-phone) center / contain no-repeat;
    mask: var(--dsbn-icon-phone) center / contain no-repeat;
}

.dsbn-school-details__website::before {
    -webkit-mask: var(--dsbn-icon-globe) center / contain no-repeat;
    mask: var(--dsbn-icon-globe) center / contain no-repeat;
}

.dsbn-school-details__address::before {
    -webkit-mask: var(--dsbn-icon-location) center / contain no-repeat;
    mask: var(--dsbn-icon-location) center / contain no-repeat;
}

.dsbn-school-details__email::before {
    -webkit-mask: var(--dsbn-icon-mail) center / contain no-repeat;
    mask: var(--dsbn-icon-mail) center / contain no-repeat;
}

.dsbn-school-extra-details,
.dsbn-school-boundary,
.dsbn-school-map {
    margin-top: 1.75rem;
}

.dsbn-school-map iframe {
    display: block;
    border-radius: var(--dsbn-radius-sm);
    box-shadow: var(--dsbn-shadow-soft);
}