/* ==========================================================
   SPECIAL OFFERS: card, offer page, shared badges and button.
   The grid, filters and type tiles are in assets/src/css/blocks/500-promo-offers-block.css.
   ========================================================== */

.promo-icon {
    display: block;
    flex: none;
}

/* ---------- badges and button shared by the card and the offer page ---------- */

.promo-card__type,
.promo-card__status,
.promo-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    text-decoration: none;
}

.promo-card__type,
.promo-badge--type {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

a.promo-badge--type:hover {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* Ending soon asks for attention; expired is deliberately neutral. */
.promo-card__status--ending,
.promo-badge--ending {
    background: var(--amber-50);
    color: var(--brand-cta-deep);
}

.promo-card__status--expired,
.promo-card__status--archived,
.promo-badge--expired,
.promo-badge--archived {
    background: var(--gray-100);
    color: var(--gray-600);
}

.promo-card__cta,
.promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-secondary, var(--brand-cta-alt));
    color: var(--white);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    transition: filter var(--transition-fast) ease;
}

a.promo-btn:hover,
.promo-card:hover .promo-card__cta {
    color: var(--white);
    filter: brightness(0.94);
}

/* ---------- card ---------- */

.promo-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: box-shadow var(--transition-fast) ease;
}

.promo-card[hidden] {
    display: none;
}

.promo-card:hover {
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

.promo-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--brand-primary-light);
}

.promo-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--brand-primary);
}

.promo-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
}

.promo-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.promo-card__benefit {
    color: var(--brand-primary-dark);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-compact);
}

.promo-card__benefit--prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
}

.promo-card__old {
    color: var(--text-muted);
    font-size: var(--font-size-body);
    font-weight: 400;
}

.promo-card__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.promo-card__period,
.promo-card__directions {
    color: var(--text-secondary);
    font-size: var(--font-size-meta);
}

.promo-card__cta {
    margin-top: auto;
}

/* An ended offer stays readable but clearly not for taking. */
.promo-card.is-expired {
    opacity: 0.72;
}

.promo-card.is-expired .promo-card__media img {
    filter: grayscale(1);
}

.promo-card.is-expired .promo-card__benefit {
    color: var(--text-secondary);
}

/* ---------- offer page ---------- */

.promo-single__plaque {
    padding-block: var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-default);
    background: var(--gray-100);
}

.promo-single__plaque-text {
    margin: 0;
    color: var(--gray-600);
    font-weight: var(--font-weight-bold);
}

.promo-single__hero {
    padding-block: var(--space-4) var(--space-5);
}

.promo-single__hero-box {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--brand-primary-light);
}

.promo-single__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.promo-single__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-subsection-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
}

.promo-single__benefit {
    margin: 0 0 var(--space-3);
    color: var(--brand-primary-dark);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-display-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-compact);
}

.promo-single__old {
    margin-right: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-lead);
    font-weight: 400;
}

.promo-single__period {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

.promo-single__short-terms {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

.promo-single__hero-media img {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.promo-single--expired .promo-single__hero-media img {
    filter: grayscale(1);
}

.promo-single--expired .promo-single__benefit {
    color: var(--text-secondary);
}

.promo-single__section {
    padding-block: var(--space-5);
}

.promo-single__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-subsection-title);
    font-weight: var(--font-weight-bold);
    scroll-margin-top: 6rem;
}

.promo-single__text {
    max-width: 62rem;
    line-height: var(--line-height-body);
}

/* Editor lists: the theme's reset removes bullets and numbers. */
.promo-single__text ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.promo-single__text ol {
    padding-left: 1.25rem;
    list-style: decimal;
}

.promo-single__list {
    max-width: 62rem;
    padding-left: 1.25rem;
    list-style: disc;
    line-height: var(--line-height-body);
}

.promo-single__links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-2) var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.promo-single__links a {
    color: var(--brand-primary-dark);
}

.promo-single__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
}

.promo-single__more {
    margin: var(--space-4) 0 0;
}

.promo-single__all {
    color: var(--brand-primary-dark);
    font-weight: var(--font-weight-semibold);
}

/* package composition */

.promo-package {
    max-width: 48rem;
    margin-top: var(--space-5);
}

.promo-package__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
}

.promo-package__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-package__row,
.promo-package__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-default);
}

.promo-package__name a {
    color: inherit;
}

.promo-package__price {
    flex: none;
    text-align: right;
}

.promo-package__old {
    margin-right: var(--space-2);
    color: var(--text-muted);
}

.promo-package__totals {
    margin: 0;
}

.promo-package__total dt,
.promo-package__total dd {
    margin: 0;
}

.promo-package__total dd {
    font-weight: var(--font-weight-bold);
}

.promo-package__total--package dd {
    color: var(--brand-primary-dark);
}

.promo-package__total--saving dd {
    color: var(--brand-cta-deep);
}

/* type-specific conditions */

.promo-facts {
    max-width: 62rem;
    margin: var(--space-4) 0 0;
}

.promo-facts__row {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-bottom: var(--border-width-thin) solid var(--border-default);
}

.promo-facts__label {
    color: var(--text-secondary);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-semibold);
}

.promo-facts__value {
    margin: 0;
}

.promo-single__partner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.promo-single__partner img {
    display: block;
    width: auto;
    max-width: 7rem;
    height: 2.5rem;
    object-fit: contain;
}

@media (min-width: 768px) {

    .promo-single__hero-box {
        padding: var(--space-6, 2rem);
    }

    .promo-single__hero-box.has-image {
        grid-template-columns: 3fr 2fr;
        align-items: center;
    }

    .promo-single__title {
        font-size: var(--font-size-page-title);
    }

    .promo-single__benefit {
        font-size: var(--font-size-display-md);
    }

    .promo-facts__row {
        grid-template-columns: 16rem 1fr;
        gap: var(--space-4);
    }
}

/* Phones: image first, text below (site-wide hero rule). */
@media (max-width: 767.98px) {
    .promo-single__hero-media {
        order: -1;
    }
}