/* ==========================================================================
   imecadine.ge — /teoria (თეორიის ჰაბი), 2026-09-06 მაკეტი

   იტვირთება მხოლოდ ამ გვერდზე (`pageCss: 'theory-hub'`), ანუ
   `shell.css`-ისა და `site.css`-ის შემდეგ. ტოკენები იქიდან მოდის —
   მეორე ლურჯს/navy-ს არ ვქმნით, თორემ საიტზე ორი ბრენდის ფერი გაჩნდება.

   ⚠️ პრეფიქსი `tt-*`. ძველი `.th-*` v2.css-შია და `.th-banner`-ს
      `about.ejs` ჯერ კიდევ იყენებს — მასზე გადაწერა აკრძალულია.
   ========================================================================== */

.tt {
  --tt-mint:  #EFFAF7;              /* გამოცდის ბლოკი */
  --tt-mint-l:#D8EFE9;              /* მისი კონტური */
  background: #fff;
  color: var(--sh-ink);
}

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

/* ── სექციის რიტმი: 40–48px დესკტოპზე, 28–32px მობილურზე ── */
.tt-sec { padding-block: clamp(28px, 4.2vw, 48px); }
.tt-sec--hero  { background: var(--st-bg-1); position: relative; overflow: hidden;
                 padding-block: clamp(22px, 3vw, 36px) clamp(26px, 3.6vw, 42px); }
.tt-sec--modes { background: #fff; }
.tt-sec--cats  { background: var(--st-bg-2); }
.tt-sec:focus  { outline: none; }

/* ══════════════════ 1 · შესავალი ══════════════════ */
/* დეკორატიული გზა — ტექსტს არ ეხება: მარცხნიდან სრულიად გამჭვირვალეა.
   ელიფსური mask ოთხივე კიდეს აქრობს, ამიტომ სურათის ბრტყელი ფონი
   (#F1F8FD) და სექციის ფონი (#F5F9FF) ერთმანეთში გადადის უნაკერო. */
.tt-road {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(54%, 660px); pointer-events: none; user-select: none;
}
.tt-road img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 52%; display: block;
  -webkit-mask-image: radial-gradient(115% 125% at 86% 50%,
     #000 26%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.28) 76%, transparent 92%);
          mask-image: radial-gradient(115% 125% at 86% 50%,
     #000 26%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.28) 76%, transparent 92%);
}

/* ⚠️ `max-width` **არ** ედება `.tt-hero`-ს: ელემენტს `tt-wrap`-იც აწერია
   და `margin-inline:auto`-სთან ერთად ტექსტს შუაში წვდა. */
.tt-hero { position: relative; z-index: 1; }
.tt-hero > * { max-width: 640px; }

.tt-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--sh-ink-3); margin-bottom: .85rem;
}
/* სამიზნის ზომა ≥24px (WCAG 2.2 AA) — მარტო ტექსტის სიმაღლე 21px იყო */
.tt-crumb a { display: inline-flex; align-items: center; min-height: 24px;
              color: var(--sh-ink-3); text-decoration: none; }
.tt-crumb a:hover { color: var(--sh-blue-d); text-decoration: underline; }
.tt-crumb span[aria-current] { color: var(--sh-ink-2); }

.tt .tt-h1 {
  font-size: clamp(1.62rem, 3.4vw, 2.4rem); line-height: 1.18;
  color: var(--sh-ink); margin: 0; overflow-wrap: break-word;
}
.tt .tt-lead { margin: .6rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--sh-ink-2); }

/* ══════════════════ 2 · არჩეული კატეგორია ══════════════════ */
/* ორი რიგი: ტექსტი და მოქმედებები მარცხნივ ერთმანეთზე, სურათი ორივეს
   გასწვრივ. მობილურზე იგივე უჯრები ერთ სვეტად ეწყობა — ტექსტი, სურათი,
   მოქმედებები. `display:contents` განზრახ არ გვიყენია: ბადის ბავშვები
   მაშინ ცალკეულ სტრიქონებად იშლებოდა. */
