/* =============================================================================
   POMELO — Diet Hero (widget Elementora)
   Bazuje na systemie "new": kolory/fonty/rozmiary przez zmienne --pom-*
   (ładowane globalnie w Ustawieniach witryny Elementora).
   Tu żyje TYLKO layout + zachowanie komponentu.
   ============================================================================= */

.dh {
  --dh-gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 20px 40px;   /* desktop: odstęp góra/dół (mobile mniejszy niżej) */
  box-sizing: border-box;
  position: relative;          /* kontekst dla badge'a promocyjnego w rogu */
  overflow-x: clip;            /* twarde zabezpieczenie: nic nie rozpycha strony w poziomie */
  font-family: var(--pom-font-body) !important;
  color: var(--pom-text);
}

/* --- Badge promocyjny (obraz) --------------------------------------------
   Desktop: prawy górny róg sekcji. Mobile: nad zdjęciem (patrz @media).
   Zawsze z-index nad zdjęciem i dymkami. */
.dh__promo { position: absolute; z-index: 6; height: auto; width: auto; max-width: none; pointer-events: none; }
/* podniesiona specyficzność (.dh__media img{width:100%} inaczej wygrywa) */
.dh img.dh__promo--corner { top: 20px; right: 20px; width: 200px; display: block; }
.dh__media img.dh__promo--over { display: none; }   /* wariant mobilny — ukryty na desktopie */
.dh, .dh *, .dh *::before, .dh *::after { box-sizing: border-box; }
/* łamanie długich słów, by tekst nie rozpychał */
.dh__title, .dh__desc-text, .dh-macro__desc, .dh__kcal-label, .dh__price { overflow-wrap: break-word; }

/* --- Siatka: desktop = 2 kolumny; obraz spina prawą stronę ---------------- */
.dh__grid {
  display: grid;
  gap: 24px var(--dh-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "check  check"
    "badge  badge"
    "title  title"
    "macros image"
    "kcal   image"
    "price  image"
    "cta    image"
    "desc   image";
  align-items: start;
}
.dh__check  { grid-area: check;  }
.dh__badges { grid-area: badge;  }
.dh__title  { grid-area: title;  }
.dh__macros { grid-area: macros; }
.dh__kcal   { grid-area: kcal;   }
.dh__price  { grid-area: price;  }
.dh__cta    { grid-area: cta;    }
.dh__desc   { grid-area: desc;   }
.dh__media  { grid-area: image;  align-self: start; margin-top: -30px; } /* desktop: zdjęcie bliżej linii makro (mobile nadpisuje niżej) */

/* Wariant BEZ makroskładników — usuwamy wiersz "macros", żeby lewa kolumna
   nie zostawiała pustej dziury (treść podciąga się do góry). */
/* Uwaga: przy ukrytym makro lewa kolumna jest niższa od zdjęcia. Dokładamy na
   dole kolumny ze zdjęciem wiersz-rozpychacz "1fr" (pusta lewa komórka "."),
   który wchłania nadmiar wysokości zdjęcia — dzięki temu wiersze z treścią
   (kcal/cena/CTA/opis) zostają upakowane u góry, a nie równo rozstrzelone. */
.dh__grid--no-macros {
  grid-template-areas:
    "check  check"
    "badge  badge"
    "title  title"
    "kcal   image"
    "price  image"
    "cta    image"
    "desc   image"
    ".      image";
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
}
/* Wariant BEZ plakietek — usuwamy wiersz "badge". */
.dh__grid--no-badges {
  grid-template-areas:
    "check  check"
    "title  title"
    "macros image"
    "kcal   image"
    "price  image"
    "cta    image"
    "desc   image";
}
/* Bez makro I bez plakietek naraz (wyższa specyficzność — wygrywa). */
.dh__grid--no-macros.dh__grid--no-badges {
  grid-template-areas:
    "check  check"
    "title  title"
    "kcal   image"
    "price  image"
    "cta    image"
    "desc   image"
    ".      image";
  grid-template-rows: auto auto auto auto auto auto 1fr;
}

/* --- Lista zalet (ptaszki) ------------------------------------------------- */
.dh__check {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dh__check li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pom-font-heading) !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--pom-text);
}
.dh__check svg { flex: 0 0 auto; width: 20px; height: 20px; }

