/* ------------------------------------------------------------------
   majdan.org.ua/med — пошук безоплатної медичної послуги.

   Успадковує систему майдану з assets/site.css (біле поле, IBM Plex,
   шапка-документ, рейка + колонка, --paper/--ink/--gold, --gut, 1240px).
   Тут — тільки те, чого в документі не було: пошук, картки закладів
   і шар руху. Жанр інший, ґрунт той самий.
   ------------------------------------------------------------------ */

:root {
  /* різні криві за ролями: дисплей, вміст, дрібна механіка */
  --e-display: cubic-bezier(.16, 1, .3, 1);
  --e-body:    cubic-bezier(.25, .46, .45, .94);
  --e-ui:      cubic-bezier(.4, 0, .2, 1);
  --tap: 46px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* рейка: знак нейтральний — /med не четвертий зуб, а сервіс збоку */
.med .rail__mark .prong { background: var(--paper-3); }
.med .rail__block { border-top: 1px solid var(--rule); padding-top: .7rem; }
.med .rail__block p { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.rail__kicker { color: var(--muted); margin-bottom: .35rem; }
@media (min-width: 1000px) { .med .rail { gap: 18px; } }
@media (max-width: 999px) {
  .med .rail { grid-template-columns: 52px 1fr; }
  .med .rail__mark { width: 52px; }
  .med .rail__block { grid-column: 1 / -1; margin-top: .9rem; }
}

/* ---------- перший екран: одне питання ---------- */

.ask { padding-top: clamp(26px, 4vw, 54px); }
.ask__h {
  margin: 0; color: var(--ink); font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: .9; letter-spacing: -.028em;
}
.ask__sub { margin-top: 1rem; color: var(--muted); max-width: 46ch; }

.find {
  margin-top: clamp(20px, 2.6vw, 30px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--ink); background: var(--paper);
}
.find:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.find input {
  font: inherit; font-size: 1.06rem; /* ≥16px: iOS не зумить */
  min-height: var(--tap); padding: .7rem .95rem;
  border: 0; background: transparent; color: var(--ink); appearance: none; border-radius: 0;
}
.find input::placeholder { color: var(--rule-2); }
.find input:focus { outline: 0; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.find__go {
  font: inherit; font-weight: 600; font-size: .95rem;
  min-height: var(--tap); padding: 0 1.15rem; cursor: pointer;
  border: 0; border-left: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: background-color .18s var(--e-ui);
}
.find__go:hover { background: var(--gold); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip {
  font: inherit; font-size: .855rem; cursor: pointer;
  min-height: 38px; padding: .3rem .78rem;
  border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-2);
  transition: color .16s var(--e-ui), border-color .16s var(--e-ui), background-color .16s var(--e-ui);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip i { font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-left: .45em; }
.chip[aria-pressed="true"] i { color: var(--rule-2); }

.geo {
  font: inherit; font-size: .875rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); margin-top: 1rem; padding: 0;
  border: 0; background: none; color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
}
.geo:hover { color: var(--gold); border-bottom-color: var(--gold); }
.geo__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, .55);
}
.geo[data-on] .geo__dot { animation: ping 2.4s var(--e-body) infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* ---------- видача ---------- */

.out { padding-bottom: clamp(30px, 5vw, 70px); }

.res__head {
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: baseline;
  border-top: 1px solid var(--ink); padding-top: .75rem;
  margin-top: clamp(30px, 4vw, 48px); margin-bottom: .3rem;
}
.res__h { margin: 0; font-size: clamp(1.16rem, 1.5vw, 1.42rem); font-weight: 600; color: var(--ink); }
.res__n { color: var(--muted); }

.card {
  border-bottom: 1px solid var(--rule);
  padding: 1.05rem 0 1.15rem;
  display: grid; gap: .5rem;
}
.card__top { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.card__name { font-weight: 600; color: var(--ink); line-height: 1.32; }
.card__km { flex: none; color: var(--muted); white-space: nowrap; }

/* підтвердження — тільки позитивне. Ніяких червоних хрестиків: */
/* виконавець відомий лише у частини направлень, і «немає даних» ≠ «не роблять» */
.card__badge { display: flex; align-items: baseline; gap: .48rem; color: var(--ink-2); font-size: .88rem; }
.card__badge::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-2); transform: translateY(-1px);
}
.card__badge.is-none { color: var(--muted); }
.card__badge.is-none::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }

.addr { display: grid; gap: .3rem; }
.addr__note { color: var(--muted); font-size: .855rem; }
.addr__row { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; }
.addr__pin { color: var(--ink-2); }
.addr__tel { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-decoration: none; }
.addr__tel:hover { color: var(--gold); }
.addr__more {
  font: inherit; font-size: .82rem; cursor: pointer; padding: 0; border: 0; background: none;
  color: var(--muted); border-bottom: 1px dashed var(--rule-2);
  justify-self: start; text-align: left;
}
.addr__more:hover { color: var(--ink); }

.card__act { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .15rem; }
.btn {
  font: inherit; font-size: .875rem; cursor: pointer;
  min-height: 40px; padding: .35rem .85rem;
  border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink);
  transition: border-color .16s var(--e-ui), color .16s var(--e-ui);
}
.btn:hover { border-color: var(--ink); }
.btn--key { border-color: var(--ink); }
.btn--key:hover { color: var(--gold); border-color: var(--gold); }

.empty { padding: 1.4rem 0 0; color: var(--muted); }
.empty b { color: var(--ink); font-weight: 600; }

/* ---------- картка для реєстратури ---------- */

.show { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gut); }
.show[hidden] { display: none; }   /* атрибут hidden програє явному display — повертаємо */
.show::before { content: ""; position: absolute; inset: 0; background: rgba(20, 22, 26, .55); }
.show__sheet {
  position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto;
  background: var(--paper); border-top: 3px solid var(--gold);
  padding: clamp(20px, 3.4vw, 34px);
}
.show__x {
  position: absolute; top: 6px; right: 6px; width: var(--tap); height: var(--tap);
  font: inherit; cursor: pointer; border: 0; background: none; color: var(--muted);
}
.show__x:hover { color: var(--ink); }
.show__kicker { color: var(--muted); }
.show__h { margin: .5rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--ink); font-weight: 600; }
.show__svc { margin-top: .5rem; color: var(--ink-2); }
.show__facts { margin: 1.1rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; }
.show__facts dt { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .2em; }
.show__facts dd { margin: 0; color: var(--ink); }
.show__law { margin-top: 1.2rem; border-left: 3px solid var(--flag); background: var(--paper-2); padding: .85rem 1rem; font-size: .95rem; }
.show__law b { color: var(--ink); }
.show__line { margin-top: 1rem; color: var(--muted); }

/* ---------- шар руху ---------- */

[data-anim] { opacity: 0; transform: translateY(14px); }
.is-ready [data-anim] {
  opacity: 1; transform: none;
  transition: opacity .5s var(--e-display), transform .62s var(--e-display);
}
.is-ready [data-anim="rail"] { transition-delay: .12s; }
.is-ready [data-anim="ask"]  { transition-delay: .04s; }

.chip { opacity: 0; transform: translateY(8px); }
.is-ready .chip {
  opacity: 1; transform: none;
  transition: opacity .34s var(--e-body) calc(.22s + var(--i, 0) * .035s),
              transform .42s var(--e-body) calc(.22s + var(--i, 0) * .035s),
              color .16s var(--e-ui), border-color .16s var(--e-ui), background-color .16s var(--e-ui);
}

/* картки: маска знизу + підйом, каскадом */
.card { clip-path: inset(0 0 0 0); }
.card--in { animation: cardin .5s var(--e-display) both; animation-delay: calc(var(--i, 0) * .045s); }
@keyframes cardin {
  from { opacity: 0; transform: translateY(15px); clip-path: inset(0 0 34% 0); }
  to   { opacity: 1; transform: none;            clip-path: inset(0 0 0 0); }
}