.tt-feat {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "body media" "act media";
  column-gap: clamp(.9rem, 2.2vw, 2rem); row-gap: 1.15rem; align-items: center;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r);
  padding: clamp(1.05rem, 2.1vw, 1.7rem); box-shadow: var(--st-sh);
}
.tt-feat__body  { grid-area: body; }
.tt-feat__media { grid-area: media; }
.tt-feat__act   { grid-area: act; }
.tt-feat:focus { outline: none; }
.tt-feat:focus-visible { outline: 3px solid #7FA8FF; outline-offset: 3px; }
.tt-feat__body { min-width: 0; }

.tt .tt-feat__t {
  margin: .55rem 0 0; font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.2; color: var(--sh-ink); overflow-wrap: break-word;
}
.tt .tt-feat__sub { margin: .3rem 0 0; font-size: .9rem; color: var(--sh-ink-3); }
.tt .tt-feat__d   { margin: .7rem 0 0; font-size: .93rem; line-height: 1.6; color: var(--sh-ink-2); }

/* მდგომარეობის პილული — ტექსტიც წერია, მარტო ფერზე არ არის დამოკიდებული */
.tt .tt-state {
  display: inline-flex; align-items: center; gap: .5rem; margin: .8rem 0 0;
  padding: .42rem .8rem; border-radius: 999px;
  background: var(--st-bg-2); border: 1px solid var(--sh-line);
  font-size: .85rem; color: var(--sh-ink-2);
}
.tt-state__i { display: grid; place-items: center; color: var(--sh-ink-3); }
.tt-state__i svg { width: 16px; height: 16px; }

.tt-stats {
  display: flex; flex-wrap: wrap; gap: .65rem 1.5rem;
  margin: 1rem 0 0; padding-top: .95rem; border-top: 1px solid var(--sh-line);
}
.tt-stat { display: flex; align-items: center; gap: .6rem; }
.tt-stat__i {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--sh-tint); color: var(--sh-blue-d);
}
.tt-stat__i svg { width: 19px; height: 19px; }
.tt-stat dt {
  font-family: var(--imec-display); font-size: 1.18rem; font-weight: 700;
  line-height: 1.1; color: var(--sh-ink); font-variant-numeric: tabular-nums;
}
.tt-stat dd { margin: 0; font-size: .8rem; line-height: 1.3; color: var(--sh-ink-3); }

.tt-feat__act { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem; }

.tt-feat__media { min-width: 0; }
.tt-feat__media picture { display: block; }
.tt-feat__media img {
  width: 100%; height: clamp(150px, 17vw, 230px);
  object-fit: contain; object-position: center; display: block;
}

