/* =====================================================================
   Compositions
   Styles for the section compositions: phone mock-ups, cover sections,
   intro banners, and the split hero with background image.
   ===================================================================== */

/* ---- Phone mock-ups ---- */

.img-mockup {
    background-color: #fff;
    border-radius: 50px;
    max-width: 100%;
    height: auto;
}

.img-overlap {
    margin-top: -28%;
}

/* Carousel framing (adapted from Leashr .carousel.framed) */
.carousel.framed img {
    border: 5px solid #f8f8f8;
}

/* ---- Sections with a background image ---- */

/* Generic full-width background section (adapted from Brand Website .section-bg) */
.section-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.section-bg > .container {
    position: relative;
    z-index: 1;
}

.section-bg-brand {
    background-image: url("../images/covers/bg-1.png");
}

.section-bg-brand-secondary {
    background-image: url("../images/covers/bg-2.png");
}

.section-bg-brand-tertiary {
    background-image: url("../images/covers/bg-3.png");
}

.section-bg-brand h1,
.section-bg-brand h3,
.section-bg-brand-secondary h1,
.section-bg-brand-secondary h3,
.section-bg-brand-tertiary h1,
.section-bg-brand-tertiary h3 {
    color: #fff;
}

.section-bg-brand p,
.section-bg-brand label,
.section-bg-brand-secondary p,
.section-bg-brand-secondary label,
.section-bg-brand-tertiary p,
.section-bg-brand-tertiary label {
    color: #fff;
    font-style: italic;
}

.section-bg-brand p,
.section-bg-brand-secondary p,
.section-bg-brand-tertiary p {
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 90%);
    padding: 8px;
}

.section-bg-brand .intro-title,
.section-bg-brand-secondary .intro-title,
.section-bg-brand-tertiary .intro-title {
    background-color: #000;
    box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 90%);
    display: inline-block;
    padding: 0.25rem 0.75rem;
}

/* Leashr-style intro banner: cover image with a left-to-right fade overlay */
.intro-banner {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 3.5rem 0;
}

.intro-banner .img-mockup {
    background-color: #fff;
    border-radius: 50px;
}

.intro-banner-adopt {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.7)), url("../images/covers/spike.jpg");
}

.intro-banner-events {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.7)), url("../images/covers/bg-dog-sunglasses.jpg");
}

.intro-banner-services {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.7)), url("../images/covers/onehappyhound_opacity.jpg");
    background-size: auto;
    background-position: center center;
}

.intro-banner-shops {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.7)), url("../images/covers/bg-cookie-bones.jpg");
}

.intro-banner-parks {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.7)), url("../images/covers/bg-dog-field.jpg");
}

@media (min-width: 1024px) {
    .intro-banner,
    .intro-banner-services {
        background-size: cover;
    }
}

@media (max-width: 768px) {
    .intro-banner-services {
        background-position: unset;
    }
}

/* ---- Theme landing pages ---- */

.theme-landing-hero {
    padding: 4rem 0 2rem;
}