/* --- Plakietki ------------------------------------------------------------- */
.dh__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-badge {
  display: inline-block;
  font-family: var(--pom-font-heading) !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  padding: 5px 12px;
  border-radius: 20px;
  /* domyślnie: bestseller (różowy) */
  background: var(--pom-accent-200);
  color: var(--pom-accent-800);
}

/* --- Tytuł (2 linie) ------------------------------------------------------- */
.dh__title { margin: 0; }
.dh__title .dh__title-sub {
  display: block;
  font-size: .667em; /* 48 -> 32 desktop, skaluje się z --pom-h1-size */
}

/* --- Makroskładniki -------------------------------------------------------- */
.dh__macros {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 12px 4px;
  border: 1px solid var(--pom-primary-600);
  border-radius: 20px;
  width: max-content;
  max-width: 100%;
}
.dh-macro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* opisy wyrównane w jednej linii */
  gap: 2px;
  padding: 0 10px;
  text-align: center;
}
.dh-macro__top { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; }
/* Wysoka specyficzność + !important, by pobić reguły img/svg motywu/Elementora.
   Ikony wbudowane renderowane są jako inline <svg> (odporne na reguły img{}). */
.dh .dh-macro .dh-macro__icon {
  width: auto !important;
  height: 26px !important;
  max-width: none !important;
  flex: 0 0 auto;
  display: block;
}
.dh-macro__val {
  font-family: var(--pom-font-heading) !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--pom-neutral-800);
}
.dh-macro__desc {
  font-family: var(--pom-font-body) !important;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pom-neutral-800);
}
.dh-macro + .dh-macro { border-left: 1px solid var(--pom-primary-600); }

/* --- Kaloryczność ---------------------------------------------------------- */
.dh__kcal-label {
  font-family: var(--pom-font-body) !important;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pom-text);
  margin: 0 0 8px;
}
.dh__kcal-list { display: flex; flex-wrap: wrap; gap: 5px; }
.dh-kcal {
  font-family: var(--pom-font-body) !important;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pom-text);
  border: 1px solid var(--pom-primary-600);
  border-radius: 20px;
  padding: 4px 12px;
  background: var(--pom-neutral-100);
}

/* --- Cena ------------------------------------------------------------------ */
.dh__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-family: var(--pom-font-body) !important;
  font-size: 16px;
  color: var(--pom-neutral-800);
}
.dh__price-amount {
  font-family: var(--pom-font-heading) !important;
  font-weight: 700;
  font-size: 20px;
  color: var(--pom-text);
}
/* --- Cena promocyjna (regularna + przeliczona) --- */
.dh__price--promo { display: block; }
.dh__price-reg {
  font-family: var(--pom-font-body) !important;
  font-size: 14px;
  color: var(--pom-neutral-700);
  margin: 0 0 2px;
}
.dh__price-promo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-family: var(--pom-font-body) !important;
  font-size: 16px;
  color: var(--pom-neutral-800);
}
.dh__price-amount--promo { color: var(--pom-accent-600); }

/* --- CTA (używa .new-btn z systemu) --------------------------------------- */
.dh__cta { display: flex; }
.dh__cta .new-btn { width: auto; }
/* Reset ewentualnego czerwonego tła na hover dodawanego przez motyw */
.dh__cta .new-btn-primary:hover,
.dh__cta .new-btn-primary:focus {
  background-color: var(--pom-accent-hover) !important;
  color: var(--pom-text-invert) !important;
}

/* --- Opis (zwijany na mobile) --------------------------------------------- */
.dh__desc-text {
  font-family: var(--pom-font-body) !important;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pom-neutral-800);
  margin: 0;
}
.dh__desc-text p { margin: 0; } /* WYSIWYG owija w <p> — zerujemy margines */
.dh__desc-toggle { display: none; } /* widoczny tylko na mobile */

