/* =========================================================================
   THÜRINGER SCHWITZHÜTTE – ELEMENTOR-WIDGET-SEKTIONEN
   =========================================================================
   Styles für die Theme-Widgets (Hero, Karten, Preise, Aufgüsse,
   Bewertungen, FAQ, Story, Buchung). Nutzt die Tokens aus main.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Sektions-Grundlagen
   ------------------------------------------------------------------------- */
.ts-section {
  position: relative;
  padding: var(--ts-space-xl) var(--ts-gutter);
}

.ts-section__inner {
  max-width: var(--ts-container-wide);
  margin-inline: auto;
}

.ts-section__inner--narrow {
  max-width: 900px;
}

.ts-section__header {
  text-align: center;
  margin-bottom: var(--ts-space-lg);
}

.ts-section__title {
  font-size: var(--ts-text-h2);
  line-height: var(--ts-leading-h2);
  margin: 0.25em 0 0.5em;
}

.ts-section__intro {
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .ts-section {
    padding: var(--ts-space-lg) var(--ts-gutter);
  }
}

/* -------------------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------------------- */
.ts-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh; /* Kundenwunsch: weniger Abstand oben, Inhalt sitzt höher */
  padding: 2em;
  /* Bild kommt als CSS-Variable aus dem Widget (Desktop quer / Mobil hoch) */
  background-image: var(--ts-hero-bg, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--ts-color-bg);
  isolation: isolate;
}

/* Dezentes Overlay: Das Erlebnis-Foto bleibt sichtbar, oben/unten dunkler
   für Lesbarkeit bzw. nahtlosen Übergang in den Seitenhintergrund. */
.ts-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 43, 32, 0.70) 0%,
    rgba(26, 43, 32, 0.35) 40%,
    rgba(26, 43, 32, 0.45) 72%,
    #1A2B20 100%
  );
  z-index: -1;
}

/* Textschatten sichert die Lesbarkeit auf hellen Bildbereichen */
.ts-hero__title,
.ts-hero__text {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.ts-hero__content {
  position: relative;
  text-align: center;
  max-width: 900px;
}

.ts-hero__title {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 0.4em;
}

.ts-hero__text {
  max-width: 560px;
  margin: 0 auto 1.5em;
}

.ts-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

@media (max-width: 767px) {
  .ts-hero {
    min-height: 72vh;
    /* Hochformat-Bild fürs Handy; Fallback: Desktop-Bild */
    background-image: var(--ts-hero-bg-mobile, var(--ts-hero-bg, none));
  }
  .ts-hero__title {
    font-size: 30px;
  }
}

/* -------------------------------------------------------------------------
   3. Karten-Grid (Schritte / Warum)
   ------------------------------------------------------------------------- */
.ts-cards__grid {
  display: grid;
  gap: 3em;
}

.ts-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ts-cards__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ts-cards__grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .ts-cards__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .ts-cards__grid--2,
  .ts-cards__grid--3,
  .ts-cards__grid--4 {
    grid-template-columns: 1fr;
  }
}

.ts-card {
  border-radius: var(--ts-radius-card);
  padding: 3em;
  text-align: center;
}

.ts-card__media img {
  width: 40%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 3px;
}

.ts-card__title {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 18px;
}

.ts-card__text {
  margin: 0;
}

/* -------------------------------------------------------------------------
   4. Preistabelle
   ------------------------------------------------------------------------- */
.ts-pricing__table-wrap {
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--ts-radius-card);
  padding: clamp(8px, 2vw, 20px);
}

.ts-pricing__table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 1; /* über den Glanz-Pseudoelementen der glass-card */
}

