/*
 * Melli Recenze — frontend i editor styly.
 *
 * Sekce „Spokojení zákazníci“: centrovaný nadpis VERZÁLKAMI, carousel recenzí
 * (avatar, jméno, hvězdy, text) a tlačítko „Zobrazit všechny recenze“.
 *
 * Carousel staví na scroll-snap (DaisyUI `carousel`) → funguje i bez JS.
 * Šipky a tečky doplňuje lehký vanilla JS (reviews-carousel.js).
 *
 * Plochý design (ostré rohy), barvy přes DaisyUI/CSS proměnné (tokeny z
 * TASK-002) — žádné hardcoded HEX. Responzivní: desktop 3 karty, tablet 2,
 * mobil 1 (přes scroll-snap, basis se mění breakpointy).
 */

.melli-reviews {
  padding: 4.5rem 1.5rem; /* ~72px vertikálně dle tokenů */
  background-color: var(--color-base-100, #ffffff);
}

.melli-reviews__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Nadpis sekce — centrovaný, VERZÁLKAMI, váha 600, ~32px. */
.melli-reviews__heading {
  margin: 0 0 2.5rem;
  color: var(--color-base-content, #333333);
  font-size: clamp(1.5rem, 3vw, 2rem); /* ~24 → 32px */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* ----- Widget Trustindex (záložní zdroj recenzí) ----- */
.melli-reviews__trustindex {
  margin-bottom: 2rem;
}

/* ----- Carousel: track + navigační šipky ----- */
.melli-reviews__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Track recenzí — vodorovný scroll se snapem (DaisyUI carousel). */
.melli-reviews__track {
  display: flex;
  flex: 1 1 auto;
  gap: 1rem; /* 16px gap (tokeny) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Skryjeme scrollbar (navigace přes šipky/tečky). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.melli-reviews__track::-webkit-scrollbar {
  display: none;
}

/* Slide — na desktopu 3 karty, tablet 2, mobil 1. */
.melli-reviews__slide {
  flex: 0 0 calc((100% - 2rem) / 3);
  scroll-snap-align: start;
}

/* Karta recenze — krémové pozadí, ostré rohy, padding 28–32px. */
.melli-reviews__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.75rem; /* ~28px */
  border-radius: 0; /* ostré rohy (plochý design) */
  background-color: var(--color-base-200, #f9f8f6);
}

/* Hlavička karty — avatar + jméno/hvězdy + zdroj (G). */
.melli-reviews__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.melli-reviews__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 50%; /* avatar zůstává kruh (jediná výjimka z ostrých rohů) */
  background-color: var(--color-primary, #9d0a0f);
}

.melli-reviews__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback avatar — iniciála na vínovém pozadí. */
.melli-reviews__avatar-fallback {
  color: var(--color-base-100, #ffffff);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.melli-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.melli-reviews__name {
  color: var(--color-base-content, #333333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Hvězdy — žluté/zlaté vyplnění, prázdné světle šedé. */
.melli-reviews__stars {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}

.melli-reviews__star {
  color: var(--color-base-300, #efede9);
}

.melli-reviews__star.is-filled {
  color: #f5b50a; /* zlatá pro hvězdy — záměrná výjimka, není v tokenech */
}

/* Zdroj recenze — značka „G“ (Google), dekorativní placeholder. */
.melli-reviews__source {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-base-100, #ffffff);
  color: var(--color-primary, #9d0a0f);
  font-weight: 700;
  font-size: 0.875rem;
}

/* Text recenze — sekundární tón, omezíme na ~4 řádky. */
.melli-reviews__text {
  margin: 0;
  color: var(--color-base-content, #333333);
  opacity: 0.85;
  font-size: 0.9375rem; /* ~15px */
  line-height: 1.6;
}

/* ----- Navigační šipky ----- */
.melli-reviews__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-base-300, #efede9);
  border-radius: 0; /* ostré rohy */
  background-color: var(--color-base-100, #ffffff);
  color: var(--color-base-content, #333333);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.melli-reviews__nav:hover {
  background-color: var(--color-primary, #9d0a0f);
  color: var(--color-base-100, #ffffff);
}

.melli-reviews__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.melli-reviews__nav:disabled:hover {
  background-color: var(--color-base-100, #ffffff);
  color: var(--color-base-content, #333333);
}

/* ----- Tečková paginace ----- */
.melli-reviews__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.melli-reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-base-300, #efede9);
  transition: background-color 0.3s ease;
}

.melli-reviews__dot.is-active {
  background-color: var(--color-primary, #9d0a0f);
}

/* ----- CTA ----- */
.melli-reviews__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.melli-reviews__cta-arrow {
  margin-left: 0.4rem;
}

/* ----- Responzivita ----- */

/* Tablet (≤ 1024px) — 2 karty na řádek. */
@media (max-width: 1024px) {
  .melli-reviews__slide {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

/* Mobil (≤ 767px) — 1 karta na řádek, menší padding sekce. */
@media (max-width: 767px) {
  .melli-reviews {
    padding: 3rem 1.25rem;
  }

  .melli-reviews__slide {
    flex-basis: 100%;
  }

  /* Na mobilu skryjeme boční šipky (ovládá se swipem + tečkami). */
  .melli-reviews__nav {
    display: none;
  }
}