/**
 * Smart Voucher Box Widget – Gutschein-Cards Grid/List
 * BEM: kw-voucher  |  Container: kw-voucher-wrapper
 */

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

.kw-voucher-wrapper {
    --kw-voucher-card-bg: var(--kwl-bg, #ffffff);
    --kw-voucher-card-border: var(--kwl-border, #e2e8f0);
    --kw-voucher-card-radius: var(--kwl-radius-lg, 12px);
    --kw-voucher-card-shadow: var(--kwl-shadow-md);
    --kw-voucher-card-shadow-hover: var(--kwl-shadow-hover);
    --kw-voucher-accent: var(--kwl-accent, #BD9B5C);
    --kw-voucher-gap: var(--kwl-space-lg, 1.5rem);
    --kw-voucher-img-radius: var(--kwl-radius-md, 8px);
    --kw-voucher-btn-bg: var(--kwl-accent, #BD9B5C);
    --kw-voucher-btn-color: var(--kwl-btn-text, #ffffff);
    --kw-voucher-btn-radius: var(--kwl-radius-md, 8px);
    --kw-voucher-price-bg: var(--kw-voucher-accent);
    --kw-voucher-price-color: var(--kwl-btn-text, #ffffff);
    --kw-voucher-badge-bg: var(--kwl-bg-alt, #f7fafc);
    --kw-voucher-badge-color: var(--kwl-text-muted, #64748b);
    --kw-voucher-title-color: var(--kwl-text, #1a202c);
    --kw-voucher-desc-color: var(--kwl-text-muted, #64748b);
    --kw-voucher-card-padding: var(--kwl-space-lg, 1.5rem);
}

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

.kw-voucher-wrapper.kw-voucher-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--kw-voucher-gap);
}

/* =========================================================
   List Layout (Mobile: Column, Desktop: Row ab 769px)
   ========================================================= */

.kw-voucher-wrapper.kw-voucher-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--kw-voucher-gap);
}

@media (min-width: 769px) {
    .kw-voucher-layout-list .kw-voucher-card {
        flex-direction: row;
        align-items: stretch;
    }

    /* Bild-Container: feste Breite, Hoehe vom Content bestimmt */
    .kw-voucher-layout-list .kw-voucher-image {
        flex: 0 0 200px;
        max-width: 200px;
        position: relative;
        min-height: 120px;
    }

    /* Bild absolut positioniert — verhindert dass es die Kartenhoehe aufblaest */
    .kw-voucher-layout-list .kw-voucher-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
        object-fit: cover;
        border-radius: var(--kw-voucher-img-radius) 0 0 var(--kw-voucher-img-radius);
    }

    .kw-voucher-layout-list .kw-voucher-content {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .kw-voucher-layout-list .kw-voucher-action {
        flex-shrink: 0;
        align-self: center;
        margin-top: 0;
    }

    .kw-voucher-layout-list .kw-voucher-action .kw-voucher-btn {
        width: auto;
        white-space: nowrap;
    }
}

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

.kw-voucher-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Bridge: Widget-Tokens → Shared Card-Component */
.kw-voucher-card[data-kwl-card] {
    --kwl-card-bg: var(--kw-voucher-card-bg, var(--kwl-bg, #ffffff));
    --kwl-card-accent: var(--kw-voucher-accent, var(--kwl-accent, #BD9B5C));
    --kwl-card-lift: -4px;
}

@media (hover: hover) {
    /* In list: kein Lift-Effekt */
    .kw-voucher-layout-list .kw-voucher-card:hover {
        transform: none;
    }
}

/* =========================================================
   Image (Grid: quadratisch)
   ========================================================= */

.kw-voucher-image {
    overflow: hidden;
    position: relative;
}

.kw-voucher-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    transition: transform 500ms var(--kwl-ease-default);
}

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

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

/* Container Query Context auf content statt card —
   container-type auf Grid-Items kann Layout-Containment erzeugen,
   das die Höhenberechnung im Elementor Flex-Container stört. */
.kw-voucher-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--kwl-space-sm, 0.5rem);
    padding: var(--kw-voucher-card-padding);
    container-type: inline-size;
    container-name: voucher-card;
}

/* =========================================================
   Header (Icon + Title + Price inline)
   ========================================================= */

.kw-voucher-header {
    display: flex;
    align-items: center;
    gap: var(--kwl-space-sm, 0.5rem);
}

/* Icon-Circle Bridge: Widget → Shared [data-kwl-icon-circle] */
.kw-voucher-card [data-kwl-icon-circle] {
    --kwl-icon-size: 32px;
    --kwl-icon-color: var(--kw-voucher-accent, var(--kwl-accent, #BD9B5C));
}

.kw-voucher-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-bottom: var(--kwl-space-xs, 0.25rem);
    font-family: var(--kwl-font-heading);
    font-size: var(--kwl-fsize-h4, 1.25rem);
    line-height: var(--kwl-lh-heading, 1.2);
    color: var(--kw-voucher-title-color);
    font-weight: var(--kwl-fw-semibold);
}

/* =========================================================
   Price (rechts im Header, kleiner als Titel)
   ========================================================= */

.kw-voucher-price {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
    margin-left: auto;
    gap: 0.15em;
    padding: 0.2em 0.65em;
    background: color-mix(in srgb, var(--kw-voucher-price-bg) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--kw-voucher-price-color);
    font-family: var(--kwl-font-heading);
    font-size: var(--kwl-fsize-body, 0.95rem);
    font-weight: var(--kwl-fw-bold);
    line-height: var(--kwl-lh-snug);
    border-radius: var(--kwl-radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--kw-voucher-price-bg) 50%, transparent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kw-voucher-price-currency {
    font-size: 0.8em;
    font-weight: var(--kwl-fw-regular);
    opacity: 0.85;
}

/* =========================================================
   Preisaufschluesselung (DZ/EZ pro Person)
   ========================================================= */

.kw-voucher-price-details {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    padding: 0 var(--kwl-space-xs, 0.25rem);
}

.kw-voucher-price-line {
    font-size: var(--kwl-fsize-caption, 0.8rem);
    color: var(--kwl-text-muted, #718096);
    font-variant-numeric: tabular-nums;
    line-height: var(--kwl-lh-relaxed);
}

/* =========================================================
   Badges (Personen, Gueltigkeit)
   ========================================================= */

.kw-voucher-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kwl-space-xs, 0.25rem);
}

.kw-voucher-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.75em;
    background: var(--kw-voucher-badge-bg);
    color: var(--kw-voucher-badge-color);
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-caption, 0.8rem);
    line-height: var(--kwl-lh-relaxed);
    border-radius: var(--kwl-radius-full, 9999px);
    border: 1px solid var(--kw-voucher-card-border);
    white-space: nowrap;
}

.kw-voucher-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Neutralisiert Browser-Auto-Erkennung von Telefonnummern im Datum-Badge */
.kw-voucher-badge--validity a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* =========================================================
   Description
   ========================================================= */

.kw-voucher-desc {
    margin: 0;
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-body, 0.95rem);
    line-height: var(--kwl-lh-body, 1.5);
    color: var(--kw-voucher-desc-color);
}

/* =========================================================
   Button / Action
   ========================================================= */

.kw-voucher-action {
    padding: 0 var(--kw-voucher-card-padding) var(--kw-voucher-card-padding);
    margin-top: auto;
}

.kw-voucher-btn {
    width: 100%;
    min-height: 44px;
    padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.5rem);
    font-size: var(--kwl-fsize-body, 0.95rem);
}

/* Bridge: Widget-Tokens → Shared Gradient-Button-Component */
.kw-voucher-card [data-kwl-btn="gradient"] {
    --kwl-btn-bg: var(--kw-voucher-btn-bg, var(--kwl-accent, #BD9B5C));
    --kwl-btn-color: var(--kw-voucher-btn-color, var(--kwl-btn-text, #ffffff));
    --kwl-btn-radius: var(--kw-voucher-btn-radius, var(--kwl-radius-md, 8px));
}

.kw-voucher-btn-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4em;
    flex-shrink: 0;
}

.kw-voucher-btn-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

/* =========================================================
   Focus Visible + Active (BFSG)
   ========================================================= */

.kw-voucher-card a:focus-visible,
.kw-voucher-btn:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

.kw-voucher-btn:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}

/* =========================================================
   Container Queries (Card-interne Breakpoints)
   ========================================================= */

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

    .kw-voucher-action {
        padding: var(--kwl-space-md, 1rem);
    }

    .kw-voucher-title {
        font-size: var(--kwl-fsize-body, 1rem);
    }

    .kw-voucher-header {
        flex-wrap: wrap;
    }

    .kw-voucher-price {
        font-size: var(--kwl-fsize-caption, 0.8rem);
    }

    .kw-voucher-badges {
        flex-direction: column;
    }
}

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

@media (prefers-color-scheme: dark) {
    .kw-voucher-wrapper {
        --kw-voucher-card-bg: var(--kwl-bg, #1a202c);
        --kw-voucher-card-border: var(--kwl-border, #4a5568);
        --kw-voucher-badge-bg: var(--kwl-bg-alt, #2d3748);
        --kw-voucher-badge-color: var(--kwl-text-muted, #a0aec0);
        --kw-voucher-title-color: var(--kwl-text, #f7fafc);
        --kw-voucher-desc-color: var(--kwl-text-muted, #a0aec0);
    }

    .kw-voucher-card [data-kwl-icon-circle] {
        background: color-mix(in srgb, var(--kw-voucher-accent) 10%, var(--kwl-bg, #1a202c));
        border-color: color-mix(in srgb, var(--kw-voucher-accent) 18%, var(--kwl-border, #4a5568));
    }

    .kw-voucher-card a:focus-visible,
    .kw-voucher-btn:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }

    .kw-voucher-price-line {
        color: var(--kwl-text-muted, #a0aec0);
    }
}

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

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

    @media (hover: hover) {
        .kw-voucher-card:hover .kw-voucher-image img {
            transform: none;
        }
    }
}

/* =========================================================
   Responsive – List: Bild 16:9 auf Mobil
   ========================================================= */

.kw-voucher-layout-list .kw-voucher-image img {
    aspect-ratio: 16 / 9;
}