/* Derybų Lyga — visual design system (homepage preview pass, v2).
   Direction: shifted from Restrained toward Committed after user
   feedback ("too formal, needs life/contrast/photos") — real event
   photography (packed venue, live negotiation face-offs, judges,
   trophy moment) now carries full-bleed dark sections instead of
   flat white throughout. Navy anchors alternate with photo moments;
   a small live-indicator dot on the eyebrow adds broadcast energy. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #091d36;
  --ink-soft: #123a5e;
  --ink-gradient: radial-gradient(130% 130% at 32% 22%, #164a75 0%, #0f2d4d 30%, #091d36 60%, #050e1b 100%);
  --accent: #3d5afe;
  --accent-hover: #2c42d6;
  --accent-tint: #eef1ff;
  --accent-light: #8fa2ff;
  --ink-tint: rgba(9, 29, 54, 0.055);
  --ink-tint-strong: rgba(9, 29, 54, 0.1);
  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --border: #e4e6f0;
  --text: #181a2e;
  --text-muted: #5b5e75;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(9, 29, 54, 0.04), 0 8px 24px rgba(9, 29, 54, 0.06);
  --shadow-lg: 0 4px 8px rgba(9, 29, 54, 0.06), 0 24px 48px rgba(9, 29, 54, 0.14);
  --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --live: #ff4d5e;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* wireframe scaffolding is inert in this visual pass */
.wf-label { display: none !important; }
.wf-box { outline: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.15rem); line-height: 1.2; }
h3 { font-size: 1.125rem; line-height: 1.35; }
p { margin: 0 0 14px; color: var(--text-muted); }
section > .wrap > p:first-of-type { font-size: 1.05rem; }

