/* === Promotion section === */

/* Section container — matches .recommend-service width */
.home-page .promo-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* Header — mirrors .recommend-service-header */
.home-page .promo-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* Deals kicker as a green pill (flame icon + white uppercase text), in place of
   the plain .section-kicker used elsewhere. */
.home-page .promo-section__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-secondary-cta);
    color: #ffffff;
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 7px 15px;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.home-page .promo-section__pill svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Title styling is provided by the .section-title class in main.css. */

.home-page .promo-section__accent {
    display: none;
}

/* Card grid */
.home-page .promo-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Card */
.home-page .promo-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    transition: box-shadow .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
}

.home-page .promo-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 8px 28px rgba(0,0,0,.06);
    transform: translateY(-3px);
}

/* Image link wrapper — mirrors .service-card-image-link */
.home-page .promo-card__image-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.home-page .promo-card__image-link:focus-visible {
    outline: 2px solid #1D4288;
    outline-offset: -2px;
}

/* Image — no overlay, let the marketing asset breathe.
   Promo artwork is uploaded at whatever ratio the vendor supplied (today's
   assets are 4:3), so the slot never crops it: the asset is contained and a
   blurred copy of itself fills whatever is left over. 16/9 keeps the leftover
   small for the ratios we actually see. */
.home-page .promo-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
}

/* Backdrop layer. Same URL as the image above it, so this costs no extra
   request. Inset past the edges because blur samples transparent pixels
   outside the box and would otherwise fade out at the corners. */
.home-page .promo-card__image-blur {
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(24px) saturate(1.15);
}

.home-page .promo-card__image-main,
.home-page .promo-card__image picture img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.home-page .promo-card:hover .promo-card__image-main,
.home-page .promo-card:hover .promo-card__image picture img {
    transform: scale(1.05);
}

/* Expiry badge — subtle dark pill, bottom-left on image */
.home-page .promo-card__badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    color: var(--brand-primary, #1d4288);
    font-family: Inter;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 6px;
    line-height: 1.3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.home-page .promo-card__badge--urgent {
    color: #c0392b;
}

/* Card body — mirrors .service-card-body */
.home-page .promo-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px 24px;
    flex: 1;
}

/* Deal badge — visual anchor */
.home-page .promo-card__deal {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    font-family: Inter;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    /* Solid brand navy rather than a translucent green: the deal value is the
       thing to read here, and any transparency let busy promo artwork show
       through it. */
    background: var(--brand-primary);
    padding: 8px 18px;
    border-radius: 100px;
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* Title */
.home-page .promo-card__title {
    font-family: Inter;
    font-size: 1.1875rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
}

/* Description */
.home-page .promo-card__desc {
    font-family: Inter;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* Tag label — small uppercase pill */
.home-page .promo-card__tag {
    display: inline-block;
    font-family: Inter;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--brand-secondary-deep, #237a2e);
    padding: 4px 11px;
    border-radius: 4px;
    line-height: 1.4;
}

/* CTA wrapper — side-by-side when two CTAs */
.home-page .promo-card__ctas {
    display: flex;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

/* Buttons themselves are styled via .btn-cta-green / .btn-cta-blue-solid in
   main.css. In the cards context, both fill the width via flex. */
.home-page .promo-card__cta,
.home-page .promo-card__cta-secondary {
    flex: 1;
}

/* Desktop: 2-column grid */
@media (min-width: 768px) {
    .home-page .promo-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive header stacking */
@media (max-width: 991px) {
    .home-page .promo-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .home-page .promo-section {
        padding: 40px 16px;
    }

    .home-page .promo-card__body {
        padding: 16px 20px 20px;
    }
}