/* ==========================================================================
   imecadine.ge — /praktika (ქალაქი → მარშრუტი), 2026-09-06 მაკეტი

   იტვირთება მხოლოდ ამ გვერდზე (`pageCss: 'praktika'`) — ანუ ბოლოს,
   `motion.css`-ისა და `site.css`-ის შემდეგაც. ტოკენები `shell.css`/`site.css`-ის.

   ⚠️ პრეფიქსი `pk-*` და გარსიც `.pk`. `.pr`/`.pr-*` განზრახ არ გამოიყენება:
      v2.css:618–666 ოცდაორ წესს `.pr .pr-x` სახით წერს (0,2,0) და
      ერთკლასიან ახალ წესებს ფაილის რიგის მიუხედავად ჯობნიდა.
      ის ბლოკი ადგილზე რჩება — `views/practice/locked.ejs` ისევ იყენებს
      (`.pr-lock`, `.pr-plans`, `.pr-plan`).
   ========================================================================== */

.pk {
  --pk-mint:   #EFFAF7;
  --pk-mint-l: #D8EFE9;
  --pk-map:    #F1F6FF;   /* სქემის ჩარჩოს ფონი */
  background: #fff;
  color: var(--sh-ink);
}

.pk-wrap { width: min(var(--sh-wrap), 100% - 2.5rem); margin-inline: auto; }

.pk-sec { padding-block: clamp(28px, 4.2vw, 48px); }
.pk-sec--hero {
  background: var(--st-bg-1); position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(24px, 3.2vw, 44px) clamp(26px, 3.6vw, 46px);
}
/* ── დეკორატიული რუკა: მარჯვნივ, ტექსტის უკან ── */
.pk-hero__bg {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(52%, 620px); pointer-events: none; user-select: none; z-index: 0;
}
.pk-hero__bg picture, .pk-hero__bg img { display: block; width: 100%; height: 100%; }
.pk-hero__bg img {
  object-fit: cover; object-position: right center;
  /* ბრტყელი ფონი (#F1F7FE) და სექციის ფონი (#F5F9FF) ერთმანეთში გადადის;
     mask ოთხივე კიდეს არბილებს, ამიტომ ნაკერი არ ჩანს. */
  -webkit-mask-image: radial-gradient(118% 130% at 88% 50%,
     #000 30%, rgba(0,0,0,.75) 58%, rgba(0,0,0,.3) 78%, transparent 94%);
          mask-image: radial-gradient(118% 130% at 88% 50%,
     #000 30%, rgba(0,0,0,.75) 58%, rgba(0,0,0,.3) 78%, transparent 94%);
}
/* ტექსტი დეკორის ზემოთ და მისგან თავისუფალ 65%-ში */
.pk-hero { position: relative; z-index: 1; }
.pk-hero > * { max-width: min(65%, 640px); }
.pk-sec--cities { background: #fff; }
.pk-sec--res    { background: var(--st-bg-2); }
.pk-sec--help   { background: #fff; }
.pk-sec:focus   { outline: none; }
/* #marshrutebi / #qalaqebi ჰედერის ქვეშ რომ არ ჩავარდეს */
.pk-sec[id] { scroll-margin-top: calc(var(--sh-hd-h) + 12px); }

/* ══════════════════ 1 · ჰერო ══════════════════ */
.pk-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--sh-ink-3); margin-bottom: .8rem;
}
.pk-crumb a { display: inline-flex; align-items: center; min-height: 24px;
              color: var(--sh-ink-3); text-decoration: none; }
.pk-crumb a:hover { color: var(--sh-blue-d); text-decoration: underline; }
.pk-crumb span[aria-current] { color: var(--sh-ink-2); }

.pk .pk-h1 {
  margin: 0; max-width: 20ch;
  font-size: clamp(1.75rem, 3.3vw, 2.35rem); line-height: 1.18; color: var(--sh-ink);
  overflow-wrap: break-word;
}
.pk .pk-lead { margin: .55rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--sh-ink-2); }

.pk-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.pk-pill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px;
  padding: .45rem .9rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--sh-line); box-shadow: var(--st-sh);
  font-size: .88rem; color: var(--sh-ink-2);
}
.pk-pill svg { width: 18px; height: 18px; color: var(--sh-blue-d); flex: none; }

