/*
 * Melli Tradice + statistiky — frontend i editor styly.
 *
 * Sekce „30letá tradice výroby nábytku“: centrovaný nadpis VERZÁLKAMI
 * + odstavec, 3 ikonové statistiky (číslo + popis) a 2 velké fotografie.
 *
 * Plochý design (ostré rohy), barvy přes DaisyUI/CSS proměnné (tokeny
 * z TASK-002) — žádné hardcoded HEX. Responzivní: na mobilu se statistiky
 * i fotky skládají pod sebe.
 */

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

.melli-tradition__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Nadpis sekce — centrovaný, VERZÁLKAMI, váha 600, ~32px. */
.melli-tradition__heading {
  margin: 0 0 1rem;
  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;
}

/* Úvodní text — centrovaný kontejner, omezená šířka pro čitelnost. */
.melli-tradition__lead {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

/* Jednotlivé odstavce úvodního textu (může jich být víc). */
.melli-tradition__lead p {
  margin: 0 0 1rem;
  color: var(--color-base-content, #333333);
  opacity: 0.8;
  font-size: 1.0625rem; /* ~17px */
  line-height: 1.6;
}

.melli-tradition__lead p:last-child {
  margin-bottom: 0;
}

/* ----- Statistiky: 3 sloupce ----- */
.melli-tradition__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem; /* ~56px velká mezera mezi bloky */
}

.melli-tradition__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/*
 * Wrapper ikony statistiky — drží vínovou barvu (brand) a předá ji do
 * inline SVG přes currentColor.
 */
.melli-tradition__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--color-primary, #9d0a0f);
}

/*
 * Ikona statistiky — inline SVG (frontend) i <img> náhled (editor).
 * Pevné width/height z atributů SVG odebíráme v render.php; velikost
 * řídí CSS (responzivní). Výška ~28px dle předlohy.
 */
.melli-tradition__icon {
  display: block;
  width: auto;
  height: 28px;
}

/* Velké číslo statistiky. */
.melli-tradition__number {
  color: var(--color-base-content, #333333);
  font-size: clamp(1.75rem, 4vw, 2.5rem); /* ~28 → 40px */
  font-weight: 600;
  line-height: 1.1;
}

/* Popis statistiky — sekundární šedý text. */
.melli-tradition__label {
  margin-top: 0.35rem;
  color: var(--color-base-content, #333333);
  opacity: 0.7;
  font-size: 0.9375rem; /* ~15px */
  line-height: 1.4;
}

/* ----- Fotografie: počet sloupců dle počtu fotek (1–3) ----- */
.melli-tradition__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; /* 16px gap (tokeny) */
}

.melli-tradition__photos--cols-1 {
  grid-template-columns: 1fr;
}

.melli-tradition__photos--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.melli-tradition__photos--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.melli-tradition__photo {
  position: relative;
  overflow: hidden;
  border-radius: 0; /* ostré rohy (plochý design) */
  aspect-ratio: 4 / 3;
  background-color: var(--color-base-300, #efede9);
}

.melli-tradition__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.melli-tradition__photo:hover .melli-tradition__img {
  transform: scale(1.04);
}

/* Pruhovaný placeholder fotky v editoru (bez reálného obrázku). */
.melli-tradition__photo--placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--color-base-300, #efede9),
    var(--color-base-300, #efede9) 10px,
    var(--color-base-200, #f9f8f6) 10px,
    var(--color-base-200, #f9f8f6) 20px
  );
}

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

/* Tablet (≤ 1024px) — statistiky zůstávají 3, fotky 2. */

/* Mobil (≤ 767px) — statistiky a fotky pod sebe. */
@media (max-width: 767px) {
  .melli-tradition {
    padding: 3rem 1.25rem;
  }

  .melli-tradition__stats {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
  }

  .melli-tradition__photos {
    grid-template-columns: 1fr;
  }
}