/* ==========================================================================
   HEDONA — „Uz ovo se lepo slaže" (cross-sell na strani proizvoda)
   Ubacuje ga `Hedona_Related` u widget `woocommerce-product-related`.

   Ovaj fajl NE definiše nijednu novu karticu. Kartice su `.hedona-card` iz
   `hedona-layout.css` (ispisuje ih `Hedona_Layout::card()`); ovde je samo
   raspored kolona i omotač trake.

   Boje isključivo kroz `--hd-*` tokene — traka radi u obe teme
   (`:root[data-theme="light|dark"]` iz `hedona-layout.css`).
   Zavisi od: hedona-skin, hedona-layout, hedona-shop, hedona-pdp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Red: tabovi + traka
   Do 1024px sve ostaje u jednoj koloni (isto mesto gde `hedona-shop.css` ruši
   celu stranu proizvoda) — traka je tada pun red između tabova i „Povezanih".
   -------------------------------------------------------------------------- */
.hedona-xrow { display: block; }

/* --------------------------------------------------------------------------
   2. Traka
   -------------------------------------------------------------------------- */
.hedona-xsell {
  /* Pergament, a ne bela: traka mora da se razlikuje od belog panela sa
     tabovima, a kartice unutra ostaju bele (`--hd-card`) i time izlaze napred. */
  background: var(--hd-parch);
  border: 1px solid var(--hd-line);
  border-radius: var(--hd-r-md);
  padding: 18px 18px 20px;
  margin: 0 0 40px;
}

.hedona-xsell__h {
  font-family: var(--hd-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--hd-ink);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.hedona-xsell__sub {
  margin: 4px 0 16px;
  font: 400 13.5px/1.5 var(--hd-sans);
  color: var(--hd-muted);
  max-width: 46ch;
}

/* Zlatna nit ispod naslova — isti potpis kao aktivni tab. */
.hedona-xsell__h::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--hd-gold);
  border-radius: var(--hd-r-pill);
}

.hedona-xsell__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .hedona-xsell__grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Traka koristi istu senku kao ostale površine na sajtu — kartice unutra
   zadržavaju svoj hover iz `hedona-layout.css`, ovde se ništa ne pregazi. */
.hedona-xsell .hedona-card { box-shadow: var(--hd-sh-sm); }

/* --------------------------------------------------------------------------
   3. Desktop: traka je desna kolona pored tabova
   Tu je i bila praznina — beli panel sa tabovima drži tekst u ~68ch levo, a
   desnu polovinu je ostavljao prazan (mereno ~1150px visine na PDP-u).
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .hedona-xrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 24px;
    align-items: start;
    margin: 0 0 40px;
  }

  /* Ista specifičnost kao `.hedona-tabs { margin: 0 0 40px }` iz
     `hedona-shop.css` — pobeđuje redosledom izvora, zato ovaj fajl mora da se
     učitava POSLE `hedona-shop` (zavisnost je upisana u `wp_enqueue_style`). */
  .hedona-xrow > .hedona-tabs { margin: 0; }

  .hedona-xsell {
    position: sticky;
    top: 96px; /* ispod lepljivog headera — isti odmak kao `.hedona-filters` */
    margin: 0;
  }

  /* U uskoj koloni kartica je visoka (slika je 1:1) — tri staju uz tekst,
     četvrta bi trake razvukla ispod panela. Ostaje u markupu za uže ekrane,
     gde je red od četiri. */
  .hedona-xrow .hedona-xsell__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .hedona-xrow .hedona-xsell__grid > .hedona-card:nth-child(n + 4) { display: none; }
}

/* Vrlo široki ekrani: kolona sme malo šire, tekst i dalje ostaje ispod 80ch. */
@media (min-width: 1400px) {
  .hedona-xrow { grid-template-columns: minmax(0, 1fr) 286px; gap: 28px; }
}

/* --------------------------------------------------------------------------
   4. Sitno
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .hedona-xsell { padding: 16px 14px 18px; border-radius: var(--hd-r-md); }
  .hedona-xsell__h { font-size: 18px; }
  .hedona-xsell__sub { margin-bottom: 12px; }
}