/* ==========================================================================
   Oferta (P2b), wersja „elegancki minimalizm” (SPEC §19):
   lista celów (usługi dietetyczne), usługi bezpłatne, cennik w wierszach na jasnym tle
   (gabinet i poradnia internetowa), ścieżki zamówienia w poradni internetowej.
   Korzysta z tokenów i komponentów main.css; własne klasy mają prefiks svc-.
   Bez ornamentów: bez butelkowej karty, pierścieni, kropkowanych prowadników, rombów i kursywy.
   Ruch: tylko opacity/transform, najechanie wyłącznie pod precyzyjnym wskaźnikiem.
   ========================================================================== */

/* ---------- 1. Wspólne ---------- */
.svc-intro .page-intro__actions { gap: .75rem 1.75rem; }
/* Przyciski w kolumnach łamią się na dwie linie (wąski telefon, tekst 130 %) zamiast wychodzić poza kolumnę. */
.svc-intro .page-intro__actions .btn,
.svc-free .btn, .svc-other .btn, .svc-dish__cta .btn, .svc-fallback .btn {
  max-width: 100%; white-space: normal; text-align: left; padding-block: .4rem;
}
.svc-intro .page-intro__actions .btn__label,
.svc-free .btn__label, .svc-other .btn__label, .svc-dish__cta .btn__label, .svc-fallback .btn__label { min-width: 0; text-wrap: balance; }
.svc-intro-call { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .9375rem; }
.svc-intro-call__tel { font-size: 1.0625rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.svc-section { padding-top: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 639px) {
  .svc-intro--list .page-intro__media { max-width: none; }
  .svc-intro--list .rim--media .rim__core { aspect-ratio: 4 / 3; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .svc-intro--list.page-intro--media .page-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 2rem; }
  .svc-intro--list .page-intro__media { max-width: none; }
}
.svc-intro--pricing .page-intro__media { max-width: none; min-width: 0; }
@media (min-width: 1024px) {
  .svc-intro--pricing.page-intro--media .page-intro__media { max-width: 18.5rem; }
}
.svc-h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);
  line-height: 1.12; letter-spacing: -.01em; color: var(--fg); text-wrap: balance;
}

