/**
 * Room Teaser Widget – Zimmer-Karten Grid/List
 * BEM: kw-room  |  Container: kw-room-teaser-container
 */

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

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

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

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

.kw-room-teaser-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-room-teaser-container.kw-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-lg, 1.5rem);
}

/* Mobile-First: Vertikal stapeln als Basis, ab 600px horizontales Listen-Layout */
.kw-layout-list .kw-room-card {
    flex-direction: column;
}

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

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

/* .kw-room-card-body Basis-Styles (flex, flex-direction, flex:1)
   sind jetzt global gesetzt — List-Layout erbt diese automatisch. */

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

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

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

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

/* Container Query Context auf card-body statt card —
   container-type auf Grid-Items kann Layout-Containment erzeugen,
   das die Höhenberechnung im Grid stört. */
.kw-room-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    container-type: inline-size;
    container-name: room-card;
}

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

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

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

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

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

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

.kw-room-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-room-badge--category {
    top: var(--kwl-space-sm, 0.5rem);
    left: var(--kwl-space-sm, 0.5rem);
    background: color-mix(in srgb, var(--kw-room-badge-cat-bg) 75%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

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

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

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

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

.kw-room-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-room-title-color);
}

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

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

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

.kw-room-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 (Groesse, Personen, Betttyp)
   ========================================================= */

.kw-room-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-room-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-room-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-room-meta-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

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

/* bed-icon: SVG wie alle anderen Meta-Icons (kein Sonderfall) */

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

.kw-room-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-room-card-padding);
    border-top: 1px solid var(--kw-room-card-border);
    margin-top: auto;
}

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

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

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

