/* Shared components for the online services (konsultacje online, e-wizyta,
   e-recepta, e-zwolnienie).

   Design system contract — zp-theme owns typography and controls:
     headings   .title-2 (48/700 + italic <i> eyebrow), .title-3 (24/700),
                .title-6 (22/400, pair with .font--semi-bold)
     body       .text (22→18→16 /160%), .text-3 (16/160%), .text-8 (14/22)
     buttons    .btn, .btn-small, .btn-border
     inputs     .input-text
     spacing    .pt-* / .pb-* / .mt-* / .mb-* utilities
   Cards repeat the clinic's existing card language (.product and .faq-item):
   2px solid #53C063, 8px radius, translucent white or #E3F2E9 fill.

   Nothing here may restate a font size, weight or line height that a theme
   class already owns — that is what made these pages drift out of the system. */

.zp-care {
  --zp-primary: #085440;
  --zp-secondary: #53C063;
  --zp-third: #E3F2E9;
  --zp-mint: #AAF2B0;
  --zp-radius: 8px;
  /* The booking card borrows a softer scale than the page cards: 12px on the
     controls, 16px on the full-width action, its trust strip and the mark tile. */
  --zp-radius-control: 12px;
  --zp-radius-soft: 16px;
  color: var(--zp-primary);
}
.zp-care *, .zp-care *::before, .zp-care *::after { box-sizing: border-box; }
.zp-care [hidden] { display: none !important; }
/* Vertical rhythm only. Never set margin-top (or the `margin` shorthand) here:
   `.zp-care p` and `.mt-40` have equal specificity, and this file loads after the
   theme, so a shorthand silently wins and kills every mt- and pt- utility on
   these pages. The theme already resets h1–h6/p margins to 0, so bottom-only is
   all that is needed. */
.zp-care :where(p, h1, h2, h3) { margin-bottom: 24px; }
.zp-care > .container > :last-child { margin-bottom: 0; }
.zp-care :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--zp-primary);
  outline-offset: 4px;
}
.zp-care a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.zp-care a:not(.btn):hover { color: var(--zp-secondary); }
/* The theme's .btn has no disabled state of its own. */
.zp-care .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Intro block. One heading and one short paragraph — see the copy budgets in
   OnlineContent.php before adding anything else here. */
.zp-care__header { margin-bottom: 64px; }
.zp-care__header--narrow { max-width: 760px; }
.zp-care__header > :last-child { margin-bottom: 0; }

/* Card — the .product card from the price list, without the price column. */
.zp-care__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 36px 34px 42px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: rgba(255, 255, 255, .6);
}

/* Filled surface — the .faq-item treatment, used for the intake form panel. */
.zp-care__panel {
  padding: 40px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third);
}
.zp-care__panel > :last-child { margin-bottom: 0; }

/* Section heading further down a page (shared: overview and intake pages). */
.zp-care__section { max-width: 760px; margin: 100px 0 48px; }
/* The clinic's mark above every section heading — a repeating brand beat across
   both page types. Taken straight from logo.svg (cross plus leaf), so it is the
   identity's own shape rather than a generic plus. */
.zp-care__section h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  background: url("zp-mark.svg") center / contain no-repeat;
}
/* Inside the form panel the heading introduces the panel, not a page section. */
.zp-care__section--panel { max-width: none; margin: 0 0 20px; }

.zp-care__band { margin: 100px 0; }

/* Fine print that follows a full-width row. */
.zp-care__fineprint { max-width: 900px; }

/* Figure with the clinic's dot motif — the same grid of green dots baked into
   the `doctors` artwork, rebuilt in CSS so photographs can carry it too. */
.zp-care__figure { position: relative; }
.zp-care__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--zp-radius);
}
/* A band of dots below the picture's left edge. It deliberately stays inside
   the figure's own width: reaching into the text column collides with the lead,
   and reaching past the container edge costs a horizontal scrollbar. */
.zp-care__figure--dots::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: -44px;
  width: 184px;
  height: 92px;
  color: var(--zp-secondary);
  background-image: radial-gradient(currentColor 3px, transparent 3px);
  background-size: 20px 20px;
  opacity: .55;
}

/* Breadcrumbs. Type carries the pale green on its own — no chip behind it.
   Contrast against white is low by design; `--zp-breadcrumb-ink` is the single
   dial if it ever needs to go darker. */
.zp-care__breadcrumb {
  --zp-breadcrumb-ink: var(--zp-secondary);
  display: block;
  margin-bottom: 40px;
}
/* Scoped through .zp-care so it outranks `.zp-care a:not(.btn)` (0,2,0), which
   otherwise holds the links at the inherited dark green. */
.zp-care .zp-care__breadcrumb :is(a, span, svg) { color: var(--zp-breadcrumb-ink); }
.zp-care .zp-care__breadcrumb a:not(.btn):hover { color: var(--zp-mint); }

/* At-a-glance fact strip under the heading — one panel split into cells, after
   the reference page. Values must be verifiable: no invented durations. */
.zp-care__facts--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}
.zp-care__facts--row li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px;
  border-left: 2px solid var(--zp-third);
}
.zp-care__facts--row li:first-child { border-left: 0; }
.zp-care__fact-icon { display: block; color: var(--zp-secondary); }