section { padding: 88px 0; }
section:nth-of-type(even) { background: var(--bg-alt); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1160px; margin: 0 auto; }
.site-logo__img { height: 35px; width: auto; }
.site-nav__list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  text-decoration: none; font-weight: 500; color: #fff; font-size: 0.95rem;
  transition: color 0.15s ease;
}
.site-nav__list a:hover { color: #80BCD0; }
.site-nav__toggle {
  display: none; position: relative; z-index: 21;
  width: 40px; height: 40px; background: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; padding: 0;
  cursor: pointer;
}
.site-nav__toggle-line {
  position: absolute; left: 10px; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.site-nav__toggle-line:nth-child(1) { top: 14px; }
.site-nav__toggle-line:nth-child(2) { top: 19px; }
.site-nav__toggle-line:nth-child(3) { top: 24px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(1) { top: 19px; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--border); box-shadow: none; }
.btn--outline:hover { background: var(--bg-alt); border-color: var(--ink); transform: none; }
/* the one place blue shows up now: calls to action. */
.btn--accent { background: #80BCD0; color: #16233D; border-color: #80BCD0; }
.btn--accent:hover { background: #6DA0B1; border-color: #6DA0B1; }
.btn--white { background: #fff; color: var(--ink); border-color: var(--border); }
.btn--white:hover { background: var(--bg-alt); border-color: var(--ink); transform: none; }

/* hero — two independent layers instead of one photo, which is what
   finally fixes the ultrawide-monitor problem at the root: a wide
   decorative background pattern (safe to crop/cover at any aspect,
   it's abstract) sized by the CONTAINER, and the people cutout
   (transparent PNG) sized to fit the container via object-fit:contain
   so it's simply never cropped, at any viewport width or height. That
   means the container height can now be set directly (capped in vh)
   instead of being dictated by a single photo's aspect ratio — the
   real fix for the band being pushed below the fold on wide screens. */
.hero { position: relative; background: var(--ink); padding: 0; }
.hero__photo {
  position: relative; width: 100%;
  height: min(58vh, 620px);
  overflow: hidden;
}
.hero__bg-pattern {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero__people {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}
/* a short fade at the very bottom edge only — long enough to soften
   the cut into .dark-zone, short enough that it never crosses into
   the text area or creates a second, mismatched gradient origin. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(9,29,54,0) 12%);
}
/* hero__band + standings-section share one continuous gradient via
   .dark-zone — applying the radial-gradient separately to each would
   give every element its own gradient origin and create a visible
   seam where they meet. */
.dark-zone { background: var(--ink-gradient); }
.hero__band { position: relative; }
/* padding-top/bottom only — .wrap already supplies the 32px left/right
   gutter, and the shorthand form here would silently reset it to 0
   (masked on desktop by max-width:620px + auto-centering, but exposed
   the moment the mobile override removes that max-width). */
.hero__content { position: relative; z-index: 3; padding-top: 56px; padding-bottom: 72px; max-width: 620px; }
.hero__eyebrow {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; color: #fff; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 9px;
}
/* the pulsing LIVE dot is reserved for the tournament slide only —
   training/conference slides use the eyebrow without it. */
.hero__eyebrow--live::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}
/* nowrap so switching slides never changes how many lines the heading
   takes (that line-count shift was making the whole page jump on
   rotation) — copy for all 3 slides is kept short enough to fit. */
.hero__content h1 { color: #fff; margin-bottom: 18px; white-space: nowrap; }
.hero__date { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0 0 20px; }
.hero__date-icon { flex-shrink: 0; color: rgba(255,255,255,0.7); }
.hero__content p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 52ch; }
.hero__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero__actions .btn { background: #fff; color: var(--ink); border-color: #fff; }
.hero__actions .btn:hover { background: rgba(255,255,255,0.88); }
.hero__actions .btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); box-shadow: none; }
.hero__actions .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* teaser carousel — up to 3 slides (tournament / training / conference)
   cycling in the same slot the single-event band used to fill. */
/* named areas (not a 2-item grid) so mobile can reorder heading/photo/text
   independently while desktop keeps heading+text stacked in one column
   next to the photo. */
.teaser__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: "heading photo" "text photo";
  gap: 0 48px; align-items: center; padding-top: 56px;
}
.teaser__heading { grid-area: heading; }
.teaser__text { grid-area: text; }
.teaser__heading.hero__content, .teaser__text.hero__content { padding-top: 0; padding-bottom: 0; max-width: 560px; }
.teaser__photo { grid-area: photo; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.teaser__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teaser__dots { display: flex; gap: 8px; justify-content: center; padding: 28px 0 56px; }
.teaser__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255,255,255,0.28); cursor: pointer; transition: all 0.2s ease;
}
.teaser__dot:hover { background: rgba(255,255,255,0.5); }
.teaser__dot[aria-selected="true"] { background: #fff; width: 22px; border-radius: 4px; }

/* season standings — dark anchor section so the white card pops */
.standings-section { padding: 40px 0 64px; position: relative; overflow: hidden; }
.standings-section::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 30px);
}
.standings { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 36px; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.standings__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.standings__header h2 { margin: 0; font-size: 1.4rem; }
/* deliberately NOT pill-shaped like the tabs below — a rounded chip here
   reads as another clickable option; this is a plain label. */
.standings__season-badge {
  display: inline-flex; align-items: center; padding: 0;
  background: none; border-radius: 0; color: var(--text-muted);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.standings__season-select {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  background: #fff; color: var(--text);
}
/* navy tab bar with an accent-pill active state — same blue as the CTA
   below, so the one active tab and the one action on the panel read as
   the same deliberate signal instead of two competing accents. */
.standings__tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; background: var(--ink); padding: 6px; border-radius: 999px; width: fit-content; }
.standings__tab {
  padding: 10px 18px; background: transparent; border: none; border-radius: 999px;
  cursor: pointer; font-weight: 600; font-family: var(--font-body); font-size: 0.9rem;
  color: rgba(255,255,255,0.68); transition: all 0.15s ease;
}
.standings__tab:hover { color: #fff; background: rgba(255,255,255,0.12); }
.standings__tab[aria-selected="true"] { background: #80BCD0; color: #16233D; box-shadow: var(--shadow); }
.standings__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; font-size: 0.9rem; color: var(--text-muted); }
.standings__meta strong { color: var(--ink); }
table.standings__table { width: 100%; border-collapse: collapse; }
.standings__table thead th {
  text-align: left; padding: 0 8px 12px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border);
}
.standings__table td { padding: 14px 8px; border-bottom: 1px solid var(--border); }
.standings__table tbody tr:last-child td { border-bottom: none; }
.standings__table tbody tr:hover td { background: var(--bg-alt); }
.standings__participant { display: flex; align-items: center; gap: 14px; }
.standings__participant img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-alt); border: 1px solid var(--border); }
.standings__name { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.standings__title { font-size: 0.82rem; color: var(--text-muted); }
.standings__record { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.standings__record-label { display: none; }
.standings__cta { margin-top: 24px; }

/* card grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 36px; }
.card {
  background: #fff; padding: 28px; border-radius: var(--radius); border: 1px solid var(--border);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card p:last-child { margin-bottom: 0; }
.card--photo { padding: 0; }
.card--photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.card--photo .card__body { padding: 24px; }

/* card--event-photo — photo-only card with a fixed aspect ratio, used as
   the anchor for the .programa schedule overlay (needs a definite height
   for the overlay's absolute positioning to center against). */
.card--event-photo { padding: 0; position: relative; aspect-ratio: 4/3; }
.card--event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* programa — schedule overlay pinned over the event photo card */
.programa {
  position: absolute; inset: 0; width: 68%;
  margin: auto;
  height: fit-content;
  background: rgba(9, 29, 54, 0.8);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.programa__title {
  margin: 0 0 6px; color: #fff; font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.03em; font-family: var(--font-display);
}
.programa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.programa__list li { color: rgba(255,255,255,0.92); font-size: 0.95rem; line-height: 1.4; }

/* card--dark — navy variant for the ticket-info card on event pages;
   the accent-blue outline is what separates it from a plain --ink fill. */
.card--dark { background: var(--ink); border-color: var(--accent); }
.card--dark:hover { transform: none; }
.card--dark h2, .card--dark h3 { color: #fff; }
.card--dark p { color: rgba(255,255,255,0.72); }
.contact-card__company { margin: -8px 0 20px; font-weight: 600; color: #fff; }
.card--dark .info-list li { color: rgba(255,255,255,0.88); }
.card--dark .info-list__icon { filter: brightness(0) invert(1); }
.card--dark .info-list__note { color: rgba(255,255,255,0.6); }
.card--dark .info-list__note a { color: #fff; }
.card--dark .info-list a { color: #fff; text-decoration: none; }
.card--dark .info-list a:hover { color: rgba(255,255,255,0.75); }
.card--dark .problem-list li { color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.14); }
.card--dark .problem-list__mark { background: #fff; color: var(--ink); }

/* full-bleed photo band */
.photo-band { position: relative; padding: 0; min-height: 420px; display: flex; align-items: center; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(9,29,54,0.88) 0%, rgba(9,29,54,0.55) 55%, rgba(9,29,54,0.25) 100%);
}
.photo-band .wrap { position: relative; z-index: 2; padding: 96px 32px; }
.photo-band h2, .photo-band p { color: #fff; }
.photo-band p { color: rgba(255,255,255,0.78); max-width: 44ch; font-size: 1.1rem; }

/* competency wheel — mokymai.html's signature visual: recreates the source
   material's own diagram (Žinios / Įgūdžiai / Nuostatos ring around a
   central Patirtis) as a CSS conic-gradient donut instead of a flat list.
   Patirtis sits in the center deliberately — it's the synthesis of the
   other three, not a fourth equal segment, which is exactly how the
   original material frames it. */
/* competency-intro — intro copy beside the wheel on desktop, so the two
   don't stack as separate full-width blocks; the wheel keeps its own
   fixed size and just drops its auto-centering margin in this context. */
.competency-intro { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: start; margin-top: 8px; }
.competency-intro__text { display: grid; gap: 14px; }
.competency-intro p { margin: 0; }
.competency-intro__list { margin: -6px 0 0; padding-left: 20px; color: var(--text-muted); display: grid; gap: 6px; }
.competency-intro__list li { font-size: 0.95rem; }
.competency-intro .competency-wheel { margin: 0; }

.competency-wheel { position: relative; width: 280px; height: 280px; margin: 48px auto 0; }
.competency-wheel__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -60deg, var(--ink) 0deg 120deg, var(--ink-soft) 120deg 240deg, var(--accent) 240deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 64px), #000 calc(100% - 64px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 64px), #000 calc(100% - 64px));
  box-shadow: var(--shadow-lg);
}
.competency-wheel__center {
  position: absolute; inset: 64px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: var(--shadow);
}
.competency-wheel__center span {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.competency-wheel__label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  color: #fff; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.competency-wheel__label--a { left: 140px; top: 32px; }
.competency-wheel__label--b { left: 233px; top: 194px; }
.competency-wheel__label--c { left: 47px; top: 194px; }

@media (max-width: 480px) {
  .competency-wheel { width: 240px; height: 240px; }
  .competency-wheel__center { inset: 52px; }
  .competency-wheel__label { font-size: 0.7rem; }
  .competency-wheel__label--a { left: 120px; top: 26px; }
  .competency-wheel__label--b { left: 201px; top: 167px; }
  .competency-wheel__label--c { left: 39px; top: 167px; }
}

/* competency detail cards — numbered (the number reflects the real stage
   order above, not decoration) with room for sub-bullets and a highlighted
   outcome line per stage. */
.competency-list { display: grid; gap: 20px; margin-top: 36px; }
.competency-item {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 32px 32px 28px; box-shadow: var(--shadow);
}
.competency-item__num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem;
  color: var(--accent); line-height: 1;
}
.competency-item__body h3 { margin-bottom: 10px; }
.competency-item__body > p:first-of-type { margin-bottom: 12px; }
.competency-item__list { margin: 0 0 16px; padding-left: 20px; color: var(--text-muted); display: grid; gap: 6px; }
.competency-item__list li { font-size: 0.95rem; }
.competency-item__subhead {
  font-weight: 600; color: var(--ink); font-size: 0.85rem; margin: 4px 0 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.competency-item__result {
  margin: 16px 0 0; padding: 12px 16px; background: var(--accent-tint); border-radius: 8px;
  font-size: 0.92rem; color: var(--ink);
}
.competency-item__result strong { font-weight: 700; }

/* two-column split (mokymai teaser) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.split .card { margin-top: 0; width: 100%; }
/* a heading directly above .split (no intervening intro paragraph) needs
   more breathing room than the heading's own 14px margin gives it. */
h2 + .split { margin-top: 32px; }
/* split--stretch — matches both cards to the row's tallest instead of each
   sizing to its own content (atviri-mokymai.html's pricing + "Ko išmoksite"
   pair). Opt-in modifier, not the .split default: other .split instances
   pair a fixed-aspect-ratio photo card with a text card, and stretch would
   fight that aspect-ratio instead of just evening out padding. */
.split--stretch { align-items: stretch; }

/* problem-split — mokymai.html's "Kodėl derybos stringa" section: an
   editorial list (not another card-grid) beside a supporting photo, so the
   page doesn't open with three identical white-box grids in a row. */
.problem-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; margin-top: 8px; }
.problem-split__photo { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.problem-split__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.problem-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.problem-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  font-weight: 500; color: var(--text);
}
.problem-list li:first-child { padding-top: 0; }
.problem-list li:last-child { border-bottom: none; }
.problem-list__mark {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--accent-tint); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
}
.problem-list--check .problem-list__mark { background: var(--accent); color: #fff; }
.problem-list--columns { display: block; columns: 2; column-gap: 32px; }
.problem-list--columns li { break-inside: avoid; }
@media (max-width: 700px) { .problem-list--columns { columns: 1; } }

/* tag-list — audience/segment chips (e.g. "who is this for"); a wrapping
   pill row reads faster than a checklist for short noun-phrase items and
   keeps this section visually distinct from the benefit checklist below it. */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 32px; padding: 0; }
.tag-list li {
  background: var(--accent-tint); color: var(--ink);
  font-size: 0.92rem; font-weight: 500; padding: 10px 18px; border-radius: 999px;
}

/* a card immediately following body text needs its own breathing room —
   .card-grid/.split children never match this (their previous sibling is
   another card or nothing), so it only fires for standalone cards in flow. */
p + .card { margin-top: 24px; }

/* fact-grid — label/value spec sheet (e.g. training format details);
   deliberately no bullet/mark, to avoid piling more accent-dot lists
   onto a page that already uses .problem-list--check for other lists. */
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 28px; }
.fact-grid__item { padding-top: 18px; border-top: 2px solid var(--border); }
.fact-grid__label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 6px;
}
.fact-grid__value { display: block; font-size: 1.02rem; color: var(--ink); font-weight: 500; line-height: 1.4; }
@media (max-width: 700px) { .fact-grid { grid-template-columns: 1fr; } }

/* training-offer — atviri-mokymai.html's pricing card: date/venue reuse
   the existing .info-list icon rows, then price (old struck through, new
   emphasized), a checked "what's included" list, CTA, and the invoicing
   note. Sits as the left half of a .split next to the "Ko išmoksite" card,
   so together they read as one unified panel rather than two stacked
   sections — .training-offer is a modifier on the card itself here, not a
   separate wrapper. */
.training-offer.card { padding: 36px; }
.training-offer__price { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 4px; }
.training-offer__price-old { font-size: 1.15rem; color: rgba(255,255,255,0.5); text-decoration: line-through; }
.training-offer__price-new { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; color: #80BCD0; line-height: 1; }
.training-offer__price-label {
  margin: 0 0 20px; font-size: 0.78rem; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.training-offer__includes {
  list-style: none; margin: 0 0 28px; padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14); display: grid; gap: 12px;
}
.training-offer__includes li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,0.88); font-size: 0.95rem; }
.training-offer__includes li::before {
  content: "✓"; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: rgba(128,188,208,0.18); color: #80BCD0; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.training-offer .btn { width: 100%; justify-content: center; margin-top: 4px; }
.training-offer__note { margin: 18px 0 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); }

/* lesson-grid — compact 2x2 "Ko išmoksite" grid inside the split's second
   card (paired with .training-offer above); a fixed 2-column grid rather
   than auto-fit since it always holds exactly the four competency stages
   and needs to stay tight in a half-width column, not reflow to 260px
   tiles like the page-width .card-grid elsewhere. */
.lesson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.lesson-grid h3 { font-size: 1rem; margin-bottom: 6px; }
.lesson-grid > div > p:first-of-type { font-size: 0.92rem; margin-bottom: 10px; }

/* subhead used above the reviews carousel — centered, with a thin rule
   echoing the divider above it so all three sub-blocks (open/corporate
   cards, reviews) read as one continuous section rather than stacked
   unrelated pieces. */
.section-subhead {
  margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border);
  text-align: center;
}

