/**
 * Osttirol Infrastructure — ergänzende Styles zur events.css-Basis.
 *
 * Die ev-* Klassen kommen aus events.css (Tokens, Grid, Cards, Overlay, Lightbox).
 * Diese Datei ergänzt nur Infrastructure-spezifische Komponenten:
 * MapLibre-Pin, Öffnungszeiten-Liste, Scroll-Lock.
 */

.osttirol-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Status-Badge (offen / geschlossen) ---------- */

.osttirol-status-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    min-height: 28px;
}

.osttirol-status-badge--open {
    background: var(--c-success-soft);
    color: var(--c-success-text);
    border: 1px solid var(--c-success-border);
}

.osttirol-status-badge--closed {
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
}

/* "Morgen geöffnet" (openStatus 4): dezent/amber — weder grün noch rot. */
.osttirol-status-badge--soon {
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
    border: 1px solid var(--c-warning-border);
}

/* ---------- Öffnungszeiten-Tabelle ---------- */

.osttirol-detail__hours-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 15px;
}

.osttirol-detail__hours-table th,
.osttirol-detail__hours-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ece8df;
    vertical-align: top;
}

.osttirol-detail__hours-table th {
    width: 64px;
    font-weight: 600;
    color: #3a3a3a;
}

.osttirol-detail__hours-closed {
    color: #8a8a8a;
    font-style: italic;
}

.osttirol-detail__hours-note {
    font-size: 14px;
    color: #6b6b6b;
    margin: 4px 0 24px;
}

/* ---------- Links-Liste ---------- */

.osttirol-detail__links {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.osttirol-detail__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f7f5f1;
    transition: background-color 120ms ease-in-out;
    min-height: 44px;
}

.osttirol-detail__link:hover,
.osttirol-detail__link:focus-within {
    background: #ece8df;
}

.osttirol-detail__link a {
    color: #1e4d3a;
    font-weight: 500;
    text-decoration: none;
    flex: 1 1 auto;
    word-break: break-word;
}

.osttirol-detail__link a:hover,
.osttirol-detail__link a:focus {
    text-decoration: underline;
}