.pk .pk-access {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .5rem .95rem; border-radius: var(--st-r-btn);
  background: var(--sh-tint-2); border: 1px solid #C9E9E5;
  font-size: .92rem; color: var(--sh-ink-2);
}
.pk-access svg { width: 18px; height: 18px; color: var(--sh-teal-d); flex: none; }
.pk-access b { color: var(--sh-ink); }

/* ══════════════════ სექციის თავსართი ══════════════════ */
.pk-stepHd {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.2rem;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.pk-stepHd__t { flex: 1 1 16rem; min-width: 0; }
.pk-step {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sh-blue); color: #fff;
  font-family: var(--imec-display); font-size: 1.05rem; font-weight: 700;
}
/* ⚠️ თეთრი #C9D6EC-ზე 1.47:1 იყო — ღია ფონი მუქი ციფრით (6.1:1) */
.pk-step.is-off { background: var(--sh-line); color: var(--sh-ink-2); }
.pk .pk-h2 { margin: 0; font-size: clamp(1.28rem, 2.3vw, 1.8rem); line-height: 1.22; color: var(--sh-ink); }
.pk .pk-stepHd__d { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--sh-ink-3); }
.pk .pk-stepHd__d b { color: var(--sh-ink); font-weight: 700; }

/* ══════════════════ ხელსაწყოები (ძებნა/ამრჩევები) ══════════════════ */
.pk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.pk-tools--city { margin-inline-start: auto; }
.pk-tools--res  { margin-bottom: clamp(14px, 1.8vw, 20px); }
/* ძებნა JS-ს საჭიროებს — უსარგებლო ველს JS-ის გარეშე არ ვაჩენთ */
/* JS-ის გარეშე: ძებნა/დალაგება/ხედი უსარგებლოა და იმალება, სამაგიეროდ
   **ყველა** მარშრუტი ჩანს — თორემ 60-დან 54 მიუწვდომელი რჩებოდა.
   `.no-js`-ს `head.ejs`-ის ინლაინ სკრიპტი მაშინვე აშორებს, ამიტომ
   JS-იან ბრაუზერში ეს წესები არასდროს ირთვება (ციმციმი არაა). */
.no-js .pk-tools--city, .no-js .pk-tools--res, .no-js .pk-more { display: none; }
.no-js .pk-card[hidden] { display: flex !important; }

.pk-search {
  display: flex; align-items: center; gap: .5rem;
  min-width: min(250px, 60vw); min-height: 44px; padding: .5rem .85rem;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r-btn);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.pk-search:focus-within { border-color: var(--sh-blue); box-shadow: 0 0 0 3px rgba(20,96,255,.16); }
.pk-search__i { display: grid; place-items: center; color: var(--sh-ink-3); flex: none; }
.pk-search__i svg { width: 17px; height: 17px; }
.pk-search input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; outline: none;
  font: inherit; font-size: .92rem; color: var(--sh-ink);
}
.pk-search input::placeholder { color: var(--sh-ink-3); }
.pk-search input::-webkit-search-cancel-button { display: none; }

.pk-selWrap { display: inline-flex; }
.pk-select {
  min-height: 44px; padding: .5rem 2rem .5rem .9rem;
  border: 1px solid var(--sh-line); border-radius: var(--st-r-btn); background: #fff;
  font: inherit; font-size: .9rem; color: var(--sh-ink); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6E96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.pk-clear {
  min-height: 44px; padding: .5rem .9rem; border-radius: var(--st-r-btn);
  background: #fff; border: 1px solid var(--sh-line); color: var(--sh-ink-2);
  font: inherit; font-family: var(--imec-display); font-size: .85rem; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.pk-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r-btn);
}
.pk-seg button {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 42px; padding: .35rem .8rem; border: 0; border-radius: 9px;
  background: none; color: var(--sh-ink-3); cursor: pointer;
  font: inherit; font-family: var(--imec-display); font-size: .85rem;
  transition: background-color 200ms ease, color 200ms ease;
}
.pk-seg button svg { width: 16px; height: 16px; }
.pk-seg button.is-on { background: var(--sh-tint); color: var(--sh-blue-d); }