/* reviews carousel: static list of blockquotes, progressively enhanced
   into a one-at-a-time carousel once JS adds .is-enhanced (see
   assets/js/reviews-carousel.js). Without JS, slides stay stacked and
   fully visible — nothing is hidden by default. */
.reviews-carousel { position: relative; margin: 24px auto 0; max-width: 680px; }
.reviews-carousel__track { display: grid; gap: 16px; }
.reviews-carousel__slide {
  position: relative; margin: 0; background: #fff; padding: 36px 28px 28px;
  border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
/* large decorative opening quote — the testimonial section's one signature
   motif, sized and weighted like the hero's display type, at low opacity
   so it reads as texture behind the copy rather than competing with it. */
.reviews-carousel__slide::before {
  content: "\201C"; position: absolute; top: 4px; left: 20px;
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 800;
  line-height: 1; color: var(--accent); opacity: 0.14; pointer-events: none;
}
.reviews-carousel__slide p { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.reviews-carousel__slide footer { font-weight: 600; color: var(--ink); }

.reviews-carousel.is-enhanced .reviews-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reviews-carousel.is-enhanced .reviews-carousel__slide.is-active {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.reviews-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.reviews-carousel__nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--text); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.reviews-carousel__nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reviews-carousel__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.reviews-carousel__dots { display: flex; gap: 8px; }
.reviews-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--border); cursor: pointer; }
.reviews-carousel__dot[aria-selected="true"] { background: var(--accent); width: 20px; border-radius: 999px; transition: width 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .reviews-carousel.is-enhanced .reviews-carousel__slide { transition: none; }
}

