/* ============================================================
   urlaubshuetten.com – Unterkunfts-Liste
   An die Huettenland-Vorlage angeglichen (Karte 1168x438,
   Bild 50% / volle Hoehe / 4:3). Reines CSS-Override,
   laedt NACH dem Theme-CSS. Keine Template-Aenderung noetig.
   ============================================================ */

/* ---- KARTE: grosses Bild, volle Hoehe, klarer Rahmen ---- */
.accommodation-row{
  grid-template-columns: 60% 1fr;        /* Foto groesser, Textspalte schmaler */
  grid-template-rows: 1fr auto;          /* Text oben, Button-Zeile ganz unten */
  align-items: stretch;
  min-height: 382px;                     /* = natives 4:3 eurer Fotos bei 50% Breite -> grosses Bild OHNE Crop */
  gap: 0;
  padding: 0;                            /* Bild buendig an die Kante           */
  overflow: hidden;                      /* Ecken sauber beschneiden            */
  position: relative;                    /* Anker fuer Herz/Badge auf dem Bild */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.10);  /* gestaffelt = weicher, teurer */
  transition: transform .18s ease, box-shadow .18s ease;
}
.accommodation-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.accommodation-row + .accommodation-row{ margin-top: 24px; }

/* ---- BILD als Held: fuellt die linke Haelfte komplett ---- */
.accommodation-row__image{ grid-row: 1 / -1; }   /* Bild ueber beide Zeilen = volle Hoehe */
.accommodation-row__image,
.accommodation-row__img{ height: 100%; margin: 0; }
.accommodation-row__img{ position: relative; overflow: hidden; }
.accommodation-row__img img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;        /* Radius kommt von der Karte */
  display: block;
  transition: transform .5s ease;   /* sanfter Zoom beim Hover */
}
.accommodation-row:hover .accommodation-row__img img{ transform: scale(1.06); }

/* ---- TEXTBEREICH ---- */
.accommodation-row__content{
  grid-column: 2;
  grid-row: 1;
  align-self: start;        /* Text oben */
  padding: 30px 60px 8px 34px;   /* rechts Platz freihalten fuers Merk-Herz */
}
.accommodation-row__title{
  font-size: 28px;          /* groesser als Vorlage (24px) */
  line-height: 1.18;
  margin: 0;
}
.accommodation-row__location{
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;          /* angeglichen an Vorlage-Region (16px/fett) */
  font-weight: 700;
  color: #5f5a4e;
  margin-top: 10px;
}
.accommodation-row__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: #555;
  font-size: 18px;          /* groesser als Vorlage-Fakten */
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);   /* feine Trennlinie = klare Struktur */
}
.accommodation-row__meta svg{ width: 22px; height: 22px; }   /* groessere Symbole */
.accommodation-row__meta i,
.accommodation-row__meta svg{ color: #7a7a7a; }

/* ---- ASIDE: Preis + Button ---- */
.accommodation-row__aside{
  grid-column: 2;
  grid-row: 2;
  align-self: end;          /* Button ganz unten */
  padding: 0 34px 28px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}
.accommodation-row__cta.btn--primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 14px 30px;       /* kraeftiger Button wie in der Vorlage */
  border-radius: 12px;
  font-size: 15px;
  transition: gap .15s ease, background-color .15s ease;
  /* Vorlage-Akzent ist dunkelrot. Wenn ihr das wollt statt Oliv,
     diese zwei Zeilen aktivieren:
  background: #9a2727;
  border-color: #9a2727; */
}
.accommodation-row__cta.btn--primary::after{ content: "\2192"; font-size: 1.05em; line-height: 1; }
.accommodation-row:hover .accommodation-row__cta.btn--primary{ gap: 12px; }   /* Pfeil rueckt nach */