.show { animation: fade .22s var(--e-ui) both; }
.show__sheet { animation: pop .34s var(--e-display) both; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop  { from { opacity: 0; transform: translateY(16px) scale(.985) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  [data-anim], .chip { opacity: 1; transform: none; transition: none; }
  .card--in, .show, .show__sheet { animation: none; }
  .geo[data-on] .geo__dot { animation: none; }
}

/* ---------- вузький екран ---------- */

@media (max-width: 640px) {
  .find { grid-template-columns: 1fr; }
  .find__go { border-left: 0; border-top: 1px solid var(--ink); }
  .card__top { flex-direction: column; gap: .25rem; }
  .card__km { order: -1; font-family: var(--mono); font-size: .78rem; }
  .show { padding: 0; place-items: end stretch; }
  .show__sheet { width: 100%; max-height: 92vh; }
  .show__sheet { animation-name: popup; }
  @keyframes popup { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
}

/* приховані адреси заклада з багатьма підрозділами */
.addr__row.is-hid { display: none; }
.addr__row--in { animation: rowin .34s var(--e-body) both; animation-delay: calc(var(--i,0) * .04s); }
@keyframes rowin { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .addr__row--in { animation: none } }

/* вибір області */
.pick { margin-left: auto; }
.pick__sel {
  font: inherit; font-size: .855rem; cursor: pointer;
  min-height: 38px; padding: .25rem 1.8rem .25rem .7rem;
  border: 1px solid var(--rule-2); border-radius: 0;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23767B83'/%3E%3C/svg%3E") no-repeat right .65rem center;
  color: var(--ink); appearance: none;
  transition: border-color .16s var(--e-ui);
}
.pick__sel:hover, .pick__sel:focus { border-color: var(--ink); }
@media (max-width: 640px) { .pick { margin-left: 0; width: 100%; } .pick__sel { width: 100%; } }

/* ---------- тач-цілі на вузькому екрані ----------
   Свод: ≥44 pt. Видимий розмір не чіпаємо — розширюємо зону дотику,
   як hitSlop у нативних застосунках. */
@media (max-width: 999px) {
  .chip, .pick__sel, .btn { min-height: 44px; }
  .med .masthead__name, .med .masthead__meta a, .med .foot__row a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  .addr__tel, .addr__more { position: relative; }
  .addr__tel::after, .addr__more::after {
    content: ""; position: absolute; inset: -12px -10px;
  }
  /* між рядками адрес — зазор, щоб зони не злипалися */
  .addr__row + .addr__row { margin-top: .55rem; }
  .card { padding-block: 1.15rem 1.25rem; }
}

/* ---------- вузький екран: спочатку пошук ----------
   На телефоні рейка з поясненнями виштовхувала поле пошуку за згин.
   Порядок міняємо: питання і поле — перші, пояснення — під видачею. */
@media (max-width: 999px) {
  .med .sheet { display: grid; grid-template-columns: 1fr; }
  .med .col  { order: 1; }
  .med .rail { order: 2; display: block; padding-block: 4px 0; }
  .med .rail__mark { display: none; }        /* знак уже є в шапці */
  .med .rail__block { border-top: 1px solid var(--rule); margin-top: 1.1rem; }
  .med .rail__note { margin-top: 1.1rem; }

}

/* ---------- сторінка /med/yak — документ про механізм ---------- */

.ask__h--doc { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

/* .clauses у site.css жорстко нумерує «4.x» — тут свої префікси за номером розділу */
.clauses--steps li::before { content: "3." counter(cl); }
.clauses--pay   li::before { content: "6." counter(cl); }
.clauses--do    li::before { content: "7." counter(cl); }
.clauses--src   li::before { content: "8." counter(cl); }
.clauses--src span { line-height: 1.5; }
.clauses--src a { text-decoration-color: var(--rule-2); }

/* врізка без тривоги: те саме, але золотою лінійкою */
.notice--calm { border-left-color: var(--gold-2); }

.med .sect .now__go { margin-top: 1.3rem; }

/* посилання на пояснення механізму */
.rail__link {
  display: inline-block; margin-top: .55rem; font-size: .875rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-2);
}
.rail__link:hover { color: var(--gold); }
.ask__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; }
.ask__how {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: .875rem; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
}
.ask__how:hover { color: var(--ink); border-bottom-color: var(--ink); }