/* reviews-carousel__more — inline "read more" trigger for testimonials too
   long to show in full inside a carousel slide (every slide shares one
   grid cell, so the tallest one would set the height for all of them).
   Opens the full text in .lightbox--text below instead. */
.reviews-carousel__slide footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.reviews-carousel__more {
  background: none; border: none; padding: 0; font-family: var(--font-body);
  font-weight: 600; font-size: 0.92rem; color: var(--accent); cursor: pointer;
}
.reviews-carousel__more:hover { text-decoration: underline; }

/* reviews-panel — dark, high-contrast testimonial panel paired beside a
   lead form (mokymai.html's "uzklausa" section): the plain white-card
   carousel reads as quiet background noise next to a form on white; on
   navy it becomes the section's second focal point instead of blending
   into the page. */
.reviews-panel h2 { color: #fff; }
.reviews-panel .reviews-carousel { max-width: none; margin: 20px 0 0; }
.reviews-carousel--dark .reviews-carousel__slide {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); box-shadow: none;
}
.reviews-carousel--dark .reviews-carousel__slide::before { color: var(--accent-light); opacity: 0.55; }
.reviews-carousel--dark .reviews-carousel__slide p { color: rgba(255,255,255,0.94); }
.reviews-carousel--dark .reviews-carousel__slide footer { color: #fff; }
.reviews-carousel--dark .reviews-carousel__more { color: var(--accent-light); }
.reviews-carousel--dark .reviews-carousel__nav { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.reviews-carousel--dark .reviews-carousel__nav:hover:not(:disabled) { border-color: var(--accent-light); color: var(--accent-light); }
.reviews-carousel--dark .reviews-carousel__nav:disabled { opacity: 0.3; }
.reviews-carousel--dark .reviews-carousel__dot { background: rgba(255,255,255,0.25); }
.reviews-carousel--dark .reviews-carousel__dot[aria-selected="true"] { background: var(--accent-light); }

/* lightbox--text — reuses the .lightbox overlay recipe (fixed, dark
   backdrop) already established for the photo gallery, with a scrollable
   white panel instead of an image; content is cloned in from a hidden
   <template data-review-full="..."> by review-lightbox.js. */
.lightbox--text { cursor: default; }
.lightbox__panel {
  position: relative; background: #fff; border-radius: 20px; width: 100%; max-width: 640px;
  max-height: 84vh; overflow-y: auto; padding: 48px 40px 40px; box-shadow: var(--shadow-lg);
}
.lightbox__panel-body p { color: var(--text); font-size: 1rem; line-height: 1.75; margin: 0 0 16px; }
.lightbox__panel-body footer { margin-top: 8px; font-weight: 600; color: var(--ink); }
.review-expand__list { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 8px; color: var(--text); font-size: 1rem; line-height: 1.6; }
.lightbox__panel .lightbox__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--bg-alt); color: var(--ink); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: background 0.15s ease;
}
.lightbox__panel .lightbox__close:hover { background: var(--border); }

