/* =========================================================
   Room Amenities — Editorial-Inline-Layout (§471)
   Hotel Brunner 2026

   Konsolidierter Stil — keine Pills/Columns/Icon-Bubble-Varianten mehr.
   Pro Item: Icon links + fetter Titel + 1-Zeilen-Stichwort.
   Trennlinie unten. 3-2-1 Spalten Desktop/Tablet/Mobile.
   ========================================================= */

.kw-amenity-wrapper,
.kw-amenity-overflow {
    /* Akzentfarbe: helles Akzent-Gold fuer Trennlinien (subtil), satter
       Fokus-Gold fuer das Icon (BFSG-3:1-Mindestkontrast fuer Non-Text). */
    --kwl-am-accent: var(--kwl-accent, #BD9B5C);
    --kwl-am-icon-color: var(--kwl-focus, #7B6835);
    --kwl-am-name-color: var(--kwl-text, #1a202c);
    --kwl-am-desc-color: var(--kwl-text-muted, #64748b);
    /* Trennlinie: ~18% Akzent ergibt warmes Gold ohne aufdringlich zu wirken;
       Light-Mode getestet auf #ffffff (~10:1 Hintergrund-zu-Akzent ist OK fuer
       Trennlinien — die brauchen keinen Text-Kontrast). */
    --kwl-am-divider: color-mix(in srgb, var(--kwl-am-accent) 18%, transparent);
    --kwl-am-icon-size: 22px;
    --kwl-am-row-gap: 0px;

    /* CSS-Grid uebernimmt das Layout-Pattern (3 Spalten Desktop, Reflow auf
       Tablet/Mobile). gap haelt Spalten- und Zeilen-Abstaende einheitlich. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: var(--kwl-am-row-gap);
}

@media (min-width: 600px) {
    .kw-amenity-wrapper,
    .kw-amenity-overflow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .kw-amenity-wrapper,
    .kw-amenity-overflow {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================
   Item — Icon + Body (Titel + Stichwort)
   ========================================================= */

.kw-amenity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-block: 0.875rem;
    border-block-end: 1px solid var(--kwl-am-divider);
    /* Touch-Target ≥44 px (BFSG): icon-size 22 + padding-block 14*2 = 50 px Mindesthoehe */
    min-block-size: 44px;
}

.kw-amenity-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: var(--kwl-am-icon-size, 22px);
    block-size: var(--kwl-am-icon-size, 22px);
    color: var(--kwl-am-icon-color);
    /* Vertikal-Mitte zur ersten Textzeile (line-height der --kwl-am-name beachten) */
    margin-block-start: 0.125rem;
}

.kw-amenity-item__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.kw-amenity-item__icon img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.kw-amenity-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* min-inline-size: 0 verhindert das klassische Flex-Item-Overflow-Problem,
       wenn Stichwort lang ist und das Item sonst aus dem Grid bricht. */
    min-inline-size: 0;
    flex: 1 1 auto;
}

/* =========================================================
   Typografie
   ========================================================= */

.kw-amenity-name {
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-small, 0.9375rem);
    font-weight: var(--kwl-fw-semibold, 600);
    line-height: var(--kwl-lh-tight, 1.3);
    color: var(--kwl-am-name-color);
    /* Saubere deutsche Silbentrennung statt buchstabenweisem Bruch (vgl. §470) */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.kw-amenity-desc {
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-caption, 0.8125rem);
    font-weight: var(--kwl-fw-regular, 400);
    line-height: var(--kwl-lh-body, 1.45);
    color: var(--kwl-am-desc-color);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* =========================================================
   Details Overflow (CSS-only Aufklapp-Animation)
   ========================================================= */

.kw-amenity-details {
    interpolate-size: allow-keywords;
    display: flex;
    flex-direction: column;
    margin-block-start: var(--kwl-space-md, 1rem);
}

.kw-amenity-details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        block-size 400ms var(--kwl-ease-entrance, ease-out),
        opacity 300ms var(--kwl-ease-entrance, ease-out),
        content-visibility 400ms ease allow-discrete;
}

.kw-amenity-details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

@starting-style {
    .kw-amenity-details[open]::details-content {
        block-size: 0;
        opacity: 0;
    }
}

.kw-amenity-overflow {
    margin-block-start: var(--kwl-space-md, 1rem);
}

/* =========================================================
   Toggle Summary (data-kwl-btn="outline" liefert Basis-Style)
   ========================================================= */

.kw-amenity-toggle {
    list-style: none;
    font-size: var(--kwl-fsize-small, 0.875rem);
    order: 1;
    align-self: center;
    margin-block-start: var(--kwl-space-sm, 0.5rem);
}

.kw-amenity-toggle::-webkit-details-marker {
    display: none;
}

.kw-amenity-details:not([open]) .kw-amenity-toggle__less {
    display: none;
}

.kw-amenity-details[open] .kw-amenity-toggle__more {
    display: none;
}

.kw-amenity-toggle__arrow {
    font-size: 0.8em;
    display: inline-block;
    transition: transform var(--kwl-transition, 200ms ease);
}

.kw-amenity-details[open] .kw-amenity-toggle__arrow {
    transform: rotate(180deg);
}

/* =========================================================
   Scroll-Reveal (CSS-only via animation-timeline, Chromium)
   ========================================================= */

@supports (animation-timeline: view()) {
    .kw-amenity-wrapper {
        animation: kwl-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }
}

/* =========================================================
   Dark Mode (Frontend nutzt prefers-color-scheme)
   Kontrast Light:
   - Name #1a202c auf weissem Card-BG = ~16.5:1 ✓
   - Desc #64748b auf weiss = ~5.5:1 ✓
   - Icon #7B6835 auf weiss = ~5.8:1 ✓ (BFSG ≥3:1 fuer Non-Text)
   - Trennlinie 18% Akzent auf weiss = ~1.5:1 (Trennlinien brauchen kein Kontrast-Min)
   Kontrast Dark:
   - Name #f7fafc auf #1a202c = ~17:1 ✓
   - Desc #a0aec0 auf #1a202c = ~7.5:1 ✓
   - Icon #c9a84c auf #1a202c = ~7.4:1 ✓
   ========================================================= */

@media (prefers-color-scheme: dark) {
    .kw-amenity-wrapper,
    .kw-amenity-overflow {
        --kwl-am-accent: var(--kwl-accent, #d4b87a);
        --kwl-am-icon-color: var(--kwl-focus, #c9a84c);
        --kwl-am-name-color: var(--kwl-text, #f7fafc);
        --kwl-am-desc-color: var(--kwl-text-muted, #a0aec0);
        --kwl-am-divider: color-mix(in srgb, var(--kwl-am-accent) 24%, transparent);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .kw-amenity-toggle__arrow,
    .kw-amenity-details::details-content {
        transition: none;
    }

    @supports (animation-timeline: view()) {
        .kw-amenity-wrapper {
            animation: none;
        }
    }
}

/* =========================================================
   Forced Colors (Windows High Contrast)
   ========================================================= */

@media (forced-colors: active) {
    .kw-amenity-wrapper,
    .kw-amenity-overflow {
        --kwl-am-icon-color: CanvasText;
        --kwl-am-divider: CanvasText;
    }
}