/* SOL-1266 — Homepage hero "Give to You Will Be My Witnesses" button
   Scope: homepage Swiper overlay quicklinks only (.swiper-ql-overlay).
   Colours sampled from the campaign logo: flame gold #ff9e47, campaign red #b1252b. */

/* 1. The campaign link takes its own centred row above the other three */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql {
    order: -1;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    --swiper-ql-item-bg: transparent;
    --swiper-ql-item-bg-hover: transparent;
    --swiper-ql-item-border: none;
}

/* 2. The gold pill — same width as one of the three buttons below it */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql > .g-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - 25.6px) / 3);
    max-width: 100%;
    padding: 7px 12.8px;
    background: #ff9e47;
    border-radius: 16px;
}

/* 3. First line — "Give to", slanted, campaign red */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-title {
    order: 1;
    margin: 0;
    color: #b1252b;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

/* 4. Second line — the campaign name, same type as the other buttons */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle {
    order: 2;
    margin: 2px 0 0;
    color: #b1252b;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* 5. Keep the campaign colours on hover */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql:hover > .g-content {
    background: #f6902f;
}

/* 6. Small screens: the pills stack, so match the stacked width */
@media only screen and (max-width: 50.99rem) {
    .swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql > .g-content {
        width: 100%;
    }
}

/* 7. Tuning — keep "You Will Be My Witnesses" on one line so the pill matches the others' height */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle {
    font-size: 13px;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* 8. Sit the button group a little lower on the image */
.swiper-ql-overlay .g-blockcontent {
    transform: translateY(0.9rem);
}

/* 9. Final sizing — trim the subtitle's inherited padding so the gold pill matches the other three (54px) */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle {
    padding: 0;
    margin: 2px 0 0;
}

.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql > .g-content {
    padding: 9px 12.8px;
}

/* 10. The shared subtitle style draws a navy chip — clear it so both lines sit on the gold body */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle {
    background: transparent;
    border-radius: 0;
}

/* 11. Staff request (Dakota, 2026-11-06): sit the quicklink group near the bottom of the hero image.
   Replaces the earlier nudge; the overlay's own centred alignment is overridden at desktop widths. */
.swiper-ql-overlay .g-blockcontent {
    transform: none;
}

@media only screen and (min-width: 51rem) {
    .grand-entry > .g-container > .g-grid:has(.swiper-ql-overlay) .swiper-ql-overlay,
    .swiper-ql-overlay.g-block {
        align-items: flex-end;
        padding-bottom: min(3vw, 2.5rem);
    }
}

/* 12. Same as 11, with higher specificity: this file loads before content/override.css,
   so the selector has to outrank that file's own overlay rule to win. */
@media only screen and (min-width: 51rem) {
    .grand-entry > .g-container > .g-grid:has(.swiper-ql-overlay) .swiper-ql-overlay.g-block {
        align-items: flex-end;
        padding-bottom: min(3vw, 2.5rem);
    }
}

/* 13. Staff request (Dakota): both lines at the same text size as the other quicklinks (16px/700,
   letter-spacing normal), in the flame red sampled from the campaign logo (#b1252b). */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-title,
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    color: #b1252b;
    white-space: nowrap;
}

.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql > .g-content {
    padding: 7.5px 12.8px;
}

/* 14. The title text is wrapped in a span that the shared quicklinks CSS colours navy
   (it overrides the red set on the h4), so colour the span itself too. */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-title-text,
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle-text {
    color: #b1252b;
    -webkit-text-fill-color: #b1252b;
}

/* 15. Staff request (Dakota): drop the group lower so it clears the "A Campaign for the
   Diocese of Rockford" line in the hero artwork, and tighten the gap between the two rows. */
@media only screen and (min-width: 51rem) {
    .grand-entry > .g-container > .g-grid:has(.swiper-ql-overlay) .swiper-ql-overlay.g-block {
        padding-bottom: 0.4rem;
    }

    .swiper-ql-overlay .g-blockcontent-subcontent {
        gap: 8px;
    }
}

/* 16. Staff request (Dakota): campaign button body colour #E2A13B (hover a shade darker) */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql > .g-content {
    background: #e2a13b;
}

.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql:hover > .g-content {
    background: #d4922b;
}

/* 17. Staff request (Dakota): button text in the same blue as the other quicklinks (#004777) */
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-title,
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle,
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-title-text,
.swiper-ql-overlay .g-blockcontent-subcontent-block.campaign-ql .g-blockcontent-subcontent-subtitle-text {
    color: #004777;
    -webkit-text-fill-color: #004777;
}