/* event hero — page-level cousin of .photo-band: same full-bleed photo +
   left-to-right navy scrim mechanism, but taller and built to carry an
   H1 + eyebrow + two intro paragraphs (the first thing on a dedicated
   event page) instead of a short mid-page pitch line. The back-link and
   eyebrow are wrapped in .event-hero__content (not direct children of
   .wrap) so the global `section > .wrap > p:first-of-type` rule further
   up this file — which sets font-size:1.05rem on the first paragraph
   directly inside any section's .wrap — never touches .hero__eyebrow's
   own 13px sizing; nesting one level deeper opts out of that selector
   entirely instead of fighting it on specificity. */
.event-hero { position: relative; padding: 0; min-height: 520px; display: flex; align-items: center; background: var(--ink); }
/* compact variant — renginiai.html's hero fronts three short lines of
   copy, not a full event intro, so the full 520px .event-hero height
   (tuned for renginys-a-grupe.html's two-paragraph intro) leaves too
   much empty photo. Scoped modifier so the taller default is untouched
   for the pages already using it. */
.event-hero--compact { min-height: 260px; }
.event-hero--compact .wrap { padding: 56px 32px; }
.event-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.event-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(9,29,54,0.92) 0%, rgba(9,29,54,0.6) 55%, rgba(9,29,54,0.25) 100%);
}
.event-hero .wrap { position: relative; z-index: 2; padding: 96px 32px; }
.event-hero__content { max-width: 680px; }
.event-hero__back { display: inline-block; margin-bottom: 20px; color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.event-hero__back:hover { color: #fff; }
.event-hero__content h1 { color: #fff; }
.event-hero__subtitle { color: #fff; font-size: 1.4rem; font-weight: 700; margin: -4px 0 20px; }
.event-hero__intro { color: rgba(255,255,255,0.82); font-size: 1.05rem; max-width: 56ch; }

/* info-list — icon + text rows for the "Informacija žiūrovui" card. */
.info-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.info-list li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--text); font-weight: 500; }
.info-list__icon { width: 22px; height: 22px; flex-shrink: 0; }
.info-list__note { margin-top: 18px; margin-bottom: 0; font-size: 0.88rem; color: var(--text-muted); }
.info-list__note a { font-weight: 600; }

/* person cards — judges / negotiators / organizers on event pages.
   Circular photo + name + role, deliberately no card chrome (border/
   background): these read as a roster, not individual clickable items,
   so the photography carries the section on its own. */
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-top: 36px; text-align: center; }
.person img {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 14px; background: var(--bg-alt); border: 1px solid var(--border);
}
.person h3 { font-size: 1rem; margin-bottom: 2px; }
.person p { font-size: 0.85rem; margin-bottom: 0; }
/* wider min column than the base .people-grid — commission bios run
   much longer than a Komanda one-liner and wrap awkwardly at 180px. */
.people-grid--commission { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* client logo row — grayscale by default, full color on hover */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; margin-top: 36px; }
.logo-row img { height: 40px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s ease, opacity 0.2s ease; }
.logo-row img:hover { filter: grayscale(0); opacity: 1; }

/* centered CTA below a section's content, e.g. the "Daugiau apie Derybų
   Lygą" button under the 3 priežastys grid on event pages. */
.section-cta { text-align: center; margin-top: 36px; }

/* click-to-play video thumbnail — a real downloaded frame (never an
   embedded iframe) so no third-party script/cookie loads until the
   visitor actually clicks through to YouTube in a new tab. */
.video-embed {
  position: relative; display: block; margin-top: 32px; max-width: 720px;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease;
}
.video-embed:hover { transform: translateY(-4px); }
.video-embed img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video-embed__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-embed__play::before {
  content: ""; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(9,29,54,0.72); box-shadow: var(--shadow-lg);
}
.video-embed__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
/* inside .split, the video sits beside the text column instead of below
   it — the standalone spacing above (meant for stacking under a
   paragraph) would misalign it against the heading. */
.split > .video-embed { margin-top: 0; max-width: none; align-self: start; }

/* honor roll — moved onto .dark-zone directly below the standings table
   (same floating-white-card-over-navy device the standings card already
   uses) so the season trophy cards read as the section's payoff, not a
   flat directory listing further down the page. */
/* explicit transparent override: this is the 2nd <section> inside
   .dark-zone, so the global section:nth-of-type(even) alternating-bg
   rule (higher specificity than a single class) would otherwise paint
   an opaque bg-alt over the dark-zone gradient it needs to sit on. */
.dark-zone .honor-section { background: transparent; padding: 8px 0 72px; }
.honor-section h2 { color: #fff; }
.honor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 36px; }
.honor-season {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-lg);
}
.honor-season__label {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); margin: 0 0 18px;
}
.honor-person { display: flex; align-items: center; gap: 14px; }
.honor-person + .honor-person { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.honor-person__photo-wrap { position: relative; flex-shrink: 0; }
.honor-person__photo-wrap img:first-child {
  display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--bg-alt); border: 1px solid var(--border);
}
/* trophy badge overlaps the winner's photo bottom-right, same pattern
   as a notification badge — a white disc behind it keeps the icon
   legible over any photo. */