/* Stacked variant — separate cards down a column, for the intake hero. */
.zp-care__facts--stack {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.zp-care__facts--stack li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 16px;
  padding: 16px 22px;
  border-radius: var(--zp-radius-soft);
  background: #fff;
  box-shadow: 0 4px 14px rgba(8, 84, 64, .07);
}
.zp-care__facts--stack li { position: relative; }
/* Progress marker: hidden until its step is answered, then a small double ring
   at the right end of the card. No digit — the card's own label says which
   step it is. */
.zp-care__fact-dot {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 100px;
  background: var(--zp-secondary);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease, box-shadow .5s ease;
}
.zp-care__facts--stack li.is-filled .zp-care__fact-dot {
  opacity: 1;
  visibility: visible;
  box-shadow: 0 0 0 3px var(--zp-third), 0 0 0 5px var(--zp-secondary);
}
.zp-care__facts--stack .zp-care__fact-icon { grid-row: 1 / 3; }
.zp-care__facts--stack .zp-care__fact-label { opacity: .65; }

/* Closing call-to-action band. Full bleed, in the darkest brand green, with the
   mark's cross as a watermark — masked, so it takes the band's own white. */
.zp-care__cta::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -70px;
  width: 320px;
  height: 320px;
  transform: translateY(-50%) rotate(12deg);
  background-color: #fff;
  -webkit-mask: url("zp-cross.svg") center / contain no-repeat;
  mask: url("zp-cross.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}
.zp-care__cta > .container { position: relative; z-index: 1; }
.zp-care__cta { position: relative; overflow: hidden; margin: 100px 0; color: #fff; }
/* The tinted step band flows straight into the call to action — a strip of white
   between two full-bleed bands reads as a gap, not as breathing room. Both sides
   must be zeroed: adjacent margins collapse to the larger of the two, so killing
   only the band's bottom or only the CTA's top leaves the gap intact. */
.zp-care__band:has(+ .zp-care__cta) { margin-bottom: 0; }
.zp-care__band + .zp-care__cta { margin-top: 0; }
.zp-care__cta :where(h2, p) { color: #fff; }
.zp-care__cta a:not(.btn) { color: #fff; }
.zp-care__cta a:not(.btn):hover { color: var(--zp-mint); }
.zp-care__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* Photograph heading a service card. The ratio lives on the wrapper and the
   image fills it absolutely, so all three cards crop identically no matter what
   the source proportions are or how `height: auto` resolves on the <img>. */
.zp-care__card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
  border-radius: var(--zp-radius);
  overflow: hidden;
  background: var(--zp-third);
}
.zp-care__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* FAQ — the theme's .faq-item card, with its chevron and rotation. */
/* The section's own pb-80 closes the page; a bottom margin here doubles it. */
.zp-care__faq { margin: 0; }
.zp-care__faq details {
  cursor: pointer;
  padding: 26px;
  margin-bottom: 20px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third);
}
.zp-care__faq details:last-child { margin-bottom: 0; }
.zp-care__faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
}
.zp-care__faq summary::-webkit-details-marker { display: none; }
.zp-care__faq summary > span { flex: 0 1 auto; }
.zp-care__chevron { flex: 0 0 16px; margin-top: 8px; transition: transform .3s ease; }
.zp-care__faq details[open] .zp-care__chevron { transform: rotate(180deg); }
.zp-care__faq details p { margin: 20px 0 0; opacity: .9; }

/* Closing contact panel, shared by the overview and the intake pages. */
.zp-care__contact {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding: 40px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third);
}
.zp-care__contact > div > :last-child { margin-bottom: 0; }
.zp-care__contact::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  color: var(--zp-secondary);
  background-image: radial-gradient(currentColor 2.5px, transparent 2.5px);
  background-size: 18px 18px;
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 1199px) {
  .zp-care__card { padding: 32px 28px 36px; }
}
@media (max-width: 991px) {
  .zp-care__header { margin-bottom: 40px; }
  .zp-care__section { margin: 64px 0 36px; }
  .zp-care__band, .zp-care__cta { margin: 64px 0; }
  .zp-care__figure--dots::before { display: none; }
  .zp-care__facts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-care__facts--row li:nth-child(odd) { border-left: 0; }
  .zp-care__facts--row li:nth-child(n+3) { border-top: 2px solid var(--zp-third); }
  .zp-care__cta-actions { justify-content: flex-start; }
  .zp-care__faq { margin: 0; }
  .zp-care__contact { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 575px) {
  .zp-care__card { padding: 28px 22px 32px; }
  .zp-care__facts--row { grid-template-columns: minmax(0, 1fr); }
  .zp-care__facts--row li { border-left: 0; }
  .zp-care__facts--row li + li { border-top: 2px solid var(--zp-third); }
  .zp-care__panel { padding: 28px 22px; }
  .zp-care__faq details { padding: 20px; }
  .zp-care .title-2, .zp-care .title-3 { overflow-wrap: anywhere; }
}

/* Wizyty on-line: the three cases and the "outside the cannabis therapy" notice (2026-10-14). */
.zp-online__cases { margin: 8px 0 16px; padding-left: 1.2em; }
.zp-online__cases li + li { margin-top: 6px; }
.zp-online__notice { padding: 12px 16px; border-left: 4px solid #085440; background: #E3F2E9; border-radius: var(--zp-radius-soft); }