/* ══════════════════ 2 · ქალაქები ══════════════════ */
.pk-cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
/* ⚠️ ავტორის `display:grid/flex` UA-ს `[hidden]{display:none}`-ს ჯობნის —
   ყველა ელემენტს, რომელსაც სკრიპტი მალავს, ცალკე წესი სჭირდება. */
.pk-city[hidden], .pk-card[hidden], .pk-grid[hidden],
.pk-more[hidden], .pk-pick[hidden] { display: none !important; }

.pk-city {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r);
  text-decoration: none; color: var(--sh-ink); box-shadow: var(--st-sh);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.pk-city__ph { position: relative; display: block; background: var(--st-bg-2); }
.pk-city__ph picture { display: block; }
/* ⚠️ `height: auto` სავალდებულოა: `<img height="360">` პრეზენტაციული
   მინიშნებაა და `aspect-ratio`-ს ჭეხავს — ბარათი 360px სიმაღლის ხდებოდა. */
.pk-city__ph img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pk-city__ok {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sh-blue); color: #fff; box-shadow: 0 2px 6px rgba(11,30,72,.28);
}
.pk-city__ok svg { width: 15px; height: 15px; }
/* ტექსტი ფოტოზე არასდროს — სახელი და რაოდენობა თეთრ ზოლშია */
.pk-city__txt {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .65rem .8rem; min-width: 0;
}
.pk-city__name { font-family: var(--imec-display); font-size: .95rem; font-weight: 700;
                 line-height: 1.25; color: var(--sh-ink); overflow-wrap: break-word; min-width: 0; }
.pk-city__n { font-size: .78rem; color: var(--sh-ink-3); white-space: nowrap; text-align: end; }
.pk-city__n b { display: block; font-size: .95rem; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.pk-city__sel {
  padding: 0 .8rem .6rem; font-size: .78rem; font-weight: 600; color: var(--sh-blue-d);
}
.pk-city.is-on { border-color: var(--sh-blue); background: #F4F8FF; box-shadow: inset 0 0 0 1px var(--sh-blue); }

/* ══════════════════ 3 · მარშრუტები ══════════════════ */
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }

.pk-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r);
  box-shadow: var(--st-sh);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.pk-card__map { position: relative; background: var(--pk-map); }
.pk-card__map img {
  /* სქემა არ იჭრება: დასაწყისი და დასასრული ყოველთვის ჩანს */
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; display: block;
}
.pk-card__acc {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 1px solid var(--sh-line);
  font-size: .74rem; color: var(--sh-ink-2); backdrop-filter: blur(2px);
}
.pk-card__acc svg { width: 13px; height: 13px; color: var(--sh-ink-3); }
.pk-card__acc.is-open { background: #E7F6F3; border-color: #C9E9E5; color: #05504D; }
.pk-card__acc.is-open svg { color: var(--sh-teal-d); }

.pk-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .95rem 1rem; min-width: 0; }
.pk .pk-card__t { margin: 0; font-size: 1.02rem; line-height: 1.25; color: var(--sh-ink); overflow-wrap: break-word; }
.pk .pk-card__city { margin: 0; font-size: .85rem; color: var(--sh-ink-3); }
.pk .pk-card__cats { margin: .1rem 0 0; font-size: .78rem; color: var(--sh-ink-3); }

