/* Sweed POS deals (sweed-deals component / [sweed_deals] shortcode).
 * Grid columns come from --sweed-cols, set by the render template from the
 * gallery-config trait. Carousel sizing belongs to SGCarousel (Swiper). */

.sweed-deals { --sweed-gap: 1.25rem; --sweed-radius: 12px; }

.sweed-deals__title { margin: 0 0 1.25rem; }

.sweed-deals__grid {
    display: grid;
    grid-template-columns: repeat(var(--sweed-cols, 3), minmax(0, 1fr));
    gap: var(--sweed-gap);
}
@media (max-width: 991px) {
    .sweed-deals__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 575px) {
    .sweed-deals__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Carousel: Swiper turns each card into the slide itself, so the theme's
 * `.sgen--blocks_carousel .swiper-slide { padding: 5px }` would inset the
 * card and frame it. Reserve room below the cards for the pagination dots,
 * which the theme positions absolutely at the bottom of the carousel. */
.sweed-deals__carousel { padding-bottom: 2.75rem; }
.sweed-deals__carousel > .sweed-deal,
.sweed-deals__carousel .swiper-slide.sweed-deal { padding: 0; }
.sweed-deals__carousel .swiper-pagination { bottom: .5rem !important; margin-top: 0; }

.sweed-deal {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--sweed-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    color: inherit;
}

/* Sweed banners are promo graphics with text baked in, so never crop them:
 * show the whole image at its own aspect ratio. */
.sweed-deal__media {
    display: block;
    overflow: hidden;
    background: rgba(0, 0, 0, .04);
}
.sweed-deal__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}
a.sweed-deal__media:hover img { transform: scale(1.03); }

.sweed-deal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.125rem 1.125rem;
}
.sweed-deal__name { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.sweed-deal__schedule {
    margin: 0;
    color: var(--color-primary, inherit);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.sweed-deal__desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: .9375rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.sweed-deal__cta { align-self: flex-start; margin-top: auto; }

/* Builder-only notices and the optional public empty message. */
.sweed-deals--notice {
    padding: 1rem 1.25rem;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: 8px;
    background: rgba(0, 0, 0, .02);
    font-size: .875rem;
}
.sweed-deals--empty { padding: 1rem 0; }

/* Screen-reader-only text. Defined here because themes differ on whether
 * they ship Bootstrap's .sr-only / .visually-hidden. */
.sweed-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Overlay card style (default) --------------------------------------
 * The Dispenza deal-card design: a theme-colored panel with an outlined pill
 * (schedule), title, body and fine print. The deal's banner sits whole at the
 * card's foot: Sweed banners are finished promo graphics with baked-in text
 * (about 5.6:1), so they are never cropped, blurred or put behind text.
 * Colors follow the site theme: the surface is --color-accent and the pill is
 * --color-primary. Text is white on purpose, NOT --color-light: every theme
 * preset pairs accent with #fff (config/themes.php button 'text'), whereas
 * --color-light is a palette slot a theme or section may set to anything,
 * which made the card text vanish on a site where it was dark. Override the
 * --sweed-* props to retint just the cards. */
.sweed-deals--style-overlay {
    --sweed-card-bg: var(--color-accent, #0b1b2b);
    --sweed-card-fg: #fff;
    --sweed-accent: var(--color-primary, #8fd14f);
    --sweed-glow: var(--color-primary-rgb, 143, 209, 79);
}
.sweed-deal--overlay {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--sweed-glow), .22) 0%, rgba(var(--sweed-glow), 0) 55%),
        var(--sweed-card-bg);
    border: 0;
    border-radius: var(--sweed-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--sweed-card-fg);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sweed-deal--overlay:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.sweed-deal--overlay .sweed-deal__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
a.sweed-deal__inner:focus-visible { outline: 2px solid var(--sweed-accent); outline-offset: -2px; border-radius: var(--sweed-radius); }

/* Keep the pill legible when a theme's primary is dark (it sits on the dark
 * accent surface): mix primary toward white. Browsers without color-mix()
 * keep the plain primary from the rules below. */
@supports (color: color-mix(in srgb, red 50%, white)) {
    .sweed-deals--style-overlay {
        --sweed-accent: color-mix(in srgb, var(--color-primary, #8fd14f) 45%, #fff);
    }
}

.sweed-deal--overlay .sweed-deal__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.5rem 1.5rem 1.25rem;
}
.sweed-deal__badge {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--sweed-accent);
    border-radius: 999px;
    color: var(--sweed-accent);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}
.sweed-deal--overlay .sweed-deal__name {
    margin: .25rem 0 0;
    color: var(--sweed-card-fg);
    font-size: 1.25rem;
    font-weight: 600;
}
.sweed-deal--overlay .sweed-deal__desc {
    color: var(--sweed-card-fg);
    font-size: .9375rem;
    opacity: .95;
}
.sweed-deal__fine {
    margin: 0;
    font-size: .75rem;
    opacity: .75;
}
.sweed-deal--overlay .sweed-deal__fine { color: var(--sweed-card-fg); }

/* Banner strip: full width, natural aspect ratio, pinned to the card's foot so
 * cards in one row line up even when titles wrap differently. */
.sweed-deal__strip {
    display: block;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .08);
    line-height: 0;
}
.sweed-deal__strip img {
    display: block;
    width: 100%;
    height: auto;
}