.kw-room-price-amount {
    font-size: var(--kwl-fsize-h3, 1.5rem);
    font-weight: var(--kwl-fw-bold);
    color: var(--kw-room-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)
   Visuelle Styles kommen aus kwl-shared-components.css (0,2,0).
   Hier nur die Brücke: Elementor-Controls → CSS Custom Properties.
   ========================================================= */

/* Gradient: Text dunkel auf Gold */
.kw-room-teaser-container [data-kwl-btn="gradient"] {
    --kwl-btn-bg: var(--kw-room-btn-bg, var(--kwl-accent, #BD9B5C));
    --kwl-btn-color: var(--kw-room-btn-color, var(--kwl-accent-contrast, #00315d));
}

/* Outline + Inverted: Text in Gold (Widget-Kontext) */
.kw-room-teaser-container [data-kwl-btn="outline"],
.kw-room-teaser-container [data-kwl-btn="inverted"] {
    --kwl-btn-bg: var(--kw-room-btn-bg, var(--kwl-accent, #BD9B5C));
    --kwl-btn-color: var(--kw-room-btn-color, var(--kwl-accent, #BD9B5C));
}

/* Widget-spezifische Layout-Properties */
.kw-room-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-room-card-title a:focus-visible,
.kw-room-card-image a:focus-visible,
.kw-room-meta-item:focus-visible,
.kw-room-badge:focus-visible,
.kw-room-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-room-badge--category {
        background: color-mix(in srgb, var(--kw-room-badge-cat-bg, var(--kwl-primary-hover, #1e3a5f)) 80%, transparent);
    }

    .kw-room-badge--extra-bed {
        color: #ffffff;
    }

    .kw-room-meta-item {
        background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
    }

    /* Meta-Items + Icons: SVGs erben currentColor, daher reicht color */
    .kw-room-meta-item {
        color: var(--kw-room-meta-color-dark, var(--kwl-text-muted, #d4d4d4));
    }

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

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

    /* Focus-Ring heller fuer Dark Mode */
    .kw-room-card-title a:focus-visible,
    .kw-room-card-image a:focus-visible,
    .kw-room-meta-item:focus-visible,
    .kw-room-badge:focus-visible,
    .kw-room-card-price:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

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

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

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

/* =========================================================
   Container Query: Card-intern (Footer-Stacking, Padding)
   Reagiert auf den verfuegbaren Platz der Card, nicht den Viewport.
   Greift z.B. in schmalen Elementor-Spalten oder Mehrspalten-Grids.
   ========================================================= */

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

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

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

/* =========================================================
   IMMERSIVE LAYOUT
   Bild fuellt die gesamte Card, Content als Glassmorphism-
   Overlay darueber. Hover-Reveal fuer Details.
   ========================================================= */

/* --- Immersive: Grid Container --- */

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

/* --- Immersive: Custom Properties --- */

.kw-room-card--immersive {
    --kw-room-immersive-ratio: 3 / 4;
    --kw-room-overlay-opacity: 0.55;
}

/* --- Immersive: Card Base --- */

.kw-room-card--immersive {
    position: relative;
    aspect-ratio: var(--kw-room-immersive-ratio);
    overflow: hidden;
    /* clip-path statt reinem overflow:hidden — ueberlebt filter-Transitions
       ohne border-radius-Flicker (GPU-composited Clipping) */
    clip-path: inset(0 round var(--kwl-card-radius, var(--kwl-radius-lg, 12px)));
}

/* Card-Komponente: border-top im Immersive entfernen */
.kw-room-card--immersive[data-kwl-card] {
    border-top-width: 0;
}

/* --- Immersive: Bild füllt die Card --- */

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

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

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

/* --- Immersive: Gradient-Overlay (Textlesbarkeit) --- */

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

/* --- Immersive: Glassmorphism-Overlay-Panel ---
   z-index 3: ueber Stretched Link (2), damit Tooltips und
   Pointer-Events auf Meta/Preis/Titel funktionieren.
   Grid: Titel links, Preis rechts — Speisekarten-Pattern. */

.kw-room-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;
}

/* --- Immersive: Titel (links, immer sichtbar, weiss) --- */

.kw-room-card--immersive .kw-room-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);
}

/* --- Immersive: Preis (rechts, einzeilig, Gold-Akzent) --- */

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

.kw-room-card--immersive .kw-room-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-room-card--immersive .kw-room-price-label {
    color: rgb(255 255 255 / 0.7);
}

/* --- Immersive: Hover-Reveal-Sektion --- */

.kw-room-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;
}

/* --- Immersive: Gold-Separator im Reveal --- */

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

/* --- Immersive: Excerpt (2-Zeilen Clamp, weiss) --- */

.kw-room-card--immersive .kw-room-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);
}

/* --- Immersive: Meta-Pills (weiss auf dunkel) --- */

.kw-room-card--immersive .kw-room-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-room-card--immersive .kw-room-meta-icon svg {
    fill: currentColor;
}

/* --- Immersive: Stretched Link (gesamte Card klickbar) ---
   z-index 2: unter Overlay-Panel (3), damit Tooltips funktionieren.
   Button und Badges behalten z-index 4 (ueber allem). */

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

/* Button im Immersive: versteckt — gesamte Card ist ueber Stretched
   Link klickbar, Button wuerde nur Platz verschwenden. */
.kw-room-card--immersive .kw-room-btn {
    display: none;
}

/* Badges ueber allem */
.kw-room-card--immersive .kw-room-badge {
    z-index: 4;
}

/* --- Immersive: Badge-Repositionierung --- */

.kw-room-card--immersive .kw-room-badge--extra-bed {
    bottom: auto;
    top: var(--kwl-space-sm, 0.5rem);
    left: auto;
    right: var(--kwl-space-sm, 0.5rem);
}

/* =========================================================
   Immersive: Hover-States (nur Desktop mit Maus)
   ========================================================= */

@media (hover: hover) {
    /* Reveal-Panel oeffnen */
    .kw-room-card--immersive:hover .kw-room-card-reveal {
        max-height: 250px;
        opacity: 1;
    }

    /* Bild: subtile Sättigung statt plumpes Scale */
    .kw-room-card--immersive:hover .kw-room-card-image img {
        transform: scale(1.03);
        filter: saturate(1.1);
    }

    /* Panel verdichtet sich, Gold-Border erscheint */
    .kw-room-card--immersive:hover .kw-room-card-overlay {
        background: rgb(0 0 0 / 0.5);
        border-top-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 60%, transparent);
    }

    /* Meta-Pills Stagger-Animation */
    .kw-room-card--immersive:hover .kw-room-meta-item {
        animation: kwl-room-stagger 300ms ease both;
    }

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

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

/* =========================================================
   Immersive: Focus Spotlight
   Dimmt alle Cards NUR wenn eine Card tatsaechlich gehovert
   wird. :has() verhindert Dimming bei Hover auf leere
   Grid-Zellen.
   ========================================================= */

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

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

/* =========================================================
   Immersive: Keyboard-Accessibility (focus-within)
   ========================================================= */

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

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

/* Stretched Link: Focus-Ring */
.kw-room-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));
}

/* =========================================================
   Immersive: Dark Mode
   Overlay ist bereits dunkel — nur Feintuning noetig.
   ========================================================= */

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

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

/* =========================================================
   Immersive: Touch-Geraete (hover: none)
   Panel permanent sichtbar — Titel, Meta, Preis.
   ========================================================= */

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

    /* Excerpt auf Touch ausblenden (Platz sparen) */
    .kw-room-card--immersive .kw-room-card-excerpt {
        display: none;
    }

    /* Separator auf Touch ausblenden */
    .kw-room-card--immersive .kw-room-card-separator {
        display: none;
    }
}

/* Viewport-Fallback: Elementor-Preview simuliert (hover: none) nicht,
   aber kleine Viewports sind fast immer Touch-Geraete. */
@media (max-width: 767px) {
    .kw-room-card--immersive .kw-room-card-reveal {
        max-height: none;
        opacity: 1;
    }

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

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

/* =========================================================
   Immersive: Reduced Motion
   ========================================================= */

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

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

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

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

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

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

/* =========================================================
   Immersive: High Contrast + Forced Colors
   ========================================================= */

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

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

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

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

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

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281) */