/* ---------- 2. Lista celów (usługi dietetyczne) ---------- */
.svc-carte { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.svc-course__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2-sub);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin-bottom: 1rem;
}
.svc-goals { list-style: none; border-top: 1px solid var(--line); }
.svc-goal { border-bottom: 1px solid var(--line); }
.svc-goal__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "desc go";
  column-gap: 1.5rem; row-gap: .35rem; align-items: start;
  padding: 1.25rem 0; color: var(--ink); text-decoration: none;
}
.svc-goal__name {
  grid-area: name; font-size: 1.125rem; font-weight: 600; line-height: 1.35; text-wrap: balance;
  transition: color var(--t-fast) var(--ease-out);
}
.svc-goal__desc { grid-area: desc; font-size: .96875rem; line-height: 1.6; color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.svc-goal__go {
  grid-area: go; align-self: center; display: inline-flex; color: var(--muted);
  transition: transform var(--t-ui) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.svc-goal__go .icon { width: 1.125rem; height: 1.125rem; }
.svc-goal__link:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
@media (min-width: 900px) {
  .svc-goal__link {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto; grid-template-areas: "name desc go";
    column-gap: 2.5rem; align-items: baseline; padding: 1.5rem 0;
  }
}

/* ---------- 3. Usługi bezpłatne ---------- */
.svc-free__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 5.5rem); align-items: start; }
.svc-free__grid > *, .svc-other__grid > * { min-width: 0; }
@media (min-width: 1024px) { .svc-free__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.svc-free__title { margin-bottom: 1rem; }
.svc-free__lead { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); margin-bottom: 1.25rem; max-width: 30em; text-wrap: pretty; }
.svc-free__body { font-size: 1rem; }
.svc-free__actions, .svc-other__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
@media (min-width: 1024px) { .svc-free__menu { padding-top: .6rem; } }
.svc-freelist .menu-list__price { font-weight: 500; color: var(--muted); }
.svc-invite { max-width: 46rem; }
.svc-invite__note { margin-top: 1.5rem; font-size: .96875rem; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.svc-freemenu { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.svc-freemenu--first { margin-top: 0; }
.svc-freemenu__title { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

/* Skrót wszystkich celów (na stronie usług bezpłatnych) */
.svc-index__head { display: grid; gap: .85rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.svc-index__lead { font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.svc-index__cols { display: grid; gap: 2.25rem 3rem; }
@media (min-width: 760px) { .svc-index__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-index__group { font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--muted); padding-bottom: .75rem; border-bottom: 1px solid var(--line-strong); }
.svc-index__list { list-style: none; }
.svc-index__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: .65rem 0; border-bottom: 1px solid var(--line);
  font-weight: 500; line-height: 1.4; color: var(--ink); transition: color var(--t-fast) var(--ease-out);
}
.svc-index__icon { width: 1rem; height: 1rem; color: var(--muted); flex: none; transition: transform var(--t-ui) var(--ease-out); }

/* ---------- 4. Cennik: wiersze na jasnym tle ---------- */
.svc-field { padding-block: clamp(1rem, 2vw, 2rem) clamp(4rem, 3rem + 4vw, 7rem); }
/* Komputer: nagłówek cennika po lewej (jak w „Poradni internetowej” niżej), wiersze cen po prawej. */
@media (min-width: 1024px) {
  .svc-card__core { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
  .svc-card__head { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 2rem); }
  .svc-dishes, .svc-card__foot { grid-column: 2; }
}
.svc-card__head { display: grid; gap: .75rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.svc-card__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);
  line-height: 1.12; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.svc-card__sub { max-width: 60ch; font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

.svc-dishes { list-style: none; border-top: 1px solid var(--line-strong); }
.svc-dish:first-child { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.svc-dish { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.svc-dish__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.svc-dish__name { min-width: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.svc-dish__meta { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.svc-dish__price {
  margin-left: auto; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums;
}
.svc-dish__desc { margin-top: .75rem; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* „W cenie”: dwie niezależne listy (rozwinięcie wydłuża tylko swoją kolumnę), wyjaśnienia w natywnym <details>. */
.svc-dish__inc { margin-top: 1.5rem; }
.svc-dish__inc-title { font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--muted); margin-bottom: .35rem; }
.svc-inc { border-bottom: 1px solid var(--line); }
.svc-inc__col { list-style: none; min-width: 0; }
@media (min-width: 760px) {
  .svc-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; align-items: start; border-bottom: 0; }
  .svc-inc__col { border-bottom: 1px solid var(--line); }
}
.svc-inc__item { border-top: 1px solid var(--line); min-width: 0; }
.svc-inc__name { display: block; min-width: 0; font-size: .96875rem; line-height: 1.5; color: var(--ink-2); }
.svc-inc__item > .svc-inc__name { padding: .75rem 0; }
.svc-inc__sum {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; cursor: pointer; list-style: none; border-radius: var(--r-xs);
}
.svc-inc__sum::-webkit-details-marker { display: none; }
.svc-inc__sum::marker { content: ""; }
.svc-inc__plus { flex: none; display: inline-flex; margin-top: .2rem; color: var(--muted); transition: transform var(--t-ui) var(--ease-out), color var(--t-fast) var(--ease-out); }
.svc-inc__plus .icon { width: .875rem; height: .875rem; }
.svc-inc__more[open] .svc-inc__plus { transform: rotate(45deg); }
.svc-inc__detail { padding: 0 2rem .9rem 0; font-size: .9375rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.svc-inc__more[open] .svc-inc__detail { animation: pj-faq-in var(--t-ui) var(--ease-out); }

.svc-dish__cta { margin-top: 1.5rem; }
.svc-dish--compact .svc-dish__price { font-weight: 500; color: var(--muted); }
.svc-dish--compact .svc-dish__desc { margin-top: .5rem; font-size: .96875rem; }
.svc-dish--compact .svc-dish__cta { margin-top: .9rem; }

.svc-card__foot { display: grid; gap: .4rem; margin-top: 1.5rem; }
.svc-card__note { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); max-width: 70ch; text-wrap: pretty; }
.svc-card__address { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.svc-card__address .icon { width: 1rem; height: 1rem; flex: none; }

/* Drugi cennik */
.svc-other__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
@media (min-width: 1024px) { .svc-other__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .svc-other__menu { padding-top: .6rem; } }
.svc-other__lead { margin-top: 1rem; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); max-width: 30em; text-wrap: pretty; }

/* ---------- 5. Poradnia internetowa: ścieżki zamówienia ---------- */
.svc-paths { display: grid; gap: 1.5rem; }
.svc-paths__list { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 640px) { .svc-paths__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.svc-paths__item { display: flex; min-width: 0; }
/* Ścieżki zamówienia to klikalne karty (nie wolne terminy): własna biała karta z hairline, bez strzałki winietki. */
.svc-path.placecard { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-height: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color var(--t-ui) var(--ease-out); }
.svc-path.placecard::after { content: none; }
@media (hover: hover) and (pointer: fine) { .svc-path.placecard:hover { border-color: rgba(39, 70, 41, .45); } }
.svc-path__name.placecard__name { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.svc-path__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .85rem; }
.svc-path__product { font-weight: 500; font-size: .9375rem; color: var(--ink-2); }
.svc-path__price { font-weight: 600; font-size: 1.0625rem; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.svc-path__desc { font-size: .9375rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.svc-path__state { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .75rem; font-size: var(--fs-small); font-weight: 500; color: var(--brand); }
.svc-path__state .icon { width: 1rem; height: 1rem; }
.svc-path.is-selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.svc-paths__note { font-size: .9375rem; line-height: 1.6; color: var(--muted); max-width: 68ch; text-wrap: pretty; }

.svc-order {
  display: grid; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.svc-order:focus { outline: none; }
.svc-order--first { margin-top: 0; padding-top: 0; border-top: 0; }
.svc-order__intro { display: grid; gap: .5rem; }
.svc-order__lead { max-width: 60ch; color: var(--muted); text-wrap: pretty; }
.svc-order__note { max-width: 64ch; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.svc-order__form { margin-top: .75rem; min-width: 0; }
/* Układ formularza P4a w kolumnie jest w assets/css/brief.css. */
.svc-fallback { display: grid; gap: .75rem; }
.svc-fallback__text { max-width: 56ch; color: var(--ink-2); text-wrap: pretty; }
.svc-fallback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .75rem; }
.svc-fallback__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.svc-fallback__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.svc-fallback__link .icon { color: var(--muted); }

/* ---------- 6. Najechanie - wyłącznie precyzyjny wskaźnik ---------- */
@media (hover: hover) and (pointer: fine) {
  .svc-goal__link:hover .svc-goal__name { color: var(--brand); }
  .svc-goal__link:hover .svc-goal__go { color: var(--brand); transform: translateX(3px); }
  .svc-inc__sum:hover .svc-inc__plus { color: var(--ink); }
  .svc-index__link:hover { color: var(--brand); }
  .svc-index__link:hover .svc-index__icon { transform: translateX(3px); }
  .svc-fallback__link:hover { color: var(--brand); text-decoration-color: currentColor; }
}

/* ---------- 7. Druk ---------- */
@media print {
  .svc-field { padding-block: 1rem; }
  .svc-dish__cta, .svc-inc__plus { display: none; }
}