.honor-person__trophy {
  position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; padding: 3px; box-shadow: var(--shadow);
}
.honor-person__role {
  margin: 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.honor-person h3 { margin: 2px 0 0; font-size: 1rem; }
.honor-person__meta { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
/* winner gets the one decisive size jump — a bigger, accent-ringed photo
   and a bigger trophy — so the card reads winner-first at a glance
   instead of two equal-weight rows. */
.honor-person--winner .honor-person__photo-wrap img:first-child {
  width: 84px; height: 84px; border: 3px solid var(--accent);
}
.honor-person--winner .honor-person__trophy { width: 28px; height: 28px; padding: 4px; }
.honor-person--winner h3 { font-size: 1.1rem; }

/* gallery — CSS-columns masonry (no JS needed for layout, unlike a grid
   with fixed row heights) since these event photos vary in aspect ratio;
   break-inside:avoid keeps a photo from splitting across two columns. */
.gallery-grid { columns: 2; column-gap: 16px; margin-top: 36px; }
@media (min-width: 700px) { .gallery-grid { columns: 3; } }
@media (min-width: 1000px) { .gallery-grid { columns: 4; } }
.gallery-item {
  display: block; width: 100%; margin: 0 0 16px; padding: 0; border: none; background: none;
  cursor: zoom-in; break-inside: avoid; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-item img { display: block; width: 100%; height: auto; }

/* lightbox overlay — a single instance per page, reused for every
   .gallery-item via [data-lightbox-src] (see gallery-lightbox.js). */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(5,14,27,0.92); cursor: zoom-out; padding: 32px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lg); cursor: default; }
.lightbox__close {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; transition: background 0.15s ease;
}
.lightbox__close:hover { background: rgba(255,255,255,0.22); }

/* Derybų Lygos renginiai — 5-up season roadmap (A/B/C/D/Finalas), all
   five cards a uniform dark-navy card (same recipe as .card--dark) —
   only the nearest upcoming group's content differs (eyebrow, real
   date, CTA button); there's no separate border/glow treatment, the
   content is what signals which one is "next" (see renginiai-events.js). */
.league-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 28px; }
.league-card {
  background: var(--ink); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px; min-height: 118px;
}
.league-card__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
/* reuses the existing live-pulse keyframes (defined above for
   .hero__eyebrow--live) — same recipe, own selector, since this card
   lives in an unrelated part of the page. */
.league-card__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55);
  animation: live-pulse 1.8s ease-out infinite;
}
.league-card__group { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; }
.league-card__date, .league-card__pending {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: rgba(255,255,255,0.7);
}
.league-card__date-icon { width: 16px; height: 16px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.7; }
.league-card .btn { margin-top: 20px; align-self: flex-start; }

/* Atviri mokymai — single wide teaser, never a grid: only one date is
   ever shown at a time. */
.teaser-single {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); margin-top: 28px; background: #fff;
}
.teaser-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teaser-single__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.teaser-single__body h3 { margin: 0; }
.teaser-single__body p { margin: 0; }
.teaser-single__date { font-weight: 600; color: var(--ink); }
.teaser-single__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }


/* Įmonėms inquiry form — first form design.css needs to style.
   Deliberately not .card: skips the hover-lift transform, which would
   read as an odd interaction on a form, but otherwise the same visual
   weight (border/radius/shadow). A thin accent bar + glowing focus states
   give it its own bit of personality instead of reading as a flat,
   generic input stack. */
.form {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px 28px 28px;
  display: grid; gap: 16px; max-width: 480px; margin-top: 28px;
}
.form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
}
.form:focus-within { box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent); }
/* form-row — pairs two short fields (Vardas/Pavardė, El. paštas/Telefonas)
   side by side instead of one long vertical stack of identical rows;
   grid-auto-flow: column with two explicit rows lets the existing
   label/input/label/input markup pair up without extra wrapper elements
   per field. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 16px; }
.form label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form input, .form select, .form textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-soft); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
}
.form textarea { resize: vertical; }
.form .btn { margin-top: 4px; justify-content: center; }
/* honeypot field — off-screen (not display:none/visibility:hidden, which
   some spam bots check for and skip) plus aria-hidden + tabindex="-1" so
   screen-reader/keyboard users never encounter it. */
.form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.form__status:empty { display: none; }
.newsletter-form .form__status { flex-basis: 100%; }
.form__status[data-state="error"] { color: #c0392b; }
.form__status[data-state="success"] { color: var(--accent); font-weight: 600; font-size: 1rem; }
[data-submitted="true"] > :not(.form__status) { display: none; }

/* calendly-cta — the "or book a call" alternative to the form above it;
   used to be a single plain text link with no visual weight of its own,
   easy to miss right under a full form. Same card language as the rest
   of the page (icon chip + border/radius) so it reads as a real second
   option, not an afterthought. */
.calendly-cta {
  display: flex; align-items: center; gap: 16px;
  max-width: 480px; margin-top: 16px; padding: 18px 20px;
  background: var(--accent-tint); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.calendly-cta:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.calendly-cta__icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.calendly-cta__icon img { width: 20px; height: 20px; }
.calendly-cta__text { flex: 1; font-size: 0.92rem; line-height: 1.4; color: var(--text); }
.calendly-cta__text strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.calendly-cta__arrow { flex-shrink: 0; font-size: 1.1rem; color: var(--accent); transition: transform 0.15s ease; }
.calendly-cta:hover .calendly-cta__arrow { transform: translateX(3px); }

/* Kontaktai — the contact-info card has far less content than the form
   beside it; split--stretch matches its height to the form column, and
   centering the content here avoids a mostly-empty box with dead space
   at the bottom. */
.contact-card { display: flex; flex-direction: column; justify-content: center; }

/* legal-hero — privatumo-politika.html's page header: same navy gradient
   as .dark-zone/.hero, but no photo layer. A legal document doesn't need
   event photography to carry it; the gradient + eyebrow keeps it visually
   tied to the rest of the site instead of dropping to a bare white H1. */
.legal-hero { background: var(--ink-gradient); padding: 72px 0 52px; }
.legal-hero h1 { color: #fff; margin-bottom: 10px; }
.legal-hero__meta { color: rgba(255,255,255,0.62); font-size: 0.95rem; margin: 0; }

/* legal — sidebar TOC + article grid. The TOC is numbered (01/02/...)
   because these sections are genuinely sequential — they mirror the
   order a reader works through the actual document, not a decorative
   count. counter() drives the numbers so reordering sections in markup
   never desyncs the display from the list. */
.legal { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.legal__nav { position: sticky; top: 96px; }
.legal__nav-title {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin: 0 0 16px;
}
.legal__nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: legalnav; }
.legal__nav li { counter-increment: legalnav; }
.legal__nav a {
  display: flex; gap: 10px; font-size: 0.92rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none; line-height: 1.4;
}
.legal__nav a::before {
  content: counter(legalnav, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  color: var(--accent); flex-shrink: 0;
}
.legal__nav a:hover { color: var(--ink); }

.legal__content > section { scroll-margin-top: 96px; }
.legal__content > section + section { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border); }
.legal__content h2 { font-size: 1.4rem; }
.legal__content p, .legal__content li { max-width: 72ch; }
.legal__list { margin: 4px 0 16px; padding-left: 22px; color: var(--text-muted); display: grid; gap: 8px; }
.legal__list li { font-size: 0.98rem; line-height: 1.6; }
.legal__intro p:first-of-type { font-size: 1.05rem; }

@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; gap: 8px; }
  .legal__nav { position: static; margin-bottom: 8px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
}

/* footer */
.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;
}
.site-footer { background: var(--ink-gradient); color: rgba(255,255,255,0.72); padding: 80px 0 32px; }
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.92rem; transition: color 0.15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 40px; }
.site-footer__logo { height: 24px; width: auto; margin-bottom: 20px; }
.site-footer__tagline { color: rgba(255,255,255,0.6); font-size: 0.95rem; max-width: 26ch; margin: 0 0 22px; }
.site-footer h3 { color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.site-footer__social a {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.75);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site-footer__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.site-footer__group { padding-top: 2px; }
.site-footer__group-label { display: block; margin-bottom: 12px; }
.site-footer__group ul {
  gap: 13px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.14); margin-top: 13px;
}

