/* ============================================================
   schools-redesign.css
   Scoped entirely within .t2a-sch — no impact on shared nav/footer/layout.
   Content structure mirrors companies-redesign.css. Palette is purple
   throughout, matching the "Školy" audience card's accent color on the
   Organizations page.
   ============================================================ */

.t2a-sch {
  --sch-purple: #807be8;
  --sch-purple-dark: #5d57d9;
  --sch-purple-light: #b4b1f3;
  --sch-purple-deep: #443ed0;
  --sch-ink: #16243d;
  --sch-muted: #43536b;
  --sch-line: #e4d9f5;
  --sch-bg-soft: #f8f4fd;
  --sch-radius-lg: 24px;
  --sch-radius: 20px;
  --sch-sans: 'Figtree', 'Figtree Fallback', 'Noto Sans', 'Noto Sans Fallback', system-ui, -apple-system, sans-serif;
  --sch-section-y: 96px;
  --sch-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--sch-sans);
  color: var(--sch-muted);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* `overflow-x: hidden` forces the used `overflow-y` to `auto`, turning this
     page root into a scroll container (breaks position:sticky descendants and
     nests a second scroller). `clip` contains the same horizontal overflow
     while leaving `overflow-y` at `visible`. `hidden` stays first as the
     fallback for Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}
.t2a-sch *, .t2a-sch *::before, .t2a-sch *::after { box-sizing: border-box; }
.t2a-sch img { max-width: 100%; height: auto; display: block; }
.t2a-sch a { color: inherit; text-decoration: none; }
.t2a-sch h1, .t2a-sch h2, .t2a-sch h3, .t2a-sch h4 { margin: 0; line-height: 1.1; font-family: 'Google Sans Flex', 'Google Sans Flex Fallback', var(--sch-sans); }
.t2a-sch p { margin: 0; }

.t2a-sch .t2a-sch-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.t2a-sch .t2a-sch-section { padding: var(--sch-section-y) 0; position: relative; }
.t2a-sch .t2a-sch-section--soft { background: var(--sch-bg-soft); }

.t2a-sch .t2a-sch-title {
  font-family: 'Google Sans Flex', 'Google Sans Flex Fallback', var(--sch-sans);
  font-size: 40px;
  font-weight: 800;
  color: var(--sch-ink);
  text-align: center;
  letter-spacing: -0.5px;
  margin: 0 0 40px;
}
.t2a-sch .t2a-sch-emph { color: var(--sch-purple); }