/* ── ბეჯი ── */
.tt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .28rem .62rem; border-radius: 8px; background: var(--sh-blue); color: #fff;
  font-family: var(--imec-display); font-size: .78rem; font-weight: 700;
  line-height: 1.15; letter-spacing: .01em; white-space: nowrap;
}
/* ყველა ტონი თეთრ ტექსტთან ≥4.8:1 — მაკეტის ღია ვარიანტები 3:1-ს ვერ გადიოდა */
.tt-chip--blue   { background: #1460FF; }
.tt-chip--cyan   { background: #0E7490; }
.tt-chip--violet { background: #6D28D9; }
.tt-chip--green  { background: #047857; }
.tt-chip--orange { background: #C2410C; }
.tt-chip--brown  { background: #92400E; }
.tt-chip--olive  { background: #4D7C0F; }

/* ── სამი რეჟიმი ── */
.tt-modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(14px, 1.8vw, 22px);
}
.tt-mode {
  display: flex; align-items: center; gap: .85rem;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r);
  padding: 1rem 1.05rem; min-height: 92px; text-decoration: none; color: var(--sh-ink);
  box-shadow: var(--st-sh);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tt-mode__i { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.tt-mode__i svg { width: 24px; height: 24px; }
.tt-mode--blue  .tt-mode__i { background: var(--sh-tint);   color: var(--sh-blue-d); }
.tt-mode--teal  .tt-mode__i { background: var(--sh-tint-2); color: var(--sh-teal-d); }
.tt-mode--amber .tt-mode__i { background: #FFF3E0;          color: #9A5B00; }
.tt-mode__b { display: grid; gap: .18rem; min-width: 0; }
.tt-mode__t { font-family: var(--imec-display); font-size: 1.02rem; font-weight: 700; color: var(--sh-ink); }
.tt-mode__d { font-size: .84rem; line-height: 1.45; color: var(--sh-ink-3); }
.tt-mode__go { margin-inline-start: auto; color: var(--sh-ink-3); display: grid; place-items: center;
               transition: transform 200ms ease; }
.tt-mode__go svg { width: 18px; height: 18px; }
.tt-count {
  display: inline-block; margin-inline-start: .35rem; padding: .05rem .45rem;
  border-radius: 999px; background: #FFF3E0; color: #8A4B00;
  font-size: .76rem; font-variant-numeric: tabular-nums;
}
/* ცარიელი შეცდომები — ბარათი ბმული აღარაა, შიგნით პატარა ბმულია */
.tt-mode.is-empty { cursor: default; }
.tt-mode__alt {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem;
  font-size: .84rem; font-weight: 600; color: var(--sh-blue-d); text-decoration: none;
}
.tt-mode__alt svg { width: 14px; height: 14px; }
.tt-mode__alt:hover { color: var(--sh-blue-d); text-decoration: underline; }

/* ══════════════════ 3 · ყველა კატეგორია ══════════════════ */
.tt-cats__hd {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .9rem 1.5rem; margin-bottom: clamp(14px, 1.8vw, 22px);
}
.tt-cats__txt { min-width: 0; }
.tt .tt-h2 { margin: 0; font-size: clamp(1.32rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--sh-ink); }
.tt .tt-cats__d { margin: .4rem 0 0; font-size: .93rem; line-height: 1.55; color: var(--sh-ink-3); }

.tt-tools { display: flex; align-items: center; gap: .6rem; flex: 0 1 auto; }
/* JS-ის გარეშე ველი უბრალოდ არ ჩანს — თორემ არაფერს აკეთებდა.
   `.no-js`-ს `motion.js` პირველივე ხაზზე აშორებს, ამიტომ ნახტომი არაა. */
.no-js .tt-tools { display: none; }
.tt-search {
  display: flex; align-items: center; gap: .5rem; min-width: min(260px, 62vw);
  padding: .5rem .85rem; min-height: 44px;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r-btn);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.tt-search:focus-within { border-color: var(--sh-blue); box-shadow: 0 0 0 3px rgba(20,96,255,.16); }
.tt-search__i { display: grid; place-items: center; color: var(--sh-ink-3); flex: none; }
.tt-search__i svg { width: 17px; height: 17px; }
.tt-search input {
  /* `align-self: stretch` — ველი მთელ 44px-იან ყუთს ავსებს, თორემ
     ნამდვილი სამიზნე 26px იყო (ლეიბლი კი 44). */
  flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; outline: none;
  font: inherit; font-size: .92rem; color: var(--sh-ink);
}
.tt-search input::placeholder { color: var(--sh-ink-3); }
.tt-search input::-webkit-search-cancel-button { display: none; }
.tt-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;
}

.tt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }

.tt-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--sh-line); border-radius: var(--st-r);
  padding: .8rem .85rem 0; text-decoration: none; color: var(--sh-ink);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
/* ⚠️ ავტორის `display:flex` UA-ს `[hidden]{display:none}`-ს ჯობნის —
   ძებნისას დამალული ბარათი სხვაგვარად ისევ ჩანდა. */
.tt-card[hidden] { display: none; }
.tt-card__top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 26px; }
.tt-card__ok { display: grid; place-items: center; color: var(--sh-blue); }
.tt-card__ok svg { width: 18px; height: 18px; }
.tt-card__t {
  margin-top: .55rem; font-size: .92rem; font-weight: 600; line-height: 1.35;
  color: var(--sh-ink); overflow-wrap: break-word;
}
.tt-card__img { margin: auto 0 0; padding-top: .6rem; }
.tt-card__img picture { display: block; }
.tt-card__img img { width: 100%; height: 92px; object-fit: contain; object-position: center; display: block;
                    transition: transform 200ms ease; }
.tt-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-top: .6rem; padding: .55rem 0; border-top: 1px solid var(--sh-line);
  font-size: .78rem; color: var(--sh-ink-3);
}
.tt-card__n b { color: var(--sh-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-card__sel { color: var(--sh-blue-d); font-weight: 600; white-space: nowrap; }
/* არჩეული — კონტური + ფონი + ✓ + წარწერა „არჩეულია" (არა მარტო ფერი) */
.tt-card.is-on {
  border-color: var(--sh-blue); background: #F4F8FF;
  box-shadow: inset 0 0 0 1px var(--sh-blue);
}
.tt-card.is-on .tt-card__foot { border-top-color: #CFE0FF; }

.tt .tt-empty { margin: 1.2rem 0 0; font-size: .95rem; color: var(--sh-ink-3); }

/* ══════════════════ 4 · გამოცდის სიმულაცია ══════════════════ */
/* ⚠️ opacity მთელ ბლოკზე არ ედება — მხოლოდ სურათს აქვს mask, ტექსტი და
   ღილაკი სრულ კონტრასტში რჩება. */
.tt-exam {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  align-items: center; gap: clamp(.8rem, 2vw, 1.6rem);
  margin-top: clamp(20px, 2.6vw, 32px); overflow: hidden;
  background: var(--tt-mint); border: 1px solid var(--tt-mint-l); border-radius: var(--st-r);
  padding: clamp(1.05rem, 2.3vw, 1.8rem);
}
.tt-exam__in { min-width: 0; }
.tt .tt-exam__t { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--sh-ink); }
.tt .tt-exam__p { margin: .5rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--sh-ink-2); }
.tt .tt-exam__meta { margin: .45rem 0 0; font-size: .82rem; color: var(--sh-ink-3); font-variant-numeric: tabular-nums; }
.tt-exam .tt-btn { margin-top: 1.05rem; }
.tt-exam__art { display: block; min-width: 0; }
.tt-exam__art picture { display: block; }
.tt-exam__art img {
  width: 100%; height: auto; max-height: 200px; object-fit: contain; display: block;
  -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 50%,
     #000 44%, rgba(0,0,0,.9) 62%, rgba(0,0,0,.4) 80%, transparent 94%);
          mask-image: radial-gradient(ellipse 64% 60% at 50% 50%,
     #000 44%, rgba(0,0,0,.9) 62%, rgba(0,0,0,.4) 80%, transparent 94%);
}

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

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

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

  .tt-mode:hover:not(.is-empty) { border-color: #BFD5FF; box-shadow: var(--st-sh-h); transform: translateY(-2px); }
  .tt-mode:hover:not(.is-empty) .tt-mode__go { transform: translateX(3px); color: var(--sh-blue-d); }

  .tt-card:hover { border-color: #BFD5FF; box-shadow: var(--st-sh-h); transform: translateY(-2px); color: var(--sh-ink); }
  .tt-card:hover .tt-card__img img { transform: scale(1.03); }
  .tt-card.is-on:hover { border-color: var(--sh-blue); }

  .tt-clear:hover { border-color: #BFD5FF; color: var(--sh-ink); background: #F7FAFF; }
}

/* active — ეფექტი ბრუნდება; disabled უმოძრაოა */
.tt-btn:active, .tt-mode:active, .tt-card:active { transform: none; }
.tt-btn[disabled], .tt-btn[aria-disabled="true"] { transform: none; opacity: .55; cursor: default; }

/* ── ფოკუსის მკაფიო რგოლი ── */
.tt-btn:focus-visible, .tt-link:focus-visible, .tt-card:focus-visible,
.tt-mode:focus-visible, .tt-clear:focus-visible, .tt-mode__alt:focus-visible,
.tt-crumb a:focus-visible {
  outline: 3px solid #7FA8FF; outline-offset: 3px; border-radius: var(--st-r-btn);
}

/* ── reveal: ≤10px, 350ms (motion.js ამატებს კლასს) ── */
/* ⚠️ ოფსეტი მხოლოდ `:not(.is-in)`-ზე: `.reveal.is-in { transform:none }`
   (motion.css) იმავე წონისაა (0,2,0) და ეს ფაილი გვიან იტვირთება —
   სხვაგვარად ბლოკი სამუდამოდ დაბლა რჩებოდა და hover-ის აწევაც კვდებოდა. */
.tt .reveal { transition-duration: .35s; }
.tt .reveal:not(.is-in) { transform: translate3d(0, 10px, 0); }

/* ══════════════════ ადაპტაცია ══════════════════ */
@media (max-width: 1100px) {
  .tt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* მობილურზე რიგი: ტექსტი → სურათი → მოქმედებები */
  .tt-feat { grid-template-columns: 1fr; grid-template-areas: "body" "media" "act"; row-gap: 1rem; }
  .tt-feat__media img { height: clamp(140px, 30vw, 210px); }
  .tt-modes { grid-template-columns: 1fr; }
  .tt-exam { grid-template-columns: 1fr; }
  .tt-exam__art img { max-height: 170px; }
  .tt-road { width: min(64%, 520px); opacity: .9; }
}
@media (max-width: 720px) {
  .tt-wrap { width: min(var(--sh-wrap), 100% - 2rem); }
  .tt-cats__hd { align-items: stretch; }
  .tt-tools { width: 100%; }
  .tt-search { min-width: 0; flex: 1; }
}
@media (max-width: 640px) {
  .tt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-card__img img { height: 76px; }
  /* ვიწრო ბარათში „898 ბილეთი" და „არჩეულია" ერთ ხაზზე აღარ ეტევა —
     ორ ხაზად ვაწყობთ, ნაცვლად უწესრიგო გადატანისა. */
  .tt-card__foot { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .tt-stats { gap: .6rem 1.1rem; }
  .tt-stat__i { width: 34px; height: 34px; border-radius: 10px; }
  .tt-stat dt { font-size: 1.05rem; }
  .tt-feat__act { gap: .6rem .9rem; }
  .tt-feat__act .tt-btn { flex: 1 1 100%; }
  .tt-road { width: 62%; }
}
/* ერთ სვეტზე მხოლოდ მაშინ, როცა ორი ბარათი მართლა ვეღარ ეტევა.
   375px (iPhone SE/13 mini) ჯერ კიდევ ორსვეტიანია — დაკვეთის მიხედვით. */
@media (max-width: 340px) {
  .tt-grid { grid-template-columns: 1fr; }
  .tt-card__img img { height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt .reveal { opacity: 1; transform: none; transition: none; }
  .tt-btn, .tt-mode, .tt-card, .tt-btn__go, .tt-mode__go, .tt-card__img img { transition: none; }
}