.ts-pricing__table th,
.ts-pricing__table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ts-pricing__table thead th {
  font-family: var(--ts-font-heading);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.ts-pricing__table tbody tr:last-child th,
.ts-pricing__table tbody tr:last-child td {
  border-bottom: 0;
}

.ts-pricing__table tbody tr {
  transition: background var(--ts-transition);
}

@media (hover: hover) {
  .ts-pricing__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

.ts-pricing__price-col {
  text-align: right !important;
  font-family: var(--ts-font-heading);
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}

.ts-pricing__old-col {
  text-align: right !important;
  color: var(--ts-color-text-muted);
  white-space: nowrap;
}

.ts-pricing__badge {
  display: inline-block;
  margin-left: 0.6em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ts-color-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.ts-pricing__note {
  text-align: center;
  max-width: 560px;
  margin: var(--ts-space-md) auto 0;
  color: var(--ts-color-text);
}

.ts-pricing__cta {
  text-align: center;
  margin-top: var(--ts-space-md);
}

/* Mobil: kompakte Tabelle in voller Breite, ohne Seitenscrollen */
@media (max-width: 767px) {
  .ts-pricing__table-wrap {
    max-width: 100%;
    padding: 10px;
  }

  .ts-pricing__table th,
  .ts-pricing__table td {
    padding: 12px 10px;
  }

  .ts-pricing__table thead th {
    font-size: 15px;
  }

  .ts-pricing__table tbody td:first-child,
  .ts-pricing__table tbody th {
    font-size: 16px;
  }

  .ts-pricing__price-col {
    font-size: 18px;
  }

  .ts-pricing__old-col {
    font-size: 14px;
  }

  .ts-pricing__badge {
    display: block;
    margin: 6px 0 0;
    width: fit-content;
    font-size: 12px;
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
   4b. Einblicke – Bild-Collage
   ------------------------------------------------------------------------- */
/* Masonry-Layout: Jedes Bild behält sein natürliches Format (KEIN
   Zuschnitt), die Spalten packen sich selbst harmonisch – funktioniert
   mit gemischten Hoch-, Quer- und Quadratformaten. */
.ts-impressions__grid {
  column-gap: 1.5em;
}

.ts-impressions__grid--2 { columns: 2; }
.ts-impressions__grid--3 { columns: 3; }
.ts-impressions__grid--4 { columns: 4; }

.ts-impressions__grid .ts-impressions__item {
  /* !important: Elementor/WP-Resets nullen figure-Margins */
  margin: 0 0 1.5em !important;
  break-inside: avoid;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--ts-glass-shadow);
  transition: transform var(--ts-transition-slow), box-shadow var(--ts-transition-slow);
}

.ts-impressions__item img {
  width: 100%;
  height: auto; /* natürliche Höhe – Bild immer komplett sichtbar */
  display: block;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .ts-impressions__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--ts-glass-shadow-hover);
  }
  .ts-impressions__item:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 900px) {
  .ts-impressions__grid--3,
  .ts-impressions__grid--4 {
    columns: 2;
  }
}

@media (max-width: 560px) {
  /* Mobil eine Spalte: jedes Foto in voller Breite gut erkennbar */
  .ts-impressions__grid--2,
  .ts-impressions__grid--3,
  .ts-impressions__grid--4 {
    columns: 1;
  }
  .ts-impressions__grid .ts-impressions__item {
    margin-bottom: 1em !important;
  }
}

/* -------------------------------------------------------------------------
   5. Aufgüsse
   ------------------------------------------------------------------------- */
.ts-scents__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3em;
}

@media (max-width: 1024px) {
  .ts-scents__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ts-scents__grid { grid-template-columns: 1fr; }
}

.ts-scent {
  border-radius: var(--ts-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Aufguss-Bilder sind quadratisch (Flasche komplett sichtbar) –
   object-fit: contain beschneidet nie, egal welches Format geliefert wird. */
.ts-scent__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ts-scent__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .ts-scent:hover .ts-scent__media img {
    transform: scale(1.05);
  }
}

.ts-scent__body {
  padding: 1.5em;
  text-align: center;
}

.ts-scent__name {
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 0.3em;
}

.ts-scent__ingredients {
  color: var(--ts-color-accent);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 0.5em;
}

.ts-scent__text {
  margin: 0;
  font-size: 16px;
}

/* -------------------------------------------------------------------------
   6. Kundenbewertungen
   ------------------------------------------------------------------------- */
.ts-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
}

@media (max-width: 1024px) {
  .ts-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ts-testimonials__grid { grid-template-columns: 1fr; }
}

.ts-testimonial {
  border-radius: var(--ts-radius-card);
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ts-testimonial__stars {
  color: #FFC94D;
  font-size: 18px;
  display: flex;
  gap: 3px;
}

.ts-testimonial__text {
  margin: 0;
  font-style: normal;
  flex: 1;
}

/* Einheitliche Kartenhöhe: Text auf 6 Zeilen begrenzt (Klasse setzt
   theme.js – ohne JavaScript bleibt der volle Text sichtbar). */
.ts-testimonial__text.ts-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.ts-testimonial__more {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ts-color-accent);
  font-family: var(--ts-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ts-transition);
}

.ts-testimonial__more:hover,
.ts-testimonial__more:focus-visible {
  color: var(--ts-color-text);
}

.ts-testimonial__footer {
  display: flex;
  flex-direction: column;
}

.ts-testimonial__name {
  font-family: var(--ts-font-heading);
  font-weight: 700;
}

.ts-testimonial__meta {
  font-size: 14px;
  color: var(--ts-color-text-muted);
}

/* -------------------------------------------------------------------------
   7. FAQ (natives <details>-Akkordeon)
   ------------------------------------------------------------------------- */
.ts-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ts-faq__item {
  border-radius: 20px;
}

.ts-faq__item:hover {
  transform: none; /* kein Karten-Lift beim Akkordeon */
}

.ts-faq__question {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.1em 1.4em;
  cursor: pointer;
  list-style: none;
  font-family: var(--ts-font-heading);
  font-size: 19px;
  font-weight: 600;
}

.ts-faq__question::-webkit-details-marker {
  display: none;
}

.ts-faq__chevron {
  flex: 0 0 auto;
  font-size: 20px;
  transition: transform var(--ts-transition);
}

.ts-faq__item[open] .ts-faq__chevron {
  transform: rotate(180deg);
}

.ts-faq__answer {
  position: relative;
  z-index: 1;
  padding: 0 1.4em 1.2em;
}

.ts-faq__answer p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   8. Story (Text + Bild)
   ------------------------------------------------------------------------- */
.ts-story__inner {
  display: flex;
  align-items: center;
  gap: 4em;
}

.ts-story__content {
  flex: 1 1 50%;
}

.ts-story__media {
  flex: 1 1 50%;
  min-height: 469px;
  border-radius: var(--ts-radius-card);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ts-story--reverse .ts-story__inner {
  flex-direction: row-reverse;
}

@media (max-width: 900px) {
  .ts-story__inner,
  .ts-story--reverse .ts-story__inner {
    flex-direction: column;
    gap: 2.5em;
  }
  .ts-story__content {
    text-align: center;
  }
  .ts-story__media {
    width: 100%;
    min-height: 320px;
  }
}

/* -------------------------------------------------------------------------
   9. Buchung
   ------------------------------------------------------------------------- */
/* Buchungssektion darf breiter sein als andere Sektionen –
   das Formular braucht Platz für Kalender + zwei Optionsspalten. */
.ts-booking .ts-section__inner {
  max-width: 1500px;
}

.ts-booking__form {
  border-radius: var(--ts-radius-card);
  padding: clamp(20px, 3vw, 48px);
}

.ts-booking__form:hover {
  transform: none;
}

.ts-booking__form > * {
  position: relative;
  z-index: 1;
}

.ts-booking__editor-placeholder {
  border-radius: var(--ts-radius-card);
  padding: 3em;
  text-align: center;
}