/* ==================================================
   CHS GOLD BANNER — Cocktails for Critters

   All selectors below are scoped under .chs-gold-banner
   on purpose — nothing here should ever touch the theme's
   shared .btn / .btn--orange / .section classes, since
   those are reused site-wide.
================================================== */

/* Sits flush below the header (no overlap there), then
   overlaps DOWN onto the page's first section/hero. The
   hero already pulls itself up -20px (every .section does,
   see _section.scss); margin-bottom here deepens that to
   -60px, and the higher z-index (vs. the hero's z-index: 2)
   makes the banner paint in front, with rounded bottom
   corners revealing the hero image through the notch. */
.chs-gold-banner {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-bottom: -60px;

    background-color: #9f6a36;
    background-image: url("https://www.calgaryhumane.ca/wp-content/uploads/2026/07/Asset-1.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    padding: 64px 24px 40px;
}

@media screen and (max-width: 560px) {
    .chs-gold-banner {
        background-image: url("https://www.calgaryhumane.ca/wp-content/uploads/2026/07/Gold-mobile_Light-Mobile-2-22.webp");
    }
}

/* Same card treatment as .cfc-info-box in the Cocktails for
   Critters theme CSS (event-details.css) — a cream card with
   the purple pattern blended in, floating on the gold banner
   background — kept under our own class instead of reusing
   .cfc-info-box so it can't collide with the real one. */
.chs-gold-banner__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;

    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 64px;

    text-align: center;

    background-color: #fffaf2;
    background-image:
        linear-gradient(#fffaf2, #fffaf2),
        linear-gradient(rgba(255, 255, 255, 0.2), rgba(237, 237, 237, 0.2)),
        url("https://www.calgaryhumane.ca/wp-content/uploads/2026/07/cfc-purple-13-scaled.webp");
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, cover, cover;
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;

    border: 8px solid transparent;
    border-radius: 18px;

    filter: drop-shadow(0 3px 0.5px rgba(48, 10, 70, 0.75));
}

.chs-gold-banner__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Same gold-gradient clip-text treatment as the campaign's
   other headings (see .cfc-info-box__title in the Cocktails
   for Critters theme CSS) — kept scoped to our own class
   instead of the theme's bare h1–h5 selector. */
.chs-gold-banner__title {
    margin: 0;

    font-family: "tt-modernoir", sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;

    background-color: #c58a4d;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("https://www.calgaryhumane.ca/wp-content/uploads/2026/07/Asset-1.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 180% auto;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    filter: drop-shadow(0 3px 0.5px rgba(70, 35, 10, 0.75));
}

.chs-gold-banner__details {
    color: #6e6287;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.chs-gold-banner__button {
    display: inline-block;
    margin: 8px 0 0;
    padding: 14px 32px;

    color: #ffffff;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(70, 35, 10, 0.5);

    background-color: #c58a4d;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("https://www.calgaryhumane.ca/wp-content/uploads/2026/07/Asset-1.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 250% auto;

    border-radius: 100px;
    transition: background-size 0.3s ease-in-out;
}

.chs-gold-banner__button::after {
    content: "\2192";
    display: inline-block;
    margin-left: 10px;
}

.chs-gold-banner__button:hover,
.chs-gold-banner__button:focus {
    color: #ffffff;
    background-size: 500% auto;
}

@media screen and (max-width: 700px) {
    .chs-gold-banner {
        padding: 44px 16px 20px;
    }

    .chs-gold-banner__inner {
        gap: 12px;
        padding: 32px 24px;
    }

    .chs-gold-banner__title {
        font-size: 24px;
    }

    .chs-gold-banner__details {
        font-size: 15px;
    }

    .chs-gold-banner__button {
        padding: 12px 26px;
        font-size: 15px;
    }
}