/* ---- Merkzettel-Herz als Frosted-Circle (hebt sich vom Foto ab) ---- */
.accommodation-row__fav{
  top: 14px; right: 14px;       /* position:absolute kommt schon vom Theme */
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Hintergrund: dunkleres Beige (kein Holz mehr) ---- */
body{ background: #e8dfcc; }

/* ---- Hüttenfinder/Filter als helles Panel (hebt sich leicht vom Beige ab) ---- */
.accommodation-search__sidebar{
  background: #f5f1ea;
  border-radius: 14px;
  padding: 8px 0;            /* nur oben/unten, sonst horizontaler Ueberlauf */
  box-sizing: border-box;
  /* KEIN overflow:hidden hier - das hat den aufklappenden Datepicker abgeschnitten.
     Desktop bekommt sein vertikales Scrollen weiter ueber die @media-Regel unten. */
}
/* Kalender (Reisezeitraum) immer ueber allem - nie hinter der unteren Leiste */
.ui-datepicker, .datepicker-arrival, .datepicker-departure{ z-index: 99999 !important; }

/* ---- "Sortieren nach"-Auswahl ausblenden (geht den Gast nichts an).
        Die Standard-Sortierung bleibt aktiv, nur das Bedienelement ist weg. ---- */
.accommodation-list__sort{ display: none !important; }

/* ---- Filter kompakter & aufgeraeumt (kleinere Schrift, kein Ueberlauf) ---- */
.accommodation-search__sidebar *{ box-sizing: border-box; max-width: 100%; }
.accommodation-search__sidebar legend{ font-size: 16px !important; }      /* gruene Abschnitts-Header kleiner */
.accommodation-search__sidebar label{ font-size: 15px !important; line-height: 1.45; }
.accommodation-search__sidebar input,
.accommodation-search__sidebar select{ font-size: 15px; }
/* volle Breite nur fuer Text-/Datumsfelder + Selects, NICHT fuer Checkboxen */
.accommodation-search__sidebar select,
.accommodation-search__sidebar input:not([type="checkbox"]):not([type="radio"]){ width: 100%; }

/* Suchen/Zuruecksetzen untereinander & volle Breite (sonst wird "Zuruecksetzen" abgeschnitten) */
.accommodation-search__sidebar .form-button__actions{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.accommodation-search__sidebar .form-button__actions .widget-submit,
.accommodation-search__sidebar .form-button__actions button.submit{ width: 100%; }

/* ============================================================
   FILTER rechts + ein-/ausklappbar
   Der Toggle-Button "uh-filter-toggle" wird per JS eingefuegt
   (Snippet kommt ins Layout-Feld "Eigener JavaScript-Code").
   Klasse "uh-closed" auf .accommodation-search = Filter versteckt.
   ============================================================ */
/* Desktop-Klapp-Kopf (in der Sidebar) und mobile Leiste sind per default aus
   und werden je Breakpoint eingeblendet. */
.uh-deskhead{ display: none; }
.uh-mobilebar{ display: none; }

@media (min-width: 1000px){
  /* Filter auf die rechte Seite (Hauptliste links).
     Spiegelung per direction:rtl -> keine Grid-Platzierungs-Luecke. */
  .accommodation-search{ direction: rtl !important; grid-template-columns: 280px 1fr !important; }
  .accommodation-search > *{ direction: ltr !important; }
  .accommodation-row{ min-height: 476px; }   /* 4:3 bei Bild ~635px (groesser) */

  /* Filter scrollt mit (sticky); eigener Scroll, falls die Liste lang ist */
  .accommodation-search__sidebar{
    align-self: start !important;
    position: sticky !important;
    top: 116px;                              /* unter dem 100px-Header */
    max-height: calc(100vh - 132px);
    overflow: hidden auto;                   /* nur vertikal scrollen, kein Horizontal-Balken */
  }

  /* Desktop: Kopfzeile ueber "Suchkriterien" - Anfrage links (gruen), Hüttenfinder rechts (rot) */
  .uh-deskhead{ display: flex; gap: 8px; margin-bottom: 12px; }
  .uh-deskhead > *{
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 10px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  }
  .uh-desk-anfrage{ background: #7d8a3c; color: #fff; }   /* gruen, links */
  .uh-desk-filter{ background: #8c2a20; color: #fff; }     /* rot, rechts */
  .uh-desk-filter::before{ content: "\2630"; font-size: 1.05em; line-height: 1; }
  /* eingeklappt: nur die Kopfzeile bleibt, der Filterinhalt verschwindet */
  .accommodation-search__sidebar.uh-collapsed > *:not(.uh-deskhead){ display: none !important; }
}

@media (max-width: 999px){
  /* Filter standardmaessig zu (JS setzt uh-closed) */
  .accommodation-search.uh-closed .accommodation-search__sidebar{ display: none !important; }
  /* Desktop-Kopfzeile mobil nicht noetig */
  .uh-deskhead{ display: none !important; }

  /* Feste untere Leiste: links Hüttenfinder, rechts Anfrage */
  .uh-mobilebar{
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    box-shadow: 0 -4px 16px rgba(0,0,0,.22);
  }
  .uh-mobilebar > *{
    flex: 1; text-align: center;
    padding: 15px; font-size: 16px; font-weight: 600;
    border: none; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .uh-mobile-filter{ background: #8c2a20; color: #fff; }     /* Rot = Filter */
  .uh-mobile-filter::before{ content: "\2630"; }
  .uh-mobile-anfrage{ background: #7d8a3c; color: #fff; }    /* Oliv = Anfrage (Marke) */

  /* Platz, damit die letzte Karte nicht hinter der Leiste verschwindet */
  .accommodation-search__main{ padding-bottom: 76px; }

  /* Theme-eigene grüne Mobil-Leiste (Anfragen/Hüttenfinder) ausblenden -
     unsere Leiste ersetzt sie. Das Hauptmenü (.mod_navigation) bleibt! */
  .mobile-sticky{ display: none !important; }
}

/* ============================================================
   MOBIL – aus der Zeile wird eine echte Kachel:
   Bild oben in vollem 4:3 (kein harter Crop), Text darunter.
   ============================================================ */
@media (max-width: 760px){
  .accommodation-row{
    grid-template-columns: 1fr;
    grid-template-rows: none;      /* gestapelt: Bild, Text, Button */
    min-height: 0;                 /* WICHTIG: Desktop-Hoehe zuruecksetzen */
  }
  .accommodation-row__image{ grid-row: auto; }   /* Spanne zuruecksetzen */
  .accommodation-row__image,
  .accommodation-row__img{ height: auto; }
  .accommodation-row__img img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;           /* noch hoeher = noch groesseres Bild auf dem Handy */
    object-fit: cover;
  }
  .accommodation-row__content{
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    padding: 22px 22px 4px;
  }
  .accommodation-row__title{ font-size: 26px; }   /* groessere Ueberschrift auch mobil */
  .accommodation-row__aside{
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    padding: 12px 22px 22px;
    justify-content: flex-start;
  }
  .accommodation-row__cta.btn--primary{ width: 100%; text-align: center; }
}