/*
 * Melli Pás výhod — sdílený styl (frontend + editor).
 *
 * Tenký bílý pás pod hero: vodorovná řada položek (ikona + text),
 * oddělené tenkými vínovými oddělovači. Plochý design, ostré rohy.
 * Barvy přes CSS tokeny z TASK-002 (žádné hardcoded HEX).
 *
 * Responzivita (mobile-first): na mobilu se položky zalamují do 2 sloupců,
 * na tabletu a výš tvoří jednu vodorovnou řadu.
 */

.melli-benefits {
  /* Krémové pozadí (base-200), ostré rohy, tenký horní/dolní oddělovač. */
  background-color: var(--color-base-200, #f9f8f6);
  border-radius: 0;
  border-top: 1px solid var(--color-base-300, #efede9);
  border-bottom: 1px solid var(--color-base-300, #efede9);
}

.melli-benefits__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 20px 16px;
}

.melli-benefits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}

.melli-benefits__item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Na mobilu 2 sloupce (každá položka ~půlka řádku). */
  flex: 1 1 calc(50% - 24px);
  justify-content: center;
  min-width: 0;
  text-align: center;
}

/*
 * Wrapper ikony — drží barvu (currentColor předáme do inline SVG) a velikost.
 * Tmavá barva dle předlohy melli.sk (benefit ikony jsou tmavé, ne vínové).
 */
.melli-benefits__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-neutral, #333);
}

/*
 * Inline SVG ikona (frontend) i <img> náhled (editor).
 * Pevné width/height z atributů SVG odebíráme v render.php — velikost
 * řídí výhradně CSS, takže ikona je responzivní. Výška ~22px dle předlohy.
 */
.melli-benefits__icon {
  display: block;
  width: auto;
  height: 22px;
}

.melli-benefits__text {
  /* Krátký popis VERZÁLKAMI dle plochého vizuálu předlohy. */
  color: var(--color-neutral, #333);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Tablet a výš: jedna vodorovná řada se svislými oddělovači mezi položkami. */
@media (min-width: 768px) {
  .melli-benefits__inner {
    padding: 24px 24px;
  }

  .melli-benefits__list {
    flex-wrap: nowrap;
    gap: 0;
  }

  .melli-benefits__item {
    flex: 1 1 0;
    padding-inline: 20px;
    position: relative;
  }

  /* Tenký vínový oddělovač mezi položkami (ne před první). */
  .melli-benefits__item + .melli-benefits__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background-color: var(--color-base-300, #efede9);
  }
}

/* Editor: zarovnání náhledu s frontendem (Gutenberg obaluje obsah). */
.editor-styles-wrapper .melli-benefits__text {
  margin: 0;
}