/*
   Heart-Safe recognition banner (FF-2725).

   Shared by the school detail panel and the team page, so nothing here assumes
   a container width. Palette follows admin-team.css — slate neutrals, Project
   ADAM burgundy for the one accent — rather than the Bootstrap gray variables
   the rest of site.css uses; this component only appears on pages built in the
   former.

   The buttons themselves are NOT restyled here. They carry
   .admin-team-primary-btn / .admin-team-secondary-btn straight from
   admin-team.css, so the upload control is the same pill as every other action
   on the page and cannot drift from them. Only the two adjustments those
   classes cannot express — a disabled state for a <span> activator, and a
   danger tint on Remove — are added at the bottom of this file.
*/

.school-banner {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 1rem 0 0;
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   The image
   ═══════════════════════════════════════════════════════ */
.school-banner-image {
    display: block;
    width: 100%;
    /* Capped rather than fixed: an ADAM-issued banner and a photo of the
       response team have very different aspect ratios, and letterboxing one to
       suit the other looks like a bug. Height follows the image; the cap stops
       a portrait photo pushing the page content off screen. */
    max-height: 240px;
    object-fit: contain;
    object-position: left center;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ═══════════════════════════════════════════════════════
   Empty-state placeholder
   ═══════════════════════════════════════════════════════ */
.school-banner-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px dashed #d7dee8;
    border-radius: 14px;
    /* A hair off white so the panel separates from the card behind it without
       needing a heavier border. */
    background: #fbfcfd;
}

.school-banner-placeholder-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    margin-bottom: 0.125rem;
}
.school-banner-placeholder-glyph .mud-icon-root {
    font-size: 1.375rem !important;
}

.school-banner-placeholder-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.school-banner-placeholder-hint {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* MudFileUpload wraps its activator in a label carrying its own margins; strip
   them so the button sits on the placeholder's own vertical rhythm. */
.school-banner-upload,
.school-banner-upload .mud-input-control,
.school-banner-upload label {
    margin: 0 !important;
}
.school-banner-upload label {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   Notes — withheld, or empty with nothing to do about it
   ═══════════════════════════════════════════════════════ */
.school-banner-note {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}
.school-banner-note .mud-icon-root {
    flex-shrink: 0;
    color: #94a3b8;
}

/* Matches .admin-team-issues.warning so a withheld banner and an overdue drill
   read as the same class of message on the same page. */
.school-banner-note--withheld {
    background: #fffaf2;
    border-color: #fde9c8;
    color: #7c4a11;
}
.school-banner-note--withheld .mud-icon-root {
    color: #b45309 !important;
}

/* ═══════════════════════════════════════════════════════
   Action bar, shown only once an image exists
   ═══════════════════════════════════════════════════════ */
.school-banner-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.school-banner-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}

.school-banner-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════
   The two things the borrowed button classes cannot express
   ═══════════════════════════════════════════════════════ */

/* The activator is a <span>, so :disabled never matches it. */
.admin-team-primary-btn.is-disabled,
.admin-team-secondary-btn.is-disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* Remove stays a neutral secondary until hover, then declares itself. A
   permanently red button beside Replace would read as the primary action. */
.school-banner-danger-btn:hover:not(:disabled) {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

@media (max-width: 640px) {
    .school-banner-bar-actions {
        margin-left: 0;
    }
}