.site-footer__legal a { color: rgba(255,255,255,0.4); }
.site-footer__legal a:hover { color: #fff; }
.newsletter-form { display: flex; gap: 8px; max-width: none; padding: 0; background: none; }
.newsletter-form input {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 999px; padding: 11px 18px; font-size: 0.9rem;
  font-family: var(--font-body); min-width: 0; flex: 1;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form button {
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 11px 20px; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.newsletter-form button:hover { background: var(--accent-hover); }
.newsletter-form .form__status[data-state="success"] { color: #fff; }
.newsletter-form .form__status[data-state="error"] { color: #ff8a80; }
.site-footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; color: rgba(255,255,255,0.4); }

/* Derybininko testas CTA — founder photo + quiz pitch. Card height is
   fixed (not min-height) so the grid row has a definite size for the
   photo to fill; without that, the image's intrinsic aspect ratio
   would dictate the row's auto height and blow the card out much
   taller than the content needs. The source photo (laimonas-teaser.jpg)
   is a cutout composited onto flat --ink navy, with headroom built in
   above the head (~13% of the image height is empty margin before the
   hairline) — object-position anchors just below that margin, around
   eye level, so aggressive cover-cropping eats into the headroom and
   shoulders/torso first and the face is never the first thing cut.
   Card background is flat --ink (not --ink-gradient) so it's a pixel
   match for the photo's own flat backdrop — a gradient here would show
   as a visible seam right where the photo meets the text column. */
.quiz-cta { background: var(--bg); }
.quiz-cta__card {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  background: var(--ink); border-radius: 28px;
  overflow: hidden; height: 480px;
}
.quiz-cta__content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 56px; min-width: 0; }
.quiz-cta__heading { color: #fff; margin-bottom: 22px; }
.quiz-cta__lead { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 16px; }
.quiz-cta__lead strong { color: #fff; font-weight: 700; }
.quiz-cta__desc { color: rgba(255,255,255,0.65); font-size: 0.95rem; max-width: 40ch; margin-bottom: 0; }
.quiz-cta__content .btn { margin-top: 28px; align-self: flex-start; }
/* pushed to the bottom of the text column (justify-content:space-between
   on the two children of .quiz-cta__content), rather than being laid
   over the photo — keeps it legible without needing a scrim, and reads
   as "belongs to the pitch" rather than a photo credit. */
.quiz-cta__credit { margin: 0; text-align: right; }
.quiz-cta__credit strong { display: block; color: #fff; font-size: 0.95rem; font-weight: 700; }
.quiz-cta__credit span { display: block; color: rgba(255,255,255,0.6); font-size: 0.82rem; margin-top: 2px; }
/* min-height:0 overrides the grid item's default min-height:auto, which
   would otherwise use the img's intrinsic (width/height attribute)
   aspect ratio as a content-based floor — silently inflating this
   column's row track past the card's explicit 480px height and
   pushing .quiz-cta__credit down past the clipped, visible area. */
.quiz-cta__photo { position: relative; margin: 0; height: 100%; min-height: 0; }
.quiz-cta__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  display: block;
}
/* mobile-only duplicate of .quiz-cta__credit, laid over the photo itself
   instead of sitting in the text column below it — see the (max-width:
   860px) block for why there are two copies. Hidden here so it doesn't
   render on desktop. */
.quiz-cta__photo-credit { display: none; }

@media (max-width: 860px) {
  .site-nav {
    position: fixed; inset: 0; z-index: 15;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .site-nav.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .site-nav__list { flex-direction: column; gap: 28px; }
  .site-nav__list a { font-size: 1.5rem; }
  .site-logo__img { height: 20px; }
  body.nav-open { overflow: hidden; }
  .site-nav__toggle { display: inline-block; }
  .split, .site-footer__grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; grid-auto-flow: row; }
  section { padding: 56px 0; }
  /* base .hero__people already uses object-fit:contain, so it's never
     cropped at any width. A vh-based height here left a big gap above
     the heads on phones: the container (tall/narrow at phone width)
     didn't match the people cutout's own wide aspect (2048x927), so
     contain became width-constrained and stacked the leftover at top.
     Matching the container's ratio to roughly the cutout's own (with a
     little slack for breathing room) keeps the gap minimal instead. */
  .hero__photo { height: auto; aspect-ratio: 2 / 1; }
  .hero__band { padding-top: 40px; }
  .hero__content { padding-top: 0; padding-bottom: 48px; max-width: none; }
  /* mobile reading order: headline -> photo -> date/description/CTA */
  .teaser__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "photo" "text";
    gap: 16px; padding-top: 0;
  }
  .teaser__photo { aspect-ratio: 16 / 10; }
  .teaser__heading.hero__content, .teaser__text.hero__content { max-width: none; }
  .teaser__dots { padding: 20px 0 48px; }
  /* full-width label text (e.g. mokymai.html's two long CTAs) has no room
     to breathe on one row at phone width, so stack instead of truncating. */
  .hero__actions { flex-wrap: wrap; gap: 12px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* .standings carries both .wrap and .standings — its own shorthand
     padding overrides .wrap's horizontal gutter, and standings-section
     itself only pads top/bottom, so without an explicit side margin here
     the white card sits flush against the screen edges. */
  .standings { padding: 24px; margin: 0 20px; }
  /* fit all 5 tabs on one row where possible; let the row scroll instead
     of wrapping to a second line when it doesn't. */
  .standings__tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; scrollbar-width: none; }
  .standings__tabs::-webkit-scrollbar { display: none; }
  .standings__tab { flex-shrink: 0; padding: 9px 14px; font-size: 0.84rem; }

  /* the two-column table (name column + "Pergalės/Pralaimėjimai" column)
     has no room to breathe at phone width — the header text alone wraps
     across the person's row. Drop the header (redundant once the record
     becomes a labeled badge) and let each row lay out as a simple card:
     photo+name+title on the left, a W/L badge on the right. */
  .standings__table thead { display: none; }
  .standings__table, .standings__table tbody, .standings__table tr { display: block; width: 100%; }
  .standings__table tr {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .standings__table tbody tr:last-child { border-bottom: none; }
  .standings__table td { padding: 0; border: none; }
  .standings__record {
    display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
    background: var(--bg-alt); border-radius: 12px; padding: 6px 12px; font-size: 1.05rem;
    color: var(--ink);
  }
  .standings__record-label {
    display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--ink); opacity: 0.6;
  }

  /* stacked: photo first (it's the personal, attention-grabbing element),
     pitch + CTA below. Fixed aspect-ratio (rather than the desktop 100%
     stretch) keeps the box from collapsing too short on narrow phones —
     object-position still keeps the face safe within whatever height
     that ratio produces. */
  .quiz-cta__card { grid-template-columns: 1fr; height: auto; }
  .quiz-cta__photo { aspect-ratio: 5 / 4; order: -1; height: auto; }
  .quiz-cta__content { height: auto; padding: 32px; }
  /* the text-column credit is replaced by .quiz-cta__photo-credit (laid
     over the photo) at this width — see that rule for why. */
  .quiz-cta__credit { display: none; }
  /* bottom-left caption over the photo, with a scrim so it stays legible
     regardless of what's directly behind it (hair, suit, shirt collar). */
  .quiz-cta__photo::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1;
    background: linear-gradient(0deg, rgba(5,14,27,0.75) 0%, rgba(5,14,27,0) 100%);
  }
  .quiz-cta__photo-credit {
    display: block; position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2;
    margin: 0; text-align: left;
  }
  .quiz-cta__photo-credit strong { display: block; color: #fff; font-size: 0.95rem; font-weight: 700; }
  .quiz-cta__photo-credit span { display: block; color: rgba(255,255,255,0.75); font-size: 0.82rem; margin-top: 2px; }

  /* shorter hero on phones — 520px with two full intro paragraphs would
     push the fold well past the viewport at phone height. */
  .event-hero { min-height: 380px; }
  .event-hero .wrap { padding: 56px 24px; }

  /* renginiai.html — photo cards collapse to one column at phone width,
     same pattern as .split. .league-row already reflows via auto-fit
     and needs no override. */
  .teaser-single { grid-template-columns: 1fr; }
  .teaser-single img { aspect-ratio: 16 / 10; }

  /* competency cards — number sits above the heading instead of beside it;
     the 72px side column has no room to breathe at phone width. */
  .competency-item { grid-template-columns: 1fr; gap: 6px; padding: 24px; }
  .competency-item__num { font-size: 1.1rem; }

  /* problem-split — text stacks above the photo; the fixed two-column
     grid otherwise forces the row wide enough to push the whole page into
     horizontal scroll at phone width. */
  .problem-split { grid-template-columns: 1fr; gap: 24px; }
  .problem-split__photo { aspect-ratio: 16 / 10; }

  /* competency-intro — same overflow risk as problem-split above: the
     wheel's fixed 280px width plus "auto" column would otherwise refuse
     to shrink the text column at phone width. */
  .competency-intro { grid-template-columns: 1fr; gap: 8px; }
  .competency-intro .competency-wheel { margin: 32px auto 0; }

  /* lesson-grid — the outer .split already stacks its two cards to one
     column at this width; the inner 2x2 grid also drops to one column so
     each stage's text and result callout have room instead of squeezing
     into two ~150px slivers. */
  .lesson-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  /* 32px gutters eat too much of a phone's width; narrow them so content
     has more room to breathe. */
  .wrap { padding: 0 18px; }
  /* .standings carries both .wrap and .standings — .wrap's shorthand above
     wins the cascade (same specificity, later in source) and was zeroing
     out the card's own top/bottom padding entirely. Restore it explicitly. */
  .standings { margin: 0 18px; padding-top: 24px; padding-bottom: 24px; }

  .card--dark { padding: 18px; }
  /* wider box so "16:30 – Kvalifikacinės derybos (3)" fits on one line
     at phone width instead of wrapping. */
  .programa { width: 92%; padding: 18px; }
}