/*
 * ST. MARY'S IOC COVENTRY
 * COMMITTEE PROFILE IMAGE FIX V2
 *
 * Load AFTER committee-profile-v1.css.
 * Frontend-only.
 *
 * Fixes committee thumbnails that are rendered as CSS background images
 * instead of <img> tags.
 */

/* ============================================================
   COMMITTEE THUMBNAIL FIX
   ============================================================ */

/*
 * The committee template can render portraits as background-image on
 * .photo / .thumb rather than as an <img>. V1 styled the <img> path,
 * but a background-only element needs its own height/aspect ratio.
 */
.attorney-v2 .photo,
.attorney-v3 .photo,
.attorney-v2 .thumb,
.attorney-v3 .thumb {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-color: #F1EFE9 !important;

    overflow: hidden !important;
}

/* If the theme uses a nested background-image element */
.attorney-v2 .photo .photo-inner,
.attorney-v3 .photo .photo-inner,
.attorney-v2 .thumb .photo-inner,
.attorney-v3 .thumb .photo-inner,
.attorney-v2 .photo .image,
.attorney-v3 .photo .image,
.attorney-v2 .thumb .image,
.attorney-v3 .thumb .image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    position: absolute !important;
    inset: 0 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

/* If the portrait is a normal img, keep it filling exactly the same frame */
.attorney-v2 .photo > img,
.attorney-v3 .photo > img,
.attorney-v2 .thumb > img,
.attorney-v3 .thumb > img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/*
 * Some legacy attorney templates put the background directly on another
 * first child inside the card. If that child has an inline background-image,
 * make it a portrait frame too.
 */
.attorney-v2 .item > [style*="background-image"]:first-child,
.attorney-v3 .item > [style*="background-image"]:first-child,
.attorney-v3 .inner > [style*="background-image"]:first-child {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

/* Keep the text below the portrait and prevent legacy negative positioning */
.attorney-v2 .text,
.attorney-v3 .text {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    transform: none !important;
    background: #fff !important;
}


/* ============================================================
   CARD GRID CONSISTENCY
   ============================================================ */

.attorney-v2 .item,
.attorney-v3 .item,
.attorney-v3 .inner {
    display: flex !important;
    flex-direction: column !important;
}

.attorney-v2 .text,
.attorney-v3 .text {
    flex: 1 1 auto !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .attorney-v2 .photo,
    .attorney-v3 .photo,
    .attorney-v2 .thumb,
    .attorney-v3 .thumb,
    .attorney-v2 .item > [style*="background-image"]:first-child,
    .attorney-v3 .item > [style*="background-image"]:first-child,
    .attorney-v3 .inner > [style*="background-image"]:first-child {
        aspect-ratio: 4 / 4.8 !important;
    }
}


/* ============================================================
   SAFETY FALLBACK
   If a card genuinely has no image/background, avoid a huge blank block.
   Modern browsers support :has().
   ============================================================ */

@supports selector(.x:has(.y)) {

    .attorney-v2 .photo:not(:has(img))[style=""],
    .attorney-v3 .photo:not(:has(img))[style=""],
    .attorney-v2 .thumb:not(:has(img))[style=""],
    .attorney-v3 .thumb:not(:has(img))[style=""] {
        display: none !important;
        aspect-ratio: auto !important;
    }
}