/* ─── AAPS single-pet template ─────────────────────────────────────────────
   Image gallery (large active image + thumbnail strip) and helpers for the
   dynamic pet-info card. UI is driven entirely by the Elementor template; this
   file only styles the custom [pet_gallery] markup and hides empty fields.    */

.pet-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.pet-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f1f1;
}

.pet-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pet-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

/* When fewer than 5 images, keep thumbs a sensible fixed size rather than
   stretching across the whole row. */
.pet-gallery-thumbs[data-count="1"] { display: none; }
.pet-gallery-thumbs[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 110px)); }
.pet-gallery-thumbs[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 110px)); }
.pet-gallery-thumbs[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 110px)); }

.pet-gallery-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #f1f1f1;
    aspect-ratio: 1 / 1;
    transition: border-color .15s ease, opacity .15s ease;
    opacity: .75;
}
.pet-gallery-thumb [type=button], [type=submit], button{
    padding: 0!important;
    border: none!important;

}

.pet-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pet-gallery-thumb:hover { opacity: 1; }

.pet-gallery-thumb.is-active {
    border-color: #2E9BF0;
    opacity: 1;
}

/* Gender symbol sits inline next to the pet name. Sized to read at roughly the
   pet name's height (it lives in its own widget, so em units would track the
   widget's base font rather than the heading). */
.pet-gender-symbol-img {
    width: 34px;
    height: 34px;
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 767px) {
    .pet-gender-symbol-img { width: 26px; height: 26px; }
}

/* Empty-field handling: rows/traits the JS flags as empty are removed from
   layout entirely so the card never shows a dangling label or bullet. */
.pet-meta-row.pet-is-empty,
.pet-trait.pet-is-empty,
.pet-desc.pet-is-empty,
.pet-about.pet-is-empty,
.pet-is-empty { display: none !important; }

@media (max-width: 767px) {
    .pet-gallery-thumbs { gap: 5px; }
}


/* ── Related-pets carousel: pet cards get a pink border on single pet pages ──
   Per the design, the Pet Card (loop tmpl 1607) is borderless on listing/filter
   pages but carries a 1px pink frame here. dd3eb63 is the card's root container.
   This file only loads on is_singular(pets), so listings stay borderless. */
.elementor-1607 .elementor-element.elementor-element-dd3eb63 {
    border: 1px solid #ECD7FD;
    border-radius: 8px;
}

/* ── Empty description: hide the "Description" label + its text widget ──────────
   Some ShelterManager imports have no Description, leaving a dangling label.
   The `pet-no-desc` body class is set server-side (functions.php) from the ACF
   value. We hide only the label heading (02f4839) and the description text
   editor (1fa0480) — NOT the whole .pet-desc container, since the Enquire Now
   button lives there too. */
body.pet-no-desc .elementor-element-02f4839,
body.pet-no-desc .elementor-element-1fa0480 { display: none !important; }