/* Strane grupa usluga (29.09.2026): terapeutske-masaze, masaze-za-opustanje,
   masaze-lica, anticelulit-masaze. Učitava se SAMO na te 4 strane — style.css i
   ostale strane se ne menjaju. Boje, fontovi i razmaci dolaze iz style.css.
   MOBILE FIRST: foto → naziv + opis → cene → linija, pa sledeća masaža.
   Od 60em jedan red po masaži: foto | naziv + opis | uspravna linija | cene
   (struktura po uzoru na ponudu koju vlasnik voli; stil ostaje Myo). */

/* „Usluge" u meniju ostaje obeleženo i na podstranama (aria-current="true",
   ne "page" — ovo nije sama strana Usluge) */
.nav__links a[aria-current="true"] { color: var(--ink); background-size: 100% 1.5px; }
.nav__sheet > a[aria-current="true"] { color: var(--accent); font-style: italic; }

.nazad { color: inherit; text-decoration: none; }
.nazad:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.meni { max-width: 38rem; margin-inline: auto; }
.stavka { display: grid; row-gap: var(--space-2xs); padding-block: var(--space-l); scroll-margin-top: 5rem; }
.stavka:first-child { padding-top: 0; }
.stavka + .stavka { border-top: 1px solid var(--border); }
/* fotografija: isti zlatni ram kao .split / .side-grid figure */
.stavka figure {
  position: relative; margin: 0 0 var(--space-2xs); aspect-ratio: 3 / 2;
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow);
}
.stavka figure img { width: 100%; height: 100%; object-fit: cover; }
.stavka figure::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--gilt) 35%, transparent);
  border-radius: calc(var(--radius-m) - 6px);
}
.stavka h2 { font-size: clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem); }
.stavka p { color: var(--ink-soft); line-height: 1.6; max-width: 54ch; }
/* cene: postojeći .pricerow iz cenovnika. Naziv je samo trajanje ("40 min"),
   pa tačkasta vodilja staje i na telefonu. Na ≤20em (uzan ekran ili uvećan
   tekst) važi pravilo iz style.css: cena prelazi u red ispod. */
.cene .pricerow { padding-block: 0.7rem; }
.cene .pricerow .name { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.cene .pricerow .amount { font-size: 1.3rem; }
.cene .pricerow:last-child { border-bottom: 0; }
@media (min-width: 20.01em) {
  .cene .pricerow { grid-template-columns: auto minmax(2rem, 1fr) auto; }
  .cene .pricerow::after { display: block; }
  .cene .pricerow .amount { grid-column: 3; }
}

@media (min-width: 60em) {
  .meni { max-width: 68rem; }
  .stavka {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) minmax(0, 18rem);
    grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-l);
  }
  .stavka figure { grid-column: 1; grid-row: 1 / -1; margin: 0; aspect-ratio: 4 / 3; }
  .stavka h2 { grid-column: 2; grid-row: 2; }
  .stavka p { grid-column: 2; grid-row: 3; }
  .cene {
    grid-column: 3; grid-row: 1 / -1; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
    border-left: 1px solid var(--border); padding-left: var(--space-m);
  }
}