/*
 * Wild Acre Rescue — site-specific overrides layered on top of the PetPal
 * theme (main.css). Keep this file small and additive: fix real bugs / adapt
 * theme blocks for real photo content, don't fork whole components here.
 */

/* -----------------------------------------------------------------------
 * FAQ answers were rendering in Title Case (theme intended it for short
 * label-style copy, not full sentence answers).
 * --------------------------------------------------------------------- */
.faq__wrap .accordion-body p {
    text-transform: none;
}

/* -----------------------------------------------------------------------
 * header-quote (banner__area-two / banner__bg-two): the theme demo uses a
 * soft illustrated background there, so text needed no backing. We use a
 * real photo, which is busier, so the content gets a translucent card for
 * legibility, and the floating second photo gets rounded corners.
 * --------------------------------------------------------------------- */
.banner__bg-two {
    background-size: cover;
    background-position: center;
}

.banner__content-two--card {
    background: rgba(255, 255, 255, .85);
    border-radius: 24px;
    padding: 40px 45px;
    backdrop-filter: blur(2px);
    max-width: 640px;
}

@media (max-width: 1199.98px) {
    .banner__content-two--card {
        max-width: 100%;
    }
}

.banner__img-two {
    /* Theme default pins this to bottom: 0, so the photo runs flush with
     * the section edge. Lift it clear of the bottom and cap its height so
     * it reads as a floating image rather than a cropped-off one. */
    bottom: 100px;
}

.banner__img-two img {
    max-height: 400px;
    width: auto;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}

/* Small feature list under the header-quote hero (icon + title + text) —
 * no equivalent component exists in the theme, so it's styled minimally
 * here rather than forking a whole new theme component. */
.banner__feature-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.banner__feature-item .icon {
    font-size: 30px;
    color: var(--tg-theme-primary);
    margin-bottom: 4px;
}

.banner__feature-item .title {
    font-size: 17px;
    margin-bottom: 2px;
}

.banner__feature-item p {
    font-size: 14px;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * about.blade.php ("about" block, e.g. the About page): the theme's default
 * about__img-four layout is a big square photo with a small round accent
 * photo absolutely positioned over it. With real (differently-shaped) photo
 * uploads that read as a mismatch rather than a deliberate collage, so both
 * images are shown side by side at the same size/shape instead. The extra
 * `.about__img-four-item` wrapper divs mean the theme's own
 * `img:nth-child(2)` absolute-position rule no longer matches (it targets a
 * direct `img` child), so no need to fight/override it.
 * --------------------------------------------------------------------- */
.about__img-four--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about__img-four--split .about__img-four-item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 15px;
}

.about__img-four--split .about__img-four-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

@media (max-width: 575.98px) {
    .about__img-four--split {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------
 * testimonials.blade.php (testimonial__area-three): review text length
 * varies a lot between slides. The row was vertically centering both
 * columns, so a longer review taller than the photo would re-centre the
 * whole row and visibly shift the photo up/down on every slide change.
 * Pinning the row to the top (align-items-start, set directly in the blade
 * file) keeps the photo still; only the review column grows/shrinks below
 * it. Paired with a slower Swiper transition (see main.js
 * `testimonialSliderThree` speed) for a calmer slide change.
 * --------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * about-founder.blade.php (about__area-three): $imageMain and $imageRound
 * are independent uploads with very different natural aspect ratios (the
 * theme demo images are 420x571 vs 265x221), so side by side they read as
 * "one huge photo, one tiny one" even once the columns are balanced (see
 * col-lg-4/col-lg-4 in the blade file). Force both into the same aspect
 * ratio and crop with object-fit so they meet in the middle visually.
 * --------------------------------------------------------------------- */
.about__video-wrap--main img,
.about__video-wrap--round img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* -----------------------------------------------------------------------
 * packages.blade.php (pricing__area): the card column only carried
 * col-xl-3/col-lg-6/col-md-6 with no width below the md breakpoint, so on
 * mobile each column fell back to shrink-to-fit and every card ended up a
 * different width depending on its title/description length. col-12 was
 * added (as .pricing__col) in the blade file to make every card full-row
 * width consistently; this caps that width and centers it so cards get a
 * bit of margin on the sides instead of running edge-to-edge.
 * --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pricing__col {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}