/* ---------- Buttons ---------- */
.t2a-sch .t2a-sch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  padding: 15px 32px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.t2a-sch .t2a-sch-btn--primary {
  background: var(--sch-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(128, 123, 232, 0.35);
}
.t2a-sch .t2a-sch-btn--primary:hover { background: var(--sch-purple-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.t2a-sch .t2a-sch-btn--ghost {
  background: #fff;
  color: var(--sch-ink);
  border: 1.5px solid var(--sch-line);
}
.t2a-sch .t2a-sch-btn--ghost:hover { border-color: var(--sch-purple); color: var(--sch-purple); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.t2a-sch .t2a-sch-hero { background: linear-gradient(180deg, #f8f4fd 0%, #f3ebff 100%); padding: 140px 0 0; overflow: hidden; }
.t2a-sch .t2a-sch-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 64px;
}
/* A grid item's automatic minimum size is its min-content width, so one long
   German/Polish word ("Mitarbeitende", "pracownikam") inflates the `fr`
   column past the container and the H1/lead run off the right edge. */
.t2a-sch .t2a-sch-hero__grid > * { min-width: 0; }
.t2a-sch .t2a-sch-hero__eyebrow { color: var(--sch-purple); font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.t2a-sch .t2a-sch-hero__title {
  font-size: 48px;
  font-weight: 900;
  color: var(--sch-ink);
  line-height: 1.14;
  letter-spacing: -1px;
  margin: 0 0 22px;
  text-wrap: pretty;
  /* Last-resort break for compound de/pl words wider than the column on their
     own; pages set `lang`, so `hyphens` picks the right dictionary and only
     applies when the word cannot otherwise fit. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* At 48px a single compound word is wider than a 280px phone column, so the
   `overflow-wrap` backstop above had to break it mid-word ("Entscheidun|gen").
   Scaling the H1 with the viewport lets it wrap between words instead; the
   backstop stays for the very longest Polish/German compounds. */
@media (max-width: 480px) {
  .t2a-sch .t2a-sch-hero__title { font-size: clamp(30px, 10vw, 48px); letter-spacing: -0.5px; }
}
.t2a-sch .t2a-sch-hero__lead { font-size: 16px; font-weight: 600; color: var(--sch-ink); line-height: 1.6; max-width: 520px; margin: 0 0 12px; }
.t2a-sch .t2a-sch-hero__sub { font-size: 16px; line-height: 1.65; max-width: 520px; margin: 0 0 30px; }
.t2a-sch .t2a-sch-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.t2a-sch .t2a-sch-hero__photo { width: 100%; max-width: 440px; margin: 0 auto; }

/* ---------- Trust logos ---------- */
.t2a-sch .t2a-sch-trust { padding: 64px 0 30px; }
.t2a-sch .t2a-sch-trust__label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #a494c2;
  margin-bottom: 12px;
}
.t2a-sch .t2a-sch-trust__sub { text-align: center; font-size: 15px; margin: 0 0 30px; color: var(--sch-muted); }
.t2a-sch .t2a-sch-marquee { overflow: hidden; position: relative; }
.t2a-sch .t2a-sch-marquee::before,
.t2a-sch .t2a-sch-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2;
}
.t2a-sch .t2a-sch-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.t2a-sch .t2a-sch-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.t2a-sch .t2a-sch-marquee__track {
  display: flex; align-items: center; gap: 72px; width: max-content;
  animation: t2a-sch-marquee 26s linear infinite;
}
.t2a-sch .t2a-sch-marquee__track img { height: 44px; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; }
.t2a-sch .t2a-sch-marquee__track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes t2a-sch-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   "KDE VYUŽIJETE" — 4-tile grid with photo header
   ============================================================ */
.t2a-sch .t2a-sch-usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-sch .t2a-sch-usage-card {
  background: #fff;
  border-radius: var(--sch-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 26px rgba(22, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-sch .t2a-sch-usage-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 61, 0.14); }
.t2a-sch .t2a-sch-usage-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.t2a-sch .t2a-sch-usage-card__body { padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* The usage card clips (`overflow: hidden`), so a long single-word title
   ("Mitarbeiterentwicklung") was cut mid-word instead of wrapping. */
.t2a-sch .t2a-sch-usage-card__title { font-size: 24px; font-weight: 700; color: var(--sch-ink); overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1399.98px) {
  .t2a-sch .t2a-sch-usage-card__title { font-size: 20px; }
}
.t2a-sch .t2a-sch-usage-card__body p { font-size: 16px; line-height: 1.6; }
.t2a-sch .t2a-sch-cta-row { display: flex; justify-content: center; margin-top: 44px; }

/* ============================================================
   "JAK FUNGUJE" — 3-step grid
   ============================================================ */
.t2a-sch .t2a-sch-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.t2a-sch .t2a-sch-step { display: flex; flex-direction: column; gap: 8px; transition: transform 0.25s ease; }
.t2a-sch .t2a-sch-step:hover { transform: translateY(-6px); }
.t2a-sch .t2a-sch-step__media {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 22px; box-shadow: 0 14px 34px rgba(22, 36, 61, 0.12); margin-bottom: 14px;
}
.t2a-sch .t2a-sch-step__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--sch-purple); }
.t2a-sch .t2a-sch-step--2 .t2a-sch-step__num { color: var(--sch-purple-light); }
.t2a-sch .t2a-sch-step--3 .t2a-sch-step__num { color: var(--sch-purple-deep); }
.t2a-sch .t2a-sch-step__title { font-size: 24px; font-weight: 700; color: var(--sch-ink); }
.t2a-sch .t2a-sch-step p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   SAFETY — gradient band
   ============================================================ */
.t2a-sch .t2a-sch-safety {
  background: linear-gradient(120deg, var(--sch-purple-deep) 0%, var(--sch-purple) 55%, var(--sch-purple-light) 100%);
}
.t2a-sch .t2a-sch-safety__inner {
  max-width: 860px; margin: 0 auto; padding: 84px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.t2a-sch .t2a-sch-safety__icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.t2a-sch .t2a-sch-safety__icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-sch .t2a-sch-safety__title { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0; }
.t2a-sch .t2a-sch-safety__lead { font-size: 18px; font-weight: 600; color: #fff; }
.t2a-sch .t2a-sch-safety__text { font-size: 16px; line-height: 1.7; max-width: 640px; color: rgba(255,255,255,0.88); }

/* ============================================================
   "CO ZÍSKÁTE" — icon-box benefit grid
   ============================================================ */
.t2a-sch .t2a-sch-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-sch .t2a-sch-benefit-card {
  display: flex; flex-direction: column; gap: 18px;
  background: #fff; border-radius: 26px; padding: 30px 26px;
  box-shadow: 0 8px 26px rgba(22, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-sch .t2a-sch-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(128, 123, 232, 0.18); }
.t2a-sch .t2a-sch-benefit-card__icon {
  width: 68px; height: 68px; border-radius: 20px; background: var(--sch-purple);
  box-shadow: 0 10px 24px rgba(128, 123, 232, 0.35);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.t2a-sch .t2a-sch-benefit-card--teal .t2a-sch-benefit-card__icon { background: var(--sch-purple-light); box-shadow: 0 10px 24px rgba(180, 177, 243, 0.35); }
.t2a-sch .t2a-sch-benefit-card__icon svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-sch .t2a-sch-benefit-card__title { font-size: 24px; font-weight: 700; color: var(--sch-ink); text-align: center; }
.t2a-sch .t2a-sch-benefit-card p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   TESTIMONIAL — single quote
   ============================================================ */
.t2a-sch .t2a-sch-testimonial {
  max-width: 860px; margin: 0 auto; padding: 84px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.t2a-sch .t2a-sch-testimonial__sub { font-size: 16px; margin: 0; color: var(--sch-muted); }
.t2a-sch .t2a-sch-testimonial__quote {
  margin: 14px 0 0; font-size: 22px; font-weight: 500; line-height: 1.55; color: var(--sch-ink);
  max-width: 760px; text-wrap: pretty; font-style: normal;
}
.t2a-sch .t2a-sch-testimonial__attribution { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.t2a-sch .t2a-sch-testimonial__logo { height: 56px; width: auto; }
.t2a-sch .t2a-sch-testimonial__person { font-weight: 700; color: var(--sch-ink); font-size: 16px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.t2a-sch .t2a-sch-finalcta__inner {
  max-width: 760px; margin: 0 auto; text-align: center; margin-bottom: 40px;
}
.t2a-sch .t2a-sch-finalcta__title { font-size: 40px; font-weight: 800; color: var(--sch-ink); margin: 0 0 14px; letter-spacing: -0.5px; text-wrap: pretty; }
.t2a-sch .t2a-sch-finalcta__text { font-size: 16px; line-height: 1.6; margin: 0; color: var(--sch-muted); }
/* ---------- Contact form card ---------- */
.t2a-sch .t2a-sch-form-card {
  max-width: 760px; margin: 0 auto; background: #fff; border-radius: 26px;
  box-shadow: 0 12px 34px rgba(22, 36, 61, 0.08); padding: 40px 40px 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.t2a-sch .t2a-sch-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.t2a-sch .t2a-sch-form-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sch-ink); }
.t2a-sch .t2a-sch-form-input {
  /* 16px minimum: iOS Safari zooms the viewport on focus for anything
     smaller and never zooms back out. */
  font-family: var(--sch-sans); font-size: 16px; color: var(--sch-ink);
  padding: 14px 16px; border: 1.5px solid var(--sch-line); border-radius: 12px;
  outline: none; background: #faf8fd; transition: border-color 0.2s, background 0.2s;
}
.t2a-sch .t2a-sch-form-input:focus { border-color: var(--sch-purple); background: #fff; }
.t2a-sch .t2a-sch-form-consent { margin: 0; font-size: 13px; line-height: 1.6; color: #7b8aa5; }
.t2a-sch .t2a-sch-form-consent a { color: var(--sch-purple); font-weight: 600; text-decoration: none; }
.t2a-sch .t2a-sch-form-consent a:hover { text-decoration: underline; }
.t2a-sch .t2a-sch-form-submit { align-self: center; border: none; font-family: var(--sch-sans); }
.t2a-sch .t2a-sch-form-success {
  display: none; background: #e9f5ee; border: 1.5px solid #2e8b57; color: #1f6a41;
  border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; text-align: center;
}
.t2a-sch .t2a-sch-form-card.is-sent .t2a-sch-form-grid,
.t2a-sch .t2a-sch-form-card.is-sent .t2a-sch-form-consent,
.t2a-sch .t2a-sch-form-card.is-sent .t2a-sch-form-submit { display: none; }
.t2a-sch .t2a-sch-form-card.is-sent .t2a-sch-form-success { display: block; }
.t2a-sch .t2a-sch-form-error {
  background: #fdecea; border: 1.5px solid #d0453b; color: #a12f27;
  border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; text-align: center;
}
.t2a-sch .t2a-sch-form-error[hidden],
.t2a-sch .t2a-sch-form-card.is-sent .t2a-sch-form-error { display: none; }
@media (max-width: 560px) {
  .t2a-sch .t2a-sch-form-grid { grid-template-columns: 1fr; }
  .t2a-sch .t2a-sch-form-card { padding: 32px 24px 28px; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.t2a-sch .reveal { opacity: 1; translate: 0 0; }
.t2a-sch.t2a-sch-ready .reveal {
  opacity: 0; translate: 0 24px;
  transition: opacity 0.7s var(--sch-ease), translate 0.7s var(--sch-ease), transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-sch.t2a-sch-ready .reveal.in { opacity: 1; translate: 0 0; }
.t2a-sch .reveal.d1 { transition-delay: 0.08s; }
.t2a-sch .reveal.d2 { transition-delay: 0.16s; }
.t2a-sch .reveal.d3 { transition-delay: 0.24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-sch { --sch-section-y: 70px; }
  /* Same small, consistent top gap as every other page hero below xl —
     see the matching rule/comment in companies-redesign.css. */
  .t2a-sch .t2a-sch-hero { padding-top: 24px; }
  /* Tighter logo spacing in the trust marquee on mobile — see the matching
     rule/comment in companies-redesign.css. Desktop untouched. */
  .t2a-sch .t2a-sch-marquee__track { gap: 24px; }
  .t2a-sch .t2a-sch-hero__grid { grid-template-columns: 1fr; padding-bottom: 30px; }
  .t2a-sch .t2a-sch-hero__photo { max-width: 340px; }
  .t2a-sch .t2a-sch-usage-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-sch .t2a-sch-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-sch .t2a-sch-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .t2a-sch .t2a-sch-container { padding: 0 20px; }
  .t2a-sch .t2a-sch-usage-grid { grid-template-columns: 1fr; }
  .t2a-sch .t2a-sch-benefits-grid { grid-template-columns: 1fr; }
  .t2a-sch .t2a-sch-hero__actions { flex-direction: column; align-items: stretch; }
  .t2a-sch .t2a-sch-hero__actions .t2a-sch-btn { width: 100%; }
  /* "Jak Talk2Amy funguje" steps: number, image, title, text — desktop
     keeps the DOM order (image, number, title, text). */
  .t2a-sch .t2a-sch-step__num { order: 1; }
  .t2a-sch .t2a-sch-step__media,
  .t2a-sch .t2a-media-quote-wrap { order: 2; }
  .t2a-sch .t2a-sch-step__title { order: 3; }
  .t2a-sch .t2a-sch-step p { order: 4; }
}
/* Step 3's "Amy speaking" quote (.t2a-media-quote, scss/components/_t2a-landing.scss)
   is absolutely positioned over the photo. In German at 320px it grows taller
   than the photo, spills out of the wrapper and covers the step title. Below
   480px there is no room to overlay it at all — put it back in flow under the
   photo. Desktop/tablet keep the overlay. */
@media (max-width: 480px) {
  .t2a-sch .t2a-media-quote {
    position: static;
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    border-bottom-left-radius: 14px;
  }
}