.osttirol-detail__link-type {
    font-size: 12px;
    color: #6b6b6b;
    background: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e0dccf;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- MapLibre-Pin (Detail-Karte) ---------- */

/* Seit der Abnahme 03.08.2026 ein <button> (oeffnet die Standort-Bubble) -
   Browser-Knopf-Optik deshalb explizit zuruecksetzen. */
.infra-map-pin {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: var(--ev-red, #b51621);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Öffnungszeiten-Liste ---------- */

.infra-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.infra-hours-list__item {
    font-size: 15px;
    color: var(--ev-text, #1c1c1e);
    line-height: 1.5;
    padding: 4px 0;
    border-bottom: 1px solid var(--ev-border, #e3e1dd);
}

.infra-hours-list__item:last-child {
    border-bottom: none;
}

/* ---------- Kontakt-Reihen (Mobil-Nummer, Online-Buchung) ---------- */

.infra-detail__contact-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.infra-detail__contact-label {
    font-size: 13px;
    color: #6b6b6b;
    min-width: 48px;
    flex-shrink: 0;
}

.infra-detail__bookable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e6b3a;
}

.infra-detail__bookable::before {
    content: "✓";
    font-size: 16px;
}

/* ---------- "Anfahrt planen" (Google-Maps-Routenlink) ---------- */

.infra-detail__route {
    margin: 8px 0 4px;
}

.infra-detail__route-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.infra-detail__route-link::before {
    content: "📍";
    font-size: 16px;
    line-height: 1;
}

/* ---------- Classifications / Merkmale-Liste ---------- */

.infra-detail__classifications {
    /* nutzt ev-detail__card aus events.css */
}

.infra-cls-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.infra-cls-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ev-border, #e3e1dd);
    font-size: 15px;
    color: var(--ev-text, #1c1c1e);
    line-height: 1.4;
}

.infra-cls-list__item:last-child {
    border-bottom: none;
}

.infra-cls-list__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.infra-cls-list__name {
    flex: 1 1 auto;
    word-break: break-word;
}

a.infra-cls-list__name {
    color: #1e4d3a;
    text-decoration: none;
}

a.infra-cls-list__name:hover,
a.infra-cls-list__name:focus {
    text-decoration: underline;
}

/* ---------- Scroll-Lock (Overlay offen) ----------
/* Hintergrund-Scroll-Sperre liegt seit 2026-08-05 in
   `Resources/Public/JavaScript/scroll-lock.js` (OsttirolScrollLock). Die alte
   Regel `overflow: hidden` auf `html` ist hier absichtlich entfernt: auf der
   Wirtsseite ist `html` der Scroll-Container, `overflow: hidden` klemmt dessen
   `scrollTop` auf 0 und die Seite sprang beim Schliessen nach oben
   (Kundenbefund 2026-08-05). Das Modul haelt die Position stattdessen ueber
   `position: fixed` am Body und stellt sie beim Freigeben wieder her. */

/* ---------- Listen-Card: Adresse + Öffnungsstatus (Achensee-Vorbild) ---------- */

/* Adresse mit vorangestelltem Standort-Pin. */
.infra-card__location {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
}

.infra-card__location-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--c-text-subtle, #767676);
    margin-top: 1px;
}

.infra-card__location-icon svg {
    width: 16px;
    height: 16px;
}

/* Öffnungsstatus-Zeile auf der Card. */
.infra-card__status {
    margin: var(--space-2, 8px) 0 0;
}

.infra-card__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    /* Neutraler Default (Status unbekannt sollte via x-show ohnehin verborgen sein). */
    background: #f2f0ec;
    color: var(--c-text-muted, #5d5d5d);
    border: 1px solid var(--c-border, #e3e1dd);
}

.infra-card__status-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.infra-card__status-icon svg {
    width: 16px;
    height: 16px;
}

/* Status-Farben (geöffnet / geschlossen / morgen). */
.infra-card__status-badge.is-open {
    background: var(--c-success-soft);
    color: var(--c-success-text);
    border-color: var(--c-success-border);
}

.infra-card__status-badge.is-closed {
    background: var(--c-error-soft);
    color: var(--c-error-text);
    border-color: var(--c-error-border);
}

.infra-card__status-badge.is-soon {
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
    border-color: var(--c-warning-border);
}

/* ---------- Detail: Kontaktblock mit Icons ---------- */

.infra-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.infra-contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
}

.infra-contact-list__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--c-text-subtle, #767676);
    margin-top: 2px;
}

.infra-contact-list__icon svg {
    width: 16px;
    height: 16px;
}

.infra-contact-list__value {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* Label vor Mobil-Nummer. */
.infra-contact-list__label {
    display: block;
    font-size: 12px;
    color: var(--c-text-subtle, #767676);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Adresse: eigenes Block-Element, damit "Anfahrt planen" darunter beginnt. */
.infra-contact-list__address {
    display: block;
}

/* "Anfahrt planen"-Link unter der Adresse.
 *
 * `display: flex` statt `inline-block`: .ev-detail__link (events.css) ist
 * `inline-flex` und floss damit inline hinter dem Adresstext weiter. Als
 * Block-Level-Flexbox erzwingt der Link eine eigene Zeile; `width: fit-content`
 * haelt Unterstreichung und Fokus-Outline an der Textbreite.
 *
 * `min-height: 44px` + zentrierter Text erfuellt die Touch-Target-Regel; die
 * Zeile wird dadurch bewusst hoeher (Text ~20 px in einer 44-px-Box), was den
 * Link zugleich sauber von der Adresse absetzt.
 *
 * Der zweite Selektor doppelt die Klassen und gewinnt damit unabhaengig von der
 * Stylesheet-Reihenfolge gegen .ev-detail__link (0,2,0 vs. 0,1,0) — die
 * Registrierungs-Reihenfolge im AssetCollector darf nicht Teil des Fixes sein. */
.infra-contact-list__route,
.infra-contact-list__route.ev-detail__link {
    display: flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    font-size: 14px;
}

/* Abstand nur, wenn wirklich eine Adresse darueber steht (sonst wuerde der
 * Link gegenueber dem Icon der Kontaktzeile verrutschen). */
.infra-contact-list__address + .infra-contact-list__route {
    margin-top: var(--space-1, 4px);
}

/* POI ohne Adresse: der Route-Link ist der einzige Inhalt der Zeile, also das
 * Pin-Icon mittig zum 44px-Touch-Target setzen statt oben. */
.infra-contact-list__item--route-only {
    align-items: center;
}

.infra-contact-list__item--route-only .infra-contact-list__icon {
    margin-top: 0;
}

/* ---------- Detail: Öffnungszeiten nach Saison gruppiert ---------- */

.infra-hours-season + .infra-hours-season {
    margin-top: var(--space-4, 16px);
}

.infra-hours-season__title {
    margin: 0 0 var(--space-1, 4px);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-subtle, #767676);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- Liste: Direktfilter Öffnungsstatus ----------
 *
 * Die generischen Filter-Chips sind unter dem 44-px-Touch-Target
 * (.ev-chip: 36 px; .ob-filter-chip im Live-Set: 32 px). Sie werden modulweit
 * geteilt und hier bewusst NICHT global geändert — der neue
 * Öffnungsstatus-Filter bekommt stattdessen einen eigenen Modifier.
 *
 * Spezifität ist Absicht, nicht Zufall: infrastructure.css laedt VOR app.css
 * und vor dem Live-Set ob-live.css, das die Chips mit
 * `.ob-root .ob-filter-offcanvas .ob-filter-chip` (0-3-0) auf 32 px setzt.
 * Der Doppel-Klassen-Selektor (0-4-0) gewinnt trotz frueherer Ladereihenfolge,
 * ohne die geteilten Regeln anzufassen. Kein z-index, kein Layout-Eingriff.
 */

.ev-chip.ev-chip--toggle,
.ob-root .ob-filter-offcanvas .ob-filter-chip.ob-filter-chip--toggle {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}