/* ქვედა რიგი: მაჩვენებლები მარცხნივ, ღილაკი მარჯვნივ (ვიწროზე ერთმანეთქვეშ) */
.pk-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .55rem .9rem; margin-top: auto; padding-top: .55rem;
}
.pk-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; }
.pk-meta li { display: inline-flex; align-items: center; gap: .38rem; font-size: .82rem; color: var(--sh-ink-3); }
.pk-meta svg { width: 15px; height: 15px; color: var(--sh-ink-3); flex: none; }
/* ⚠️ `app.css`-ს `b, strong { font-weight: 400 }` უწერია — თამამი
   რიცხვები ყველგან ცალკე უნდა გამოცხადდეს. */
.pk .pk-meta b, .pk .pk-city__n b, .pk .pk-acc__t b, .pk .pk-stepHd__d b { font-weight: 700; }
.pk-meta b { color: var(--sh-ink); font-variant-numeric: tabular-nums; }

/* ღილაკი ივსებს დარჩენილ ადგილს: განიერ ბარათზე მაჩვენებლების გვერდით
   ჯდება, ვიწროზე კი ცალკე რიგში მთელ სიგანეზე. */
.pk-card .pk-go { flex: 1 1 auto; min-width: 10.5rem; }

.pk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin-top: clamp(16px, 2vw, 24px); }
.pk-more__btn[hidden] { display: none !important; }
.pk-more small { font-size: .82rem; color: var(--sh-ink-3); font-variant-numeric: tabular-nums; }

/* ცარიელი / „ჯერ აირჩიე ქალაქი" მდგომარეობა */
.pk-pick {
  display: grid; justify-items: center; gap: .7rem; text-align: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) 1.2rem;
  background: #fff; border: 1px dashed #CBDCF6; border-radius: var(--st-r);
}
.pk .pk-pick p { margin: 0; font-size: .95rem; color: var(--sh-ink-2); }
.pk-pick__i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
              background: var(--sh-tint); color: var(--sh-blue-d); }
.pk-pick__i svg { width: 24px; height: 24px; }
.pk .pk-empty { margin: 1rem 0 0; font-size: .95rem; color: var(--sh-ink-3); }

/* ── სიის ხედი ── */
.pk-grid.is-list { grid-template-columns: 1fr; gap: 10px; }
.pk-grid.is-list .pk-card { flex-direction: row; align-items: stretch; }
.pk-grid.is-list .pk-card__map { flex: 0 0 clamp(140px, 22%, 230px); }
.pk-grid.is-list .pk-card__map img { height: 100%; aspect-ratio: auto; }
.pk-grid.is-list .pk-card__body { flex: 1; padding: .8rem 1rem; }
.pk-grid.is-list .pk-card__foot { margin-top: .6rem; }

/* ══════════════════ გაგრძელება: დანარჩენი ქალაქები ══════════════════ */
.pk-rest { display: grid; gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(22px, 3vw, 36px); }
.pk-restCity[hidden] { display: none !important; }
.pk-restCity { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.pk-restHd {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .8rem; background: #fff;
  border: 1px solid var(--sh-line); border-radius: var(--st-r); box-shadow: var(--st-sh);
}
.pk-restHd__ph { flex: none; width: 76px; border-radius: 12px; overflow: hidden; background: var(--st-bg-2); }
.pk-restHd__ph picture { display: block; }
.pk-restHd__ph img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pk-restHd__t { flex: 1 1 auto; min-width: 0; }
.pk .pk-restHd__t h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; color: var(--sh-ink); }
.pk .pk-restHd__t p  { margin: .1rem 0 0; font-size: .82rem; color: var(--sh-ink-3); }
.pk .pk-restHd__t b  { color: var(--sh-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-restHd .pk-link { flex: none; }

/* ══════════════════ 4 · წვდომის ბლოკი ══════════════════ */
.pk-acc {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem;
  margin-top: clamp(20px, 2.6vw, 32px);
  padding: clamp(1rem, 2.2vw, 1.6rem);
  background: var(--pk-mint); border: 1px solid var(--pk-mint-l); border-radius: var(--st-r);
}
.pk-acc__i { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center;
             background: #fff; color: var(--sh-teal-d); border: 1px solid var(--pk-mint-l); }
.pk-acc__i svg { width: 24px; height: 24px; }
.pk-acc__t { flex: 1 1 18rem; min-width: 0; }
.pk .pk-acc__t h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; color: var(--sh-ink); }
.pk .pk-acc__t p  { margin: .3rem 0 0; font-size: .92rem; color: var(--sh-ink-2); }
.pk .pk-acc__t p.pk-acc__note { margin-top: .25rem; font-size: .8rem; color: var(--sh-ink-3); }
.pk .pk-acc__t b  { color: var(--sh-ink); font-variant-numeric: tabular-nums; }

/* ══════════════════ 5 · დახმარება ══════════════════ */
.pk-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.pk-help__i {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.05rem; background: #fff;
  border: 1px solid var(--sh-line); border-radius: var(--st-r); box-shadow: var(--st-sh);
}
.pk-help__ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
                background: var(--sh-tint); color: var(--sh-blue-d); }
.pk-help__ico svg { width: 21px; height: 21px; }
.pk .pk-help__i h3 { margin: 0; font-size: .98rem; line-height: 1.3; color: var(--sh-ink); }
.pk .pk-help__i p  { margin: .25rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--sh-ink-3); }

