/* ==========================================================================
   AACampaigns Plugin — Frontend & Admin Styles
   ========================================================================== */

/* ── Shared notice border — used by both the Compliance Notice and T&Cs ──── */
/* Renders inline within the existing text-block component — same font/size   */
/* as surrounding content. Dashed border makes it stand out without requiring */
/* its own background or section.                                              */

.campaign-compliance-notice,
.campaign-footnotes {
    border: 2px solid #22222221;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 1.4rem !important;
    line-height: 1.6;
    font-family: 'AA' !important;
}

/* Target <p> children explicitly so theme paragraph styles can't override */
.campaign-compliance-notice p,
.campaign-footnotes p {
    font-size: 1.4rem !important;
    line-height: 1.6;
    font-family: 'AA' !important;
}

.campaign-tcs-title {
    font-family: 'AABold' !important;
}

/* Product name heading above each product's T&Cs block on the homepage */
.campaign-tcs-product-name {
    font-weight: bold;
    text-decoration: underline;
    margin-top: 2.4rem;
    margin-bottom: 0;
}

.campaign-tcs-product-name:first-child {
    margin-top: 0;
}

/* .component adds margin: 9.6rem 0 by default. The T&Cs section sits
   directly under a heading block that already has its own bottom margin,
   so collapse the top to avoid a ~192px gap. */
.campaign-tcs-section {
    margin: 1rem !important;
}

/* ── Homepage Campaign — taller mobile carousel hero ────────────────────── */
/* Theme default is 44rem at ≤991px. Override to 65rem for the campaign      */
/* template so campaign imagery has more visual impact on mobile.             */
/* height: min(65rem, 75vh) scales with the device's actual viewport height.
   On tall phones (14 Pro Max ~932px) → caps at 65rem.
   On short phones (SE ~667px)        → 75vh ≈ 50rem, naturally smaller.
   One rule, no per-device breakpoints needed. */
@media screen and (max-width: 991px) {
    .main.homepage-campaign .hero-carousel__item__img {
        height: min(65rem, 75vh) !important;
    }
}