/* --- Zdjęcie + dymki ------------------------------------------------------- */
.dh__media { position: relative; }
.dh__media img {
  display: block;
  width: 100%;
  height: auto;
}
.dh-bubble {
  position: absolute;
  z-index: 2; /* zawsze nad zdjęciem */
  font-family: var(--pom-font-heading) !important;
  font-size: 12px;
  line-height: 1.2;
  padding: 7px 13px;
  border-radius: 116px;
  /* kotwiczony przy krawędzi (4%); rośnie w drugą stronę do 4% z przeciwnej —
     tekst łamie się dopiero, gdy realnie zabraknie miejsca na zdjęciu */
  max-width: 92%;
  width: max-content;      /* krótki tekst = jedna linia, bez przedwczesnego łamania */
  white-space: normal;     /* dopiero po dobiciu do max-width tekst się zawija */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* pozycja */
.dh-bubble--tl { top: calc(11% + 10px);    left: 4%;  }
.dh-bubble--tr { top: calc(11% + 10px);    right: 4%; }
.dh-bubble--bl { bottom: 19%; left: 4%;  }
.dh-bubble--br { bottom: 19%; right: 4%; }
/* kolor */
.dh-bubble--category  { background: var(--pom-badge-category-bg);  color: var(--pom-badge-category-text); }
.dh-bubble--nutrition { background: var(--pom-badge-nutrition-bg); color: var(--pom-neutral-800); }

/* =============================================================================
   MOBILE  (<=767px) — jedna kolumna, przemeblowana kolejność
   check -> badge -> title -> IMAGE -> price -> cta -> macros -> kcal -> desc
   ============================================================================= */
@media (max-width: 767px) {
  /* mały oddech u góry sekcji + ciasny dół (obrazki są gotowe/przycięte,
     więc nie trzeba kadrować ani ujemnych marginesów) */
  .dh { padding: 16px 16px 8px; }
  .dh__grid { gap: 10px; }

  .dh__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "check"
      "badge"
      "title"
      "image"
      "price"
      "cta"
      "macros"
      "kcal"
      "desc";
  }
  .dh__grid--no-macros {
    grid-template-areas:
      "check"
      "badge"
      "title"
      "image"
      "price"
      "cta"
      "kcal"
      "desc";
  }
  .dh__grid--no-badges {
    grid-template-areas:
      "check"
      "title"
      "image"
      "price"
      "cta"
      "macros"
      "kcal"
      "desc";
  }
  .dh__grid--no-macros.dh__grid--no-badges {
    grid-template-areas:
      "check"
      "title"
      "image"
      "price"
      "cta"
      "kcal"
      "desc";
  }
  .dh__check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .dh__cta .new-btn { width: 100%; }
  .dh__cta { margin: 6px 0; }              /* przywrócone niewielkie marginesy góra/dół */
  .dh__price { justify-content: center; }
  .dh__price--promo { text-align: center; }
  .dh__price-promo { justify-content: center; }

  /* Badge promocyjny: nad zdjęciem, tuż pod tytułem, lekko nachodzi na grafikę.
     Kotwiczony do .dh__media → zawsze nad górną krawędzią zdjęcia, z-index nad nim. */
  /* dedykowane miejsce na badge MIĘDZY tytułem a zdjęciem — badge siedzi w tym
     odstępie (nad krawędzią zdjęcia), więc dymek może być pełnej szerokości */
  .dh__media { margin-top: 20px; }
  .dh img.dh__promo--corner { display: none; }
  .dh__media img.dh__promo--over {
    display: block;
    position: absolute;
    top: 0;
    right: 6px;
    width: 130px;
    height: auto;
    z-index: 6;
    transform: translateY(calc(-100% + 10px));   /* nad zdjęciem, opuszczony o 10px */
  }

  /* Dymki bliżej krawędzi góra/dół (żeby nie zasłaniać środka zdjęcia) */
  .dh-bubble--tl, .dh-bubble--tr { top: calc(3% + 20px); }
  .dh-bubble--bl, .dh-bubble--br { bottom: 3%; }

  /* Makro: mieści się na ekranie (równe kolumny, opis się zawija) — nie rozpycha */
  .dh__macros {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    gap: 2px;
    padding: 12px 2px;
  }
  .dh-macro { flex: 1 1 0; min-width: 0; padding: 0 4px; }
  .dh-macro__desc { font-size: 11px; }

  /* opis obcięty + "czytaj dalej" */
  .dh__desc-text {
    display: -webkit-box;
    -webkit-line-clamp: var(--dh-clamp, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dh__desc.is-open .dh__desc-text {
    display: block;
    overflow: visible;
  }
  .dh__desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px auto 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--pom-font-body) !important;
    font-size: 16px;
    color: var(--pom-text);
  }
  .dh__desc { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
  .dh__desc-toggle { align-self: center; } /* opis do lewej, "czytaj dalej" wyśrodkowany */
  .dh__desc-toggle svg { transition: transform .2s ease; }
  .dh__desc.is-open .dh__desc-toggle svg { transform: rotate(180deg); }
}