/* ============================================================
   professionals-redesign.css
   Scoped entirely within .t2a-prof — no impact on shared nav/footer/layout.
   Content structure mirrors companies-redesign.css; colors reuse this
   tenant's own brand palette ($psychologistColor purple + sky-blue accent).
   ============================================================ */

.t2a-prof {
  --prof-purple: #8440D8;
  --prof-purple-dark: #6a2fb6;
  --prof-purple-light: #a873e6;
  --prof-purple-deep: #5a2a99;
  --prof-ink: #16243d;
  --prof-muted: #43536b;
  --prof-line: #e4d9f5;
  --prof-bg-soft: #f8f4fd;
  --prof-radius-lg: 24px;
  --prof-radius: 20px;
  --prof-sans: 'Figtree', 'Figtree Fallback', 'Noto Sans', 'Noto Sans Fallback', system-ui, -apple-system, sans-serif;
  --prof-section-y: 96px;
  --prof-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--prof-sans);
  color: var(--prof-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-prof *, .t2a-prof *::before, .t2a-prof *::after { box-sizing: border-box; }
.t2a-prof img { max-width: 100%; height: auto; display: block; }
.t2a-prof a { color: inherit; text-decoration: none; }
.t2a-prof h1, .t2a-prof h2, .t2a-prof h3, .t2a-prof h4 { margin: 0; line-height: 1.1; font-family: 'Google Sans Flex', 'Google Sans Flex Fallback', var(--prof-sans); }
.t2a-prof p { margin: 0; }

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

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

/* ---------- Buttons ---------- */
.t2a-prof .t2a-prof-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-prof .t2a-prof-btn--primary {
  background: var(--prof-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(132, 64, 216, 0.35);
}
.t2a-prof .t2a-prof-btn--primary:hover { background: var(--prof-purple-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.t2a-prof .t2a-prof-btn--ghost {
  background: #fff;
  color: var(--prof-ink);
  border: 1.5px solid var(--prof-line);
}
.t2a-prof .t2a-prof-btn--ghost:hover { border-color: var(--prof-purple); color: var(--prof-purple); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.t2a-prof .t2a-prof-hero { background: linear-gradient(180deg, #f8f4fd 0%, #f3ebff 100%); padding: 140px 0 0; overflow: hidden; }
.t2a-prof .t2a-prof-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-prof .t2a-prof-hero__grid > * { min-width: 0; }
.t2a-prof .t2a-prof-hero__eyebrow { color: var(--prof-purple); font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.t2a-prof .t2a-prof-hero__title {
  font-size: 48px;
  font-weight: 900;
  color: var(--prof-ink);
  line-height: 1.14;
  letter-spacing: -1px;
  margin: 0 0 22px;
  text-wrap: pretty;
  /* No hyphens/overflow-wrap on headings: words must never be broken (product
     decision). Long de/pl words are handled by the viewport-scaled font-size
     below and by :lang() rules. */
 
}
/* At 48px a single compound word ("Entscheidungen") is wider than a 280px
   phone column. Scaling the H1 with the viewport lets it wrap between words;
   9.5vw keeps the longest de/pl words inside the column at 320px without
   any mid-word break. */
@media (max-width: 480px) {
  .t2a-prof .t2a-prof-hero__title { font-size: clamp(30px, 9.5vw, 48px); letter-spacing: -0.5px; }
}
.t2a-prof .t2a-prof-hero__lead { font-size: 16px; font-weight: 600; color: var(--prof-ink); line-height: 1.6; max-width: 520px; margin: 0 0 12px; }
.t2a-prof .t2a-prof-hero__sub { font-size: 16px; line-height: 1.65; max-width: 520px; margin: 0 0 30px; }
.t2a-prof .t2a-prof-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.t2a-prof .t2a-prof-hero__photo { width: 100%; max-width: 440px; margin: 0 auto; }

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

/* ============================================================
   "KDE VYUŽIJETE" — 4-tile grid with photo header
   ============================================================ */
.t2a-prof .t2a-prof-usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-prof .t2a-prof-usage-card {
  background: #fff;
  border-radius: var(--prof-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-prof .t2a-prof-usage-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 61, 0.14); }
.t2a-prof .t2a-prof-usage-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.t2a-prof .t2a-prof-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-prof .t2a-prof-usage-card__title { font-size: 24px; font-weight: 700; color: var(--prof-ink); }
@media (max-width: 1399.98px) {
  .t2a-prof .t2a-prof-usage-card__title { font-size: 20px; }
}
/* German compound titles ("Mitarbeiterentwicklung") do not fit a 262px card even
   at 20px; shrink for de only rather than breaking the word. */
:lang(de) .t2a-prof .t2a-prof-usage-card__title { font-size: 19px; letter-spacing: -0.2px; }
.t2a-prof .t2a-prof-usage-card__body p { font-size: 16px; line-height: 1.6; }
.t2a-prof .t2a-prof-cta-row { display: flex; justify-content: center; margin-top: 44px; }

/* ============================================================
   "JAK FUNGUJE" — 3-step grid
   ============================================================ */
.t2a-prof .t2a-prof-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.t2a-prof .t2a-prof-step { display: flex; flex-direction: column; gap: 8px; transition: transform 0.25s ease; }
.t2a-prof .t2a-prof-step:hover { transform: translateY(-6px); }
.t2a-prof .t2a-prof-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-prof .t2a-prof-step__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--prof-purple); }
.t2a-prof .t2a-prof-step--2 .t2a-prof-step__num { color: var(--prof-purple-light); }
.t2a-prof .t2a-prof-step--3 .t2a-prof-step__num { color: var(--prof-purple-deep); }
.t2a-prof .t2a-prof-step__title { font-size: 24px; font-weight: 700; color: var(--prof-ink); }
.t2a-prof .t2a-prof-step p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   SAFETY — gradient band
   ============================================================ */
.t2a-prof .t2a-prof-safety {
  background: linear-gradient(120deg, var(--prof-purple-deep) 0%, var(--prof-purple) 55%, var(--prof-purple-light) 100%);
}
.t2a-prof .t2a-prof-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-prof .t2a-prof-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-prof .t2a-prof-safety__icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-prof .t2a-prof-safety__title { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0; }
.t2a-prof .t2a-prof-safety__lead { font-size: 18px; font-weight: 600; color: #fff; }
.t2a-prof .t2a-prof-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-prof .t2a-prof-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-prof .t2a-prof-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-prof .t2a-prof-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(132, 64, 216, 0.18); }
.t2a-prof .t2a-prof-benefit-card__icon {
  width: 68px; height: 68px; border-radius: 20px; background: var(--prof-purple);
  box-shadow: 0 10px 24px rgba(132, 64, 216, 0.35);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.t2a-prof .t2a-prof-benefit-card--accent .t2a-prof-benefit-card__icon { background: var(--prof-purple-light); box-shadow: 0 10px 24px rgba(168, 115, 230, 0.35); }
.t2a-prof .t2a-prof-benefit-card__icon svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-prof .t2a-prof-benefit-card__title { font-size: 24px; font-weight: 700; color: var(--prof-ink); text-align: center; }
.t2a-prof .t2a-prof-benefit-card p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   TESTIMONIAL — single quote, circular avatar attribution
   ============================================================ */
.t2a-prof .t2a-prof-testimonial {
  max-width: 860px; margin: 0 auto; padding: 84px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.t2a-prof .t2a-prof-testimonial__sub { font-size: 16px; margin: 0; color: var(--prof-muted); }
.t2a-prof .t2a-prof-testimonial__quote {
  margin: 14px 0 0; font-size: 22px; font-weight: 500; line-height: 1.55; color: var(--prof-ink);
  max-width: 760px; text-wrap: pretty; font-style: normal;
}
.t2a-prof .t2a-prof-testimonial__attribution { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.t2a-prof .t2a-prof-testimonial__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.t2a-prof .t2a-prof-testimonial__person { font-weight: 700; color: var(--prof-ink); font-size: 16px; }

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

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-prof { --prof-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-prof .t2a-prof-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-prof .t2a-prof-marquee__track { gap: 24px; }
  .t2a-prof .t2a-prof-hero__grid { grid-template-columns: 1fr; padding-bottom: 30px; }
  .t2a-prof .t2a-prof-hero__photo { max-width: 340px; }
  .t2a-prof .t2a-prof-usage-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-prof .t2a-prof-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-prof .t2a-prof-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .t2a-prof .t2a-prof-container { padding: 0 20px; }
  .t2a-prof .t2a-prof-usage-grid { grid-template-columns: 1fr; }
  .t2a-prof .t2a-prof-benefits-grid { grid-template-columns: 1fr; }
  .t2a-prof .t2a-prof-hero__actions { flex-direction: column; align-items: stretch; }
  .t2a-prof .t2a-prof-hero__actions .t2a-prof-btn { width: 100%; }
  /* "Jak Talk2Amy funguje" steps: number, image, title, text — desktop
     keeps the DOM order (image, number, title, text). */
  .t2a-prof .t2a-prof-step__num { order: 1; }
  .t2a-prof .t2a-prof-step__media,
  .t2a-prof .t2a-media-quote-wrap { order: 2; }
  .t2a-prof .t2a-prof-step__title { order: 3; }
  .t2a-prof .t2a-prof-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-prof .t2a-media-quote {
    position: static;
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    border-bottom-left-radius: 14px;
  }
}

/* Final CTA title has no phone scaling; German "kennenzulernen?" (336px @40px)
   overflowed a 280px column at 320px. Words are never broken — scale instead. */
@media (max-width: 480px) {
  .t2a-prof .t2a-prof-finalcta__title { font-size: clamp(28px, 9vw, 40px); }
}