/* Klub Pictures — /technika-gry-w-bilard/: celownik na białej i stół z torem po zderzeniu. Wspólne elementy w style.css. */

/* ===== 1. Pierwszy ekran: tekst po lewej, jeden obiekt po prawej (celownik + stół) ===== */
.thero2 { padding-top: calc(var(--hdr) + clamp(28px, 5vw, 64px)); }
.thero2__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 36px; align-items: center; min-height: calc(100vh - var(--hdr) - 140px); }
.thero2__text { grid-column: 1 / span 4; }
.thero2__text .lead { margin-top: 18px; }
.aim { grid-column: 6 / span 7; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.aim__k { margin-bottom: 12px; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-lamp); }
.cue { display: block; width: 100%; height: auto; cursor: ns-resize; touch-action: none; border-radius: 50%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.cue:focus-visible { outline: 2px solid var(--c-lamp); outline-offset: 6px; }
.cue__limit { fill: none; stroke: rgba(20, 20, 20, .35); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cue__axis { stroke: rgba(20, 20, 20, .22); stroke-width: 1; }
.cue__lbl { font: 600 10px var(--f-mono); letter-spacing: .12em; fill: rgba(20, 20, 20, .55); }
.cue__lbl--dim { fill: rgba(20, 20, 20, .4); }
.cue__tip { transition: transform .25s var(--ease); }
.cue.is-drag .cue__tip { transition: none; }
.cue__tipring { fill: rgba(243, 198, 126, .22); stroke: #B9852F; stroke-width: 2; }
.cue__tipdot { fill: #3B7A9C; } /* niebieska kreda na końcówce kija */
.aim__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.aim__presets button { flex: 1 1 auto; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line-2); background: none; color: var(--c-ink-2); font: 500 12px var(--f-sans); cursor: pointer; }
.aim__presets button:hover { color: var(--c-ink); border-color: var(--c-ink-2); }
.aim__presets button[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.aim__mode { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); }
.aim__mode button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--c-ink-2); font: 500 12px var(--f-mono); cursor: pointer; }
.aim__mode button[aria-checked="true"] { background: var(--c-surface-3); color: var(--c-ink); }
.aim__out { margin-top: 14px; min-height: 4.6em; font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); }
.aim__out b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--c-ink); }

/* Mały stół (ten sam rysunek co w zasadach gry) */
.mini { display: block; width: 100%; height: auto; border-radius: 14px; overflow: hidden; }
.mini__rail { fill: #17110D; }
.mini__felt { fill: #0F443B; }
.mini__pk { fill: #020303; }
.mini__aimline { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.mini__objline { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.mini__cueline { fill: none; stroke: var(--c-lamp); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(243, 198, 126, .6)); transition: d .45s var(--ease); }
.mini__ghost { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mini__obj { fill: #C23A30; }
.mini__cue { fill: #F4F0E8; }
.mini__end { fill: none; stroke: var(--c-lamp); stroke-width: 2; stroke-dasharray: 3 3; transition: cx .45s var(--ease), cy .45s var(--ease); }
.mini__ang { font: 600 14px var(--f-mono); fill: var(--c-lamp); paint-order: stroke; stroke: rgba(4, 12, 10, .85); stroke-width: 4px; }
.mini__t { font: 500 14px var(--f-mono); letter-spacing: .1em; fill: #F8E6C4; paint-order: stroke; stroke: rgba(4, 12, 10, .85); stroke-width: 4px; }
.mini__t--dim { fill: rgba(255, 255, 255, .6); }

/* ===== 2. Podstawy ===== */
.tbasics { padding-top: 0; }
.tbasics__fig { margin: 8px 0 0; max-width: 340px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.tbasics__fig img { width: 100%; height: 100%; object-fit: cover; }
.tbasics .line li { padding-bottom: 30px; }
.tbasics .line span:not(.line__n) { max-width: 30em; line-height: 1.5; }

/* ===== 3. Celowanie ===== */
.tghost { padding-top: 0; }
.tghost__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 28px; align-items: center; }
.tghost__svg { grid-column: 1 / span 6; }
.tghost__text { grid-column: 8 / span 5; display: grid; gap: 16px; }

/* ===== 4. Ćwiczenia ===== */
.tdrills { padding-top: 0; }
.tdrills .h2 { margin: 14px 0 clamp(24px, 3vw, 40px); }
.tdrills__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ===== Tablet ===== */
@media (max-width: 1079px) {
  .thero2__text, .aim { grid-column: 1 / -1; }
  .thero2__grid { min-height: 0; }
  .tghost__svg, .tghost__text { grid-column: 1 / -1; }
}

/* ===== Telefon ===== */
@media (max-width: 759px) {
  .thero2 { padding-top: calc(var(--hdr) + 20px); }
  .aim { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .aim__ball { display: grid; grid-template-columns: 132px 1fr; column-gap: 16px; align-items: center; }
  .aim__ball .aim__k { grid-column: 1 / -1; }
  .aim__presets { margin-top: 0; flex-direction: column-reverse; } /* góra przycisków = góra bili */
  .aim__presets button { height: 30px; flex: none; }
  .tbasics__fig { max-width: none; aspect-ratio: 4 / 3.4; }
  .tdrills__grid { grid-template-columns: 1fr; gap: 10px; }
  .mini__t { font-size: 18px; }
}