/*
 * Homepage Zags banner (template-parts/zags-banner.php), between the promises
 * strip and Whole-Home Services. Front page only, while the banner is on
 * (inc/zags.php). Same palette and display face as the /zags/ page, so the
 * click lands somewhere that looks the same. A centered card, 1200px wide at
 * most, with the promises strip's 16px radius.
 *
 *   .zgb--partner ... Gonzaga logo · "Proud Partner of Gonzaga Athletics" · Learn More
 *   .zgb--win ....... "Zags win!", the latest final and the celebration photo
 *
 * Both share one card: navy gradient, faint court stripes, center-court ring
 * and a red bottom edge.
 *
 * The whole card is the link: .zgb__btn::after stretches over .zgb__card.
 * Nothing between the two may be position:relative or take a transform, or
 * the click area shrinks to that element.
 */

.zgb {
    --zgb-navy: #041e42;
    --zgb-red: #c8102e;
    --zgb-frost: #c5d2e8;
    --zgb-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
    --zgb-lift: 0 14px 32px rgba(4, 30, 66, 0.22);
    --zgb-lift-hover: 0 20px 40px rgba(4, 30, 66, 0.3);
    --zgb-base: var(--zgb-red);
    padding-top: 48px;
}

.zgb__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(24px, 2.6vw, 32px) clamp(24px, 3.6vw, 48px) clamp(29px, 2.6vw + 5px, 37px);
    color: #fff;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 64px),
        linear-gradient(100deg, #020f26 0%, var(--zgb-navy) 55%, #0b2f73 100%);
    border-radius: var(--radius-lg, 16px);
    box-shadow: inset 0 -5px 0 var(--zgb-base), var(--zgb-lift);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Center-court circle, cropped by the right edge, behind the button. */
.zgb__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -90px;
    width: 300px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 52px rgba(255, 255, 255, 0.025),
        0 0 0 54px rgba(255, 255, 255, 0.07);
    transform: translateY(-50%);
    pointer-events: none;
}

.zgb__card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -5px 0 var(--zgb-base), var(--zgb-lift-hover);
}

/* ---- Partner -------------------------------------------------------------- */

.zgb--partner .zgb__card { grid-template-columns: auto minmax(0, 1fr) auto; }

.zgb__logo {
    display: block;
    width: clamp(150px, 14vw, 196px);
    height: auto;
}
.zgb--partner .zgb__copy {
    padding: 6px 0 6px clamp(20px, 3vw, 40px);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.zgb__line {
    max-width: 11em;
    margin: 0;
    font-family: var(--zgb-display);
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
}
.zgb__sub {
    margin: 10px 0 0;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--zgb-frost);
}

/* ---- Button: the card's link ---------------------------------------------- */

.zgb__btn {
    min-height: 56px;
    white-space: nowrap;
    transform: none;
}
.zgb__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-lg, 16px);
}
.zgb__btn i { transition: transform 0.15s ease; }
.zgb .zgb__btn:hover,
.zgb .zgb__btn:focus-visible,
.zgb__card:hover .zgb__btn { background: #fff; color: var(--zgb-navy); }
.zgb__card:hover .zgb__btn i { transform: translateX(3px); }
.zgb .zgb__btn:focus-visible { outline: 3px solid var(--brand-accent, #fef200); outline-offset: 3px; }

/* ---- We Won --------------------------------------------------------------- */

/* Same navy card, stripes and red edge as Partner; only the layout differs. */
.zgb--win .zgb__card { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; }
.zgb__media { margin: 0; }
.zgb__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 4px solid #fff;
    transform: rotate(-2deg);
    box-shadow: 0 18px 36px rgba(0, 6, 20, 0.45);
}
.zgb__eyebrow {
    margin: 0;
    font-family: var(--zgb-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}
.zgb__title {
    margin: 6px 0 0;
    font-family: var(--zgb-display);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-style: italic;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--brand-accent, #fef200);
}
.zgb__score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 22px;
    margin: 10px 0 0;
    font-family: var(--zgb-display);
    font-size: 1.6rem;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
}
.zgb__score strong { font-size: 1.4em; font-weight: 800; font-variant-numeric: tabular-nums; }
.zgb__final {
    margin: 6px 0 0;
    font-family: var(--zgb-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.zgb__text { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.5; color: #fff; }

/* ---- Smaller screens ------------------------------------------------------ */

@media (max-width: 999px) {
    .zgb--win .zgb__card { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
    .zgb--win .zgb__btn { grid-column: 2; justify-self: start; } /* under the score */
}
@media (max-width: 767px) {
    .zgb--partner .zgb__card { grid-template-columns: auto minmax(0, 1fr); }
    .zgb--partner .zgb__btn { grid-column: 1 / -1; justify-content: center; }
    .zgb__card::before { top: 0; right: -150px; }
}
@media (max-width: 600px) {
    .zgb { padding-top: 36px; }
    .zgb__card { padding: 26px 22px 31px; gap: 18px; }
    .zgb--partner .zgb__card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .zgb--partner .zgb__copy { padding: 0; border-left: 0; }
    .zgb__logo { width: 170px; }
    .zgb__line { margin-inline: auto; font-size: 1.75rem; }
    .zgb__btn { width: 100%; justify-content: center; }
    .zgb--win .zgb__card { grid-template-columns: 1fr; }
    .zgb--win .zgb__btn { grid-column: 1; justify-self: stretch; }
    .zgb__media { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .zgb__card,
    .zgb__btn i { transition: none; }
    .zgb__card:hover,
    .zgb__card:hover .zgb__btn i { transform: none; }
}