/*
 * UmmahArmy cover bands and crop overlays (Alisha item 2, Oct 1 2026).
 * Vendored locally. No CDN and no Google font is used anywhere in this file.
 *
 * The band is ONE fixed 16:6 landscape frame. On a phone the band is about 358px
 * wide, so the frame is about 134px tall there; on a desktop the container is up to
 * 1180px, so the frame is about 442px tall. The ratio never changes, so a cover
 * cropped once reads the same in both places.
 */

.ua-cover-band {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(135deg, #AEC4EA 0%, #C9B8E8 55%, #F0BFD4 100%);
}

.ua-cover-band img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A scrim across the bottom third of the cover. Only drawn when the page passes
   $scrim, which is any page that lets content overlap the band.
   The rule is: no text sits over the image unless a scrim of at least 45 percent is
   under it. This scrim is white, not black, on purpose: the text that can overlap on
   the organization page is near-black, so a dark scrim would push it UNDER 4.5:1 on a
   dark photograph. The solid part is 62 percent, well above the 45 percent floor, and
   it covers the bottom quarter of the band, which is the only part content can reach
   at any viewport. The short fade at the top of the scrim avoids a hard edge. */
.ua-cover-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 33%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.62) 25%,
        rgba(255, 255, 255, 0.62) 100%
    );
}

/* Deterministic fallback when no cover is set: the brand gradient plus the
   member's initial. Never a broken-image glyph and never a blank band. */
.ua-cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #AEC4EA 0%, #C9B8E8 55%, #F0BFD4 100%);
}

.ua-cover-fallback__initial {
    /* Oct 1 2026 (Ilma's feedback, via Tab): the large background initial in the
       cover fallback read as redundant, because the avatar below already shows the
       same initial. The band keeps the brand gradient plus the pattern; the initial
       is hidden here in ONE place so all four pages that share this stylesheet get
       the same fix. Reversible: delete this rule's display line. */
    display: none;
}

/* The crop overlay: two outlines and a safe zone, drawn over the live crop box so
   the Ameer or the member sees how one crop lands in both frames. */
.ua-crop-overlay {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 60;
}

.ua-crop-overlay.is-on {
    display: block;
}

.ua-crop-overlay__frame {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}

/* Phone frame: 358 of 1180, the measured width of the live banner on a phone. */
.ua-crop-overlay__frame--phone {
    inset: 0 auto 0 50%;
    transform: translateX(-50%);
    width: 30.34%;
    border-style: solid;
    background: rgba(255, 255, 255, 0.08);
}

/* Safe zone: the centre third. Anything important stays here. */
.ua-crop-overlay__safe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.333%;
    width: 33.334%;
    background: rgba(76, 99, 210, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.85);
}

.ua-crop-overlay__label {
    position: absolute;
    top: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: rgba(17, 24, 39, 0.75);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ua-crop-overlay__label--left {
    left: 0.25rem;
}

.ua-crop-overlay__label--centre {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 0.25rem;
}

/* The two live previews beside the logo cropper: the 112px object-contain box on the
   public page and the 64px object-cover box on the Ameer dashboard. One 1:1 crop
   must survive both. */
.ua-logo-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ua-logo-preview__box {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E3E5F3;
    border-radius: 0.75rem;
}

.ua-logo-preview__box img {
    display: block;
}

.ua-logo-preview__initial {
    font-weight: 700;
    color: #4C63D2;
    font-size: 1.5rem;
    line-height: 1;
}

.ua-logo-preview__box--contain {
    width: 112px;
    height: 112px;
    padding: 0.75rem;
}

.ua-logo-preview__box--contain img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ua-logo-preview__box--cover {
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
}

.ua-logo-preview__box--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}