/* ==========================================================================
   targmnadamowmebit.ge — /targmani/<lang>/<service>/ pages
   Loaded after style.css; reuses its tokens. Only what the homepage's
   hero didn't already need: the fixed-ratio canvas frame, breadcrumbs,
   the sub-hero subtitle, and the related-services list.
   ========================================================================== */

.hero--sub { padding-block: var(--s-5) var(--s-6); }

/* Reserves the canvas's box at layout time via aspect-ratio, before any
   script runs — the WebGL init can only ever fill a space that already
   exists, never open one up. This is what makes the hero 0-CLS. */
.hero__canvas-frame {
  position: absolute; inset: 0 0 auto 0; z-index: -2;
  width: 100%; aspect-ratio: 16 / 9; max-height: 640px;
  overflow: hidden;
}
.hero__canvas-frame .hero__canvas { width: 100%; height: 100%; }

.breadcrumbs { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-3); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--peach); }
.breadcrumbs .sep { margin-inline: .4em; opacity: .6; }
.breadcrumbs .current { color: var(--text-dim); }

.hero__subtitle {
  font-family: var(--font-ui); font-weight: 400; font-size: var(--t-md);
  color: var(--text-dim); max-width: 52ch; margin-top: var(--s-2);
}

/* Long-form article body. style.css zeroes p/h margins globally (the
   homepage lays everything out with gap), so a flowing article needs its
   own vertical rhythm restored here. FAQ blocks reuse .faq/.faq__item
   from style.css unchanged. */
.article h2 { font-size: var(--t-lg); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.article h2:first-child { margin-top: 0; }
.article p { margin-bottom: var(--s-3); color: var(--text-dim); font-size: var(--t-base); line-height: 1.7; max-width: 68ch; }
.article p strong { color: var(--text); font-weight: 600; }
.article h3 { font-size: var(--t-md); margin-top: var(--s-3); margin-bottom: var(--s-2); }
.article ul, .article ol { margin: 0 0 var(--s-3); padding-inline-start: 1.2em; list-style: disc; display: grid; gap: .45rem; max-width: 68ch; }
.article ol { list-style: decimal; }
.article li { color: var(--text-dim); font-size: var(--t-base); line-height: 1.6; }
.article li::marker { color: var(--peach); }
.article .faq { margin-top: var(--s-2); }
.article .faq__item p { margin-bottom: 0; }

/* Pointer from a document page to the silo article that covers the same
   topic in depth (korporatiuli -> finansuri). Same surface as .related__list
   cards so it reads as navigation, not as body copy. */
.article .deep-dive {
  padding: .9rem 1.1rem; border-radius: var(--radius);
  background: rgba(245,243,239,.035); border: 1px solid var(--line);
  border-left: 3px solid var(--peach);
}
.article .deep-dive a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.article .deep-dive a:hover { color: var(--peach); }

.related__list { display: grid; gap: .5rem; margin-top: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.related__list a {
  display: block; padding: .8rem 1rem; border-radius: var(--radius);
  background: rgba(245,243,239,.035); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: var(--t-sm);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.related__list a:hover { transform: translateY(-2px); border-color: rgba(61,123,255,.35); }