/*
 * ST. MARY'S IOC COVENTRY
 * COMMITTEE CARD SPACING + IMAGE ALIGNMENT FIX V3
 *
 * Load AFTER:
 *   committee-profile-v1.css
 *   committee-profile-image-fix-v2.css
 *
 * Frontend only.
 */

/* ============================================================
   1. GRID GAPS
   Give every committee profile a clear, consistent gap.
   Works with Bootstrap-style col-* layouts.
   ============================================================ */

.attorney-v2 .row,
.attorney-v3 .row {
    display: flex !important;
    flex-wrap: wrap !important;

    margin-left: -12px !important;
    margin-right: -12px !important;
}

.attorney-v2 .row > [class*="col-"],
.attorney-v3 .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
}

/* Keep each card filling its Bootstrap column */
.attorney-v2 .item,
.attorney-v3 .item {
    /*width: 100% !important;*/
    height: 100% !important;
    margin: 5px !important;
}


/* ============================================================
   2. REMOVE DOUBLE / INNER CARD BORDER
   The legacy template contains nested wrappers, which produced the
   visible "card inside a card" effect in the screenshot.
   Keep ONE clean outer card only.
   ============================================================ */

.attorney-v2 .item,
.attorney-v3 .item {
    padding: 0 !important;

    border: 1px solid var(--ai-border, #E7E4DD) !important;
    border-radius: 18px !important;

    background: #fff !important;
    box-shadow: 0 10px 30px rgba(14,23,42,.06) !important;

    overflow: hidden !important;
}

.attorney-v2 .item > .inner,
.attorney-v3 .item > .inner,
.attorney-v2 .inner,
.attorney-v3 .inner {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


/* ============================================================
   3. IMAGE - FLUSH WITH CARD
   No white frame/padding around the portrait.
   ============================================================ */

.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 {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: 4 / 5 !important;

    border: 0 !important;
    border-radius: 0 !important;

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

    box-shadow: none !important;
    overflow: hidden !important;
}


/* Normal <img> portrait */
.attorney-v2 .photo > img,
.attorney-v3 .photo > img,
.attorney-v2 .thumb > img,
.attorney-v3 .thumb > img,
.attorney-v2 .item > img:first-child,
.attorney-v3 .item > img:first-child {
    display: block !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    object-fit: cover !important;
    object-position: center top !important;

    box-shadow: none !important;
}


/* Nested background/image holder */
.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 {
    inset: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

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

    box-shadow: none !important;
}


/* ============================================================
   4. TEXT AREA
   Separate the copy from the portrait cleanly.
   ============================================================ */

.attorney-v2 .text,
.attorney-v3 .text {
    margin: 0 !important;
    padding: 22px 22px 24px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #fff !important;
    box-shadow: none !important;

    text-align: left !important;
}


/* ============================================================
   5. CONSISTENT CARD HEIGHTS
   Keep button placement visually aligned when names wrap.
   ============================================================ */

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

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

.attorney-v2 .text p.button,
.attorney-v3 .text p.button {
    margin-top: auto !important;
    padding-top: 18px !important;
}


/* ============================================================
   6. HOVER
   Keep movement subtle so adjacent cards never visually collide.
   ============================================================ */

.attorney-v2 .item:hover,
.attorney-v3 .item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 38px rgba(14,23,42,.09) !important;
}


/* ============================================================
   7. TABLET
   ============================================================ */

@media (max-width: 991px) {

    .attorney-v2 .row,
    .attorney-v3 .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .attorney-v2 .row > [class*="col-"],
    .attorney-v3 .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
    }
}


/* ============================================================
   8. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .attorney-v2 .row,
    .attorney-v3 .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .attorney-v2 .row > [class*="col-"],
    .attorney-v3 .row > [class*="col-"] {
        width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin-bottom: 20px !important;
    }

    .attorney-v2 .item,
    .attorney-v3 .item {
        border-radius: 14px !important;
    }

    .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.7 !important;
    }

    .attorney-v2 .text,
    .attorney-v3 .text {
        padding: 19px 18px 21px !important;
    }
}

@media (min-width: 992px) {
    .col-md-3 {
        width: 24%!important;
    }
}