/**
 * Offer List Widget – Angebots-Karten Grid/List/Immersive
 * BEM: kw-offer  |  Container: kw-offer-list-container
 *
 * Strukturell identisch zu room-teaser.css — Tokens und Klassen
 * auf Angebote umgemappt (--kw-ol-* statt --kw-room-*).
 */

/* =========================================================
   Custom Properties (Widget-Scope)
   ========================================================= */

.kw-offer-list-container {
    --kw-ol-card-bg: var(--kwl-bg, #ffffff);
    --kw-ol-card-border: var(--kwl-border, #e2e8f0);
    --kw-ol-card-radius: var(--kwl-radius-lg, 12px);
    --kw-ol-title-color: var(--kwl-text, #1a202c);
    --kw-ol-price-color: var(--kwl-primary, #00315d);
    --kw-ol-btn-bg: var(--kwl-accent, #BD9B5C);
    --kw-ol-btn-color: var(--kwl-accent-contrast, #00315d);
    --kw-ol-btn-bg-hover: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 85%, black);
    --kw-ol-card-padding: var(--kwl-space-lg, 1.5rem);
    --kw-ol-badge-promo-bg: var(--kwl-accent, #BD9B5C);
    --kw-ol-badge-concert-bg: var(--kwl-primary, #00315d);
}

/* --- Card Bridge: Widget → Shared [data-kwl-card] --- */
.kw-offer-list-container [data-kwl-card] {
    --kwl-card-bg: var(--kw-ol-card-bg, var(--kwl-bg, #ffffff));
    --kwl-card-border: var(--kw-ol-card-border, var(--kwl-border, #e2e8f0));
    --kwl-card-radius: var(--kw-ol-card-radius, var(--kwl-radius-lg, 12px));
    --kwl-card-lift: -4px;
}

/* =========================================================
   Grid Layout (Default)
   ========================================================= */

.kw-offer-list-container.kw-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--kwl-space-lg, 1.5rem);
}

/* =========================================================
   List Layout
   ========================================================= */

.kw-offer-list-container.kw-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-lg, 1.5rem);
}

.kw-layout-list .kw-offer-card {
    flex-direction: column;
}

.kw-layout-list .kw-offer-card-image {
    flex: none;
    max-width: none;
}

.kw-layout-list .kw-offer-card-image img {
    height: 100%;
    object-fit: cover;
}

@media (min-width: 600px) {
    .kw-layout-list .kw-offer-card {
        flex-direction: row;
    }

    .kw-layout-list .kw-offer-card-image {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

/* =========================================================
   Card Base
   ========================================================= */

.kw-offer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.kw-offer-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    container-type: inline-size;
    container-name: offer-card;
}

@media (hover: hover) {
    .kw-offer-card:hover .kw-offer-card-image img {
        transform: scale(1.05);
    }
}

/* =========================================================
   Card Image
   ========================================================= */

.kw-offer-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.kw-offer-card-image a {
    display: block;
    height: 100%;
}

.kw-offer-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms var(--kwl-ease-default);
}

/* =========================================================
   Badges (auf Bild positioniert)
   ========================================================= */

.kw-offer-badge {
    position: absolute;
    z-index: 1;
    padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
    font-size: var(--kwl-fsize-caption, 0.875rem);
    font-weight: var(--kwl-fw-semibold);
    line-height: var(--kwl-lh-heading);
    border-radius: var(--kwl-radius-sm, 4px);
    font-family: var(--kwl-font-body);
}

.kw-offer-badge--promo {
    top: var(--kwl-space-sm, 0.5rem);
    left: var(--kwl-space-sm, 0.5rem);
    background: color-mix(in srgb, var(--kw-ol-badge-promo-bg) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.kw-offer-badge--concert {
    top: var(--kwl-space-sm, 0.5rem);
    right: var(--kwl-space-sm, 0.5rem);
    background: color-mix(in srgb, var(--kw-ol-badge-concert-bg) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Wenn beide Badges aktiv sind, Promo links + Concert rechts (Default) — kein Konflikt. */

/* =========================================================
   Card Content
   ========================================================= */

.kw-offer-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--kwl-space-md, 1rem) var(--kw-ol-card-padding);
    gap: var(--kwl-space-sm, 0.5rem);
}

/* =========================================================
   Title
   ========================================================= */

.kw-offer-card-title {
    margin: 0;
    font-size: var(--kwl-fsize-h4, 1.25rem);
    font-family: var(--kwl-font-heading);
    line-height: var(--kwl-lh-heading, 1.2);
    color: var(--kw-ol-title-color);
}

.kw-offer-card-title a {
    --kwl-link-color: var(--kw-ol-title-color);
    --kwl-link-hover-color: var(--kw-ol-title-color);
}

@media (hover: hover) {
    .kw-offer-card-title a:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

/* =========================================================
   Excerpt
   ========================================================= */

.kw-offer-card-excerpt {
    margin: 0;
    font-size: var(--kwl-fsize-body, 1rem);
    line-height: var(--kwl-lh-body, 1.5);
    color: var(--kwl-text-muted, #64748b);
}

/* =========================================================
   Meta (Gültigkeit, Personen)
   ========================================================= */

.kw-offer-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
    padding-top: var(--kwl-space-xs, 0.25rem);
}

.kw-offer-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--kwl-space-xs, 0.25rem);
    padding: 0.25rem 0.625rem;
    font-size: var(--kwl-fsize-caption, 0.875rem);
    color: var(--kw-ol-meta-color, var(--kwl-text-muted, #64748b));
    background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, transparent);
    border-radius: var(--kwl-radius-full, 9999px);
}

.kw-offer-meta-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.kw-offer-meta-icon svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   Footer (Preis + Button)
   ========================================================= */

.kw-offer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kwl-space-md, 1rem);
    padding: var(--kwl-space-md, 1rem) var(--kw-ol-card-padding);
    border-top: 1px solid var(--kw-ol-card-border);
    margin-top: auto;
}

/* =========================================================
   Price
   ========================================================= */

.kw-offer-card-price {
    display: flex;
    flex-direction: column;
}

.kw-offer-price-label {
    font-size: var(--kwl-fsize-caption, 0.875rem);
    color: var(--kwl-text-muted, #64748b);
}

.kw-offer-price-amount {
    font-size: var(--kwl-fsize-h3, 1.5rem);
    font-weight: var(--kwl-fw-bold);
    color: var(--kw-ol-price-color);
    font-family: var(--kwl-font-heading);
    letter-spacing: var(--kwl-ls-tighter);
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Button (Shared Component — Variante wählbar via Elementor)
   ========================================================= */

.kw-offer-list-container [data-kwl-btn="gradient"] {
    --kwl-btn-bg: var(--kw-ol-btn-bg, var(--kwl-accent, #BD9B5C));
    --kwl-btn-color: var(--kw-ol-btn-color, var(--kwl-accent-contrast, #00315d));
}

.kw-offer-list-container [data-kwl-btn="outline"],
.kw-offer-list-container [data-kwl-btn="inverted"] {
    --kwl-btn-bg: var(--kw-ol-btn-bg, var(--kwl-accent, #BD9B5C));
    --kwl-btn-color: var(--kw-ol-btn-color, var(--kwl-accent, #BD9B5C));
}

.kw-offer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.5rem);
    min-height: 44px;
    min-width: 44px;
    font-size: var(--kwl-fsize-body, 1rem);
    letter-spacing: var(--kwl-ls-wide);
}

/* =========================================================
   Accessibility: Focus
   ========================================================= */

.kw-offer-card-title a:focus-visible,
.kw-offer-card-image a:focus-visible,
.kw-offer-meta-item:focus-visible,
.kw-offer-badge:focus-visible,
.kw-offer-card-price:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
    border-radius: var(--kwl-radius-sm, 4px);
}

/* =========================================================
   Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
    .kw-offer-badge--promo,
    .kw-offer-badge--concert {
        color: #ffffff;
    }

    .kw-offer-meta-item {
        background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
        color: var(--kw-ol-meta-color-dark, var(--kwl-text-muted, #d4d4d4));
    }

    .kw-offer-card-excerpt {
        color: var(--kwl-text-muted, #b0b0b0);
    }

    .kw-offer-price-label {
        color: var(--kwl-text-muted, #b0b0b0);
    }

    .kw-offer-card-title a:focus-visible,
    .kw-offer-card-image a:focus-visible,
    .kw-offer-meta-item:focus-visible,
    .kw-offer-badge:focus-visible,
    .kw-offer-card-price:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .kw-offer-card-image img {
        transition: none;
    }

    .kw-offer-card:hover .kw-offer-card-image img {
        transform: none;
    }
}

/* =========================================================
   Container Query: Card-intern
   ========================================================= */

@container offer-card (max-width: 400px) {
    .kw-offer-card-content {
        padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
    }

    .kw-offer-card-footer {
        flex-direction: column;
        align-items: stretch;
        padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
    }

    .kw-offer-btn {
        text-align: center;
    }
}

/* =========================================================
   Off-Season-Card-Variante (Konzert-Serie ohne aktuelles Konzert)
   Optisch ruhig: kein Preis, kein Promo-Badge, eigene Heading-Farbe.
   ========================================================= */

.kw-offer-card--offseason .kw-offer-card-title--offseason {
    color: var(--kwl-primary, #00315d);
}

.kw-offer-card--offseason .kw-offer-card-excerpt--offseason p:last-child {
    margin-bottom: 0;
}

.kw-offer-card-footer--offseason {
    justify-content: flex-end;
    border-top: 1px solid var(--kw-ol-card-border);
    margin-top: auto;
    padding: var(--kwl-space-md, 1rem) var(--kw-ol-card-padding);
}

@media (prefers-color-scheme: dark) {
    .kw-offer-card--offseason .kw-offer-card-title--offseason {
        color: var(--kwl-accent, #BD9B5C);
    }
}

/* =========================================================
   IMMERSIVE LAYOUT
   ========================================================= */

.kw-offer-list-container.kw-layout-immersive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--kwl-space-lg, 1.5rem);
}

.kw-offer-card--immersive {
    --kw-ol-immersive-ratio: 3 / 4;
    --kw-ol-overlay-opacity: 0.55;
    position: relative;
    aspect-ratio: var(--kw-ol-immersive-ratio);
    overflow: hidden;
    clip-path: inset(0 round var(--kwl-card-radius, var(--kwl-radius-lg, 12px)));
}

.kw-offer-card--immersive[data-kwl-card] {
    border-top-width: 0;
}

.kw-offer-card--immersive .kw-offer-card-image {
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
}

.kw-offer-card--immersive .kw-offer-card-image a {
    position: absolute;
    inset: 0;
}

.kw-offer-card--immersive .kw-offer-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--kwl-ease-default),
                filter 500ms ease;
}

.kw-offer-card--immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / var(--kw-ol-overlay-opacity)) 0%,
        rgb(0 0 0 / 0.15) 50%,
        transparent 70%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.kw-offer-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 var(--kwl-space-md, 1rem);
    background: rgb(0 0 0 / 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgb(255 255 255 / 0.12);
    transition: background 300ms ease, border-color 300ms ease;
}

.kw-offer-card--immersive .kw-offer-card-title {
    grid-column: 1;
    color: #ffffff;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    font-size: var(--kwl-fsize-h3, 1.5rem);
}

.kw-offer-card--immersive .kw-offer-card-price {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
    text-align: right;
}

.kw-offer-card--immersive .kw-offer-price-amount {
    color: var(--kwl-accent, #BD9B5C);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    font-size: var(--kwl-fsize-h4, 1.25rem);
}

.kw-offer-card--immersive .kw-offer-price-label {
    color: rgb(255 255 255 / 0.7);
}

.kw-offer-card-reveal {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-sm, 0.5rem);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 350ms var(--kwl-ease-material),
                opacity 300ms ease 50ms;
}

.kw-offer-card-separator {
    display: block;
    height: var(--kwl-space-sm, 0.5rem);
}

.kw-offer-card--immersive .kw-offer-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgb(255 255 255 / 0.88);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.kw-offer-card--immersive .kw-offer-meta-item {
    background: rgb(255 255 255 / 0.12);
    color: rgb(255 255 255 / 0.9);
    border: 1px solid rgb(255 255 255 / 0.15);
}

.kw-offer-card--immersive .kw-offer-meta-icon svg {
    fill: currentColor;
}

.kw-offer-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.kw-offer-card--immersive .kw-offer-btn {
    display: none;
}

.kw-offer-card--immersive .kw-offer-badge {
    z-index: 4;
}

/* =========================================================
   Immersive: Hover-States
   ========================================================= */

@media (hover: hover) {
    .kw-offer-card--immersive:hover .kw-offer-card-reveal {
        max-height: 250px;
        opacity: 1;
    }

    .kw-offer-card--immersive:hover .kw-offer-card-image img {
        transform: scale(1.03);
        filter: saturate(1.1);
    }

    .kw-offer-card--immersive:hover .kw-offer-card-overlay {
        background: rgb(0 0 0 / 0.5);
        border-top-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 60%, transparent);
    }

    .kw-offer-card--immersive:hover .kw-offer-meta-item {
        animation: kwl-offer-stagger 300ms ease both;
    }

    .kw-offer-card--immersive .kw-offer-meta-item:nth-child(1) { animation-delay: 0ms; }
    .kw-offer-card--immersive .kw-offer-meta-item:nth-child(2) { animation-delay: var(--kwl-stagger-delay, 60ms); }
    .kw-offer-card--immersive .kw-offer-meta-item:nth-child(3) { animation-delay: calc(var(--kwl-stagger-delay, 60ms) * 2); }
}

@keyframes kwl-offer-stagger {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (min-width: 768px) {
    .kw-layout-immersive:has(.kw-offer-card--immersive:hover) .kw-offer-card--immersive {
        filter: brightness(0.65) saturate(0.4);
        transition: filter 400ms ease;
    }

    .kw-layout-immersive:has(.kw-offer-card--immersive:hover) .kw-offer-card--immersive:hover {
        filter: brightness(1) saturate(1);
    }
}

.kw-offer-card--immersive:focus-within .kw-offer-card-reveal {
    max-height: 250px;
    opacity: 1;
}

.kw-offer-card--immersive:focus-within .kw-offer-card-overlay {
    background: rgb(0 0 0 / 0.5);
    border-top-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 60%, transparent);
}

.kw-offer-card-link:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
    border-radius: var(--kwl-card-radius, var(--kwl-radius-lg, 12px));
}

@media (prefers-color-scheme: dark) {
    .kw-offer-card--immersive .kw-offer-meta-item {
        background: rgb(255 255 255 / 0.15);
        color: rgb(255 255 255 / 0.88);
    }

    .kw-offer-card-link:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

@media (hover: none) {
    .kw-offer-card--immersive .kw-offer-card-reveal {
        max-height: none;
        opacity: 1;
    }

    .kw-offer-card--immersive .kw-offer-card-excerpt {
        display: none;
    }

    .kw-offer-card--immersive .kw-offer-card-separator {
        display: none;
    }
}

@media (max-width: 767px) {
    .kw-offer-card--immersive .kw-offer-card-reveal {
        max-height: none;
        opacity: 1;
    }

    .kw-offer-card--immersive .kw-offer-card-excerpt {
        display: none;
    }

    .kw-offer-card--immersive .kw-offer-card-separator {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kw-offer-card--immersive .kw-offer-card-image img {
        transition: none;
    }

    .kw-offer-card--immersive:hover .kw-offer-card-image img {
        transform: none;
        filter: none;
    }

    .kw-offer-card-reveal {
        transition: none;
        max-height: none;
        opacity: 1;
    }

    .kw-offer-card-overlay {
        transition: none;
    }

    .kw-offer-card--immersive .kw-offer-meta-item {
        animation: none;
    }

    .kw-offer-card--immersive,
    .kw-layout-immersive .kw-offer-card--immersive {
        filter: none;
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .kw-offer-card--immersive {
        --kw-ol-overlay-opacity: 0.75;
    }

    .kw-offer-card-overlay {
        background: rgb(0 0 0 / 0.6);
    }
}

@media (forced-colors: active) {
    .kw-offer-card--immersive::before {
        display: none;
    }

    .kw-offer-card-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: none;
    }

    .kw-offer-card--immersive .kw-offer-card-title,
    .kw-offer-card--immersive .kw-offer-card-excerpt {
        text-shadow: none;
    }
}

/* =========================================================
   Pagination
   ========================================================= */

.kw-offer-list-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
    margin-top: var(--kwl-space-lg, 1.5rem);
    padding-top: var(--kwl-space-md, 1rem);
    border-top: 1px solid var(--kw-ol-card-border);
}

.kw-offer-list-pagination__pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kwl-space-xs, 0.25rem);
}

.kw-offer-list-pagination__link,
.kw-offer-list-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kwl-space-xs, 0.25rem);
    min-width: 44px;
    min-height: 44px;
    padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
    border: 1px solid var(--kw-ol-card-border);
    border-radius: var(--kwl-radius-sm, 4px);
    font-size: var(--kwl-fsize-body, 1rem);
    color: var(--kwl-text, #1a202c);
    background: var(--kw-ol-card-bg);
}

.kw-offer-list-pagination__link {
    --kwl-link-color: var(--kwl-text, #1a202c);
    --kwl-link-hover-color: var(--kwl-primary, #00315d);
}

@media (hover: hover) {
    .kw-offer-list-pagination__link:hover {
        background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, transparent);
        border-color: var(--kwl-accent-hover, var(--kwl-accent, #BD9B5C));
    }
}

.kw-offer-list-pagination__page.is-current .kw-offer-list-pagination__current {
    background: var(--kwl-primary, #00315d);
    color: #ffffff;
    border-color: var(--kwl-primary, #00315d);
    font-weight: var(--kwl-fw-bold);
}

.kw-offer-list-pagination__link:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

.kw-offer-list-pagination__status {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: var(--kwl-fsize-caption, 0.875rem);
    color: var(--kwl-text-muted, #64748b);
}

@media (prefers-color-scheme: dark) {
    .kw-offer-list-pagination__link,
    .kw-offer-list-pagination__current {
        color: var(--kwl-text, #f7fafc);
    }

    .kw-offer-list-pagination__page.is-current .kw-offer-list-pagination__current {
        background: var(--kwl-accent, #BD9B5C);
        color: var(--kwl-text, #1a202c);
        border-color: var(--kwl-accent, #BD9B5C);
    }

    .kw-offer-list-pagination__link:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}