/* ══════════════════ ღილაკები ══════════════════ */
/* ⚠️ `font: inherit` შორთჰენდი `font-family`-ს შლის — მის შემდეგ დგას. */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .65rem 1.2rem; border: 1px solid transparent;
  border-radius: var(--st-r-btn); text-decoration: none; cursor: pointer;
  font: inherit; font-family: var(--imec-display); font-size: .92rem; font-weight: 600;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease,
              box-shadow 200ms ease, transform 200ms ease;
}
.pk-btn--pri   { background: var(--sh-blue);   color: #fff; }
.pk-btn--teal  { background: var(--sh-teal-d); color: #fff; }
.pk-btn--ghost { background: #fff; color: var(--sh-blue-d); border-color: #C7DAFF; }
.pk-btn__go { display: grid; place-items: center; transition: transform 200ms ease; }
.pk-btn__go svg { width: 16px; height: 16px; }

.pk-link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  font-family: var(--imec-display); font-size: .9rem; font-weight: 600;
  color: var(--sh-blue-d); text-decoration: none;
}
.pk-link .pk-btn__go svg { width: 15px; height: 15px; }

@media (hover: hover) and (pointer: fine) {
  /* ⚠️ `color` ცალსახად: `app.css:81`-ის `a:hover` თეთრ წარწერას ღილაკიდან აქრობდა */
  .pk-btn--pri:hover   { background: var(--sh-blue-d); color: #fff; transform: translateY(-2px);
                         box-shadow: 0 6px 16px rgba(20,96,255,.28); }
  .pk-btn--teal:hover  { background: #055B58; color: #fff; transform: translateY(-2px);
                         box-shadow: 0 6px 16px rgba(6,115,111,.26); }
  .pk-btn--ghost:hover { background: #F5F9FF; color: var(--sh-blue-d); border-color: #A9C6FF; transform: translateY(-2px); }
  .pk-btn:hover .pk-btn__go { transform: translateX(3px); }
  .pk-link:hover { color: var(--sh-blue-d); text-decoration: underline; }
  .pk-link:hover .pk-btn__go { transform: translateX(3px); }

  .pk-city:hover { border-color: #BFD5FF; box-shadow: var(--st-sh-h); transform: translateY(-2px); color: var(--sh-ink); }
  .pk-city.is-on:hover { border-color: var(--sh-blue); }
  .pk-card:hover { border-color: #BFD5FF; box-shadow: var(--st-sh-h); transform: translateY(-2px); }
  .pk-clear:hover, .pk-select:hover { border-color: #BFD5FF; }
  .pk-seg button:hover { color: var(--sh-ink); }
}

.pk-btn:active, .pk-city:active, .pk-card:active { transform: none; }
.pk-btn[disabled] { transform: none; opacity: .55; cursor: default; }

/* ⚠️ `.pk` პრეფიქსით: `motion.css`-ის `.v2 a:focus-visible` (0,2,1) ერთკლასიან
   წესს ჯობნიდა და გვერდზე ორი სხვადასხვა ფოკუსის რგოლი ჩნდებოდა. */
.pk .pk-btn:focus-visible, .pk .pk-link:focus-visible, .pk .pk-city:focus-visible,
.pk .pk-clear:focus-visible, .pk .pk-select:focus-visible, .pk .pk-seg button:focus-visible,
.pk .pk-crumb a:focus-visible, .pk .pk-more button:focus-visible,
.pk .pk-card a:focus-visible {
  outline: 3px solid #7FA8FF; outline-offset: 3px; border-radius: var(--st-r-btn);
}
/* ველს საკუთარი რგოლი აქვს (ყუთი ინათებს) — ორმაგს ვთიშავთ */
.pk .pk-search input:focus-visible { outline: none; }

/* ── reveal: ≤8px, 300ms (motion.js ამატებს კლასს) ──
   ⚠️ ორი ხაფანგი ერთად:
   1) `.reveal.is-in { transform:none }` (motion.css) იმავე წონისაა (0,2,0),
      ჩვენი ფაილი კი გვიან იტვირთება — ამიტომ ოფსეტს **მხოლოდ**
      `:not(.is-in)`-ზე ვდებთ, თორემ ბლოკი სამუდამოდ 8px-ით დაბლა რჩება
      და hover-ის აწევაც კვდება.
   2) `.pk-card`/`.pk-city`-ს `transition` შორთჰენდი `.reveal`-ისას შლის
      (opacity და `transition-delay` იკარგება) — აქ (0,2,0) წონით ვაბრუნებთ. */
.pk .reveal {
  transition-property: opacity, transform;
  transition-duration: .3s;
  transition-timing-function: var(--ease-out, cubic-bezier(.16,1,.3,1));
  transition-delay: var(--reveal-delay, 0ms);
}
.pk .reveal:not(.is-in) { transform: translate3d(0, 8px, 0); }

/* ══════════════════ ადაპტაცია ══════════════════ */
@media (max-width: 1100px) {
  .pk-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pk-help { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pk-tools--city { margin-inline-start: 0; width: 100%; }
  .pk-tools--res  { gap: .5rem; }
  .pk-search { min-width: 0; flex: 1 1 100%; }
  .pk-stepHd { gap: .6rem .9rem; }
}
@media (max-width: 640px) {
  .pk-wrap   { width: min(var(--sh-wrap), 100% - 2rem); }
  .pk-restHd { flex-wrap: wrap; }
  .pk-restHd__ph { width: 58px; }
  .pk-restHd .pk-link { flex: 1 1 100%; }
  /* ტექსტი 100% სიგანეზე; დეკორი რჩება, მაგრამ იმდენად მკრთალი, რომ
     სათაურის კონტრასტს ვერ შეეხოს. */
  .pk-hero > * { max-width: none; }
  .pk-hero__bg { width: 78%; opacity: .15; }
  .pk-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-grid   { grid-template-columns: 1fr; }
  .pk-city__txt { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .pk-city__n { text-align: start; }
  .pk-city__n b { display: inline; }
  .pk-card__foot .pk-go { flex: 1 1 100%; }
  .pk-seg { width: 100%; }
  .pk-seg button { flex: 1; justify-content: center; }
  /* სიის ხედი ვიწრო ეკრანზე ისევ ვერტიკალურია */
  .pk-grid.is-list .pk-card { flex-direction: column; }
  .pk-grid.is-list .pk-card__map { flex: none; }
  .pk-grid.is-list .pk-card__map img { height: auto; aspect-ratio: 16 / 10; }
  .pk-grid.is-list .pk-card__foot { justify-content: space-between; }
}
@media (max-width: 340px) {
  .pk-cities { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pk .reveal { opacity: 1; transform: none; transition: none; }
  .pk-btn, .pk-city, .pk-card, .pk-btn__go, .pk-seg button { transition: none; }
}