/* ============================================================
   aboutus-redesign.css
   Supplements companies-redesign.css (loaded together on the AboutUs page)
   with the patterns Companies doesn't have: a centered text-only hero,
   alternating image/text "split" sections, partner cards and press cards.
   Still scoped entirely within .t2a-cmp — reuses its variables, buttons,
   section/title/marquee/safety/form primitives as-is.
   ============================================================ */

/* Centered hero variant (.t2a-cmp-hero--center) now lives in
   companies-redesign.css — shared with Contact and Pricing. Only the
   wider inner max-width (two lead paragraphs) is specific to AboutUs. */
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__inner { max-width: 780px; }

/* ============================================================
   SPLIT — alternating image/text sections (founder bio, "why", "science")
   ============================================================ */
.t2a-cmp .t2a-cmp-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.t2a-cmp .t2a-cmp-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.t2a-cmp .t2a-cmp-split--reverse .t2a-cmp-split__media { order: 2; }
.t2a-cmp .t2a-cmp-split--reverse .t2a-cmp-split__body { order: 1; }
.t2a-cmp .t2a-cmp-split__media { position: relative; }
.t2a-cmp .t2a-cmp-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--cmp-radius-lg);
  box-shadow: 0 22px 54px rgba(22, 36, 61, 0.16);
}
.t2a-cmp .t2a-cmp-split__caption {
  position: absolute; left: 22px; bottom: 22px;
  background: #fff; border-radius: 16px; padding: 12px 20px;
  box-shadow: 0 10px 28px rgba(22, 36, 61, 0.18);
}
.t2a-cmp .t2a-cmp-split__caption-name { font-weight: 700; color: var(--cmp-ink); font-size: 16px; }
.t2a-cmp .t2a-cmp-split__caption-role { font-size: 13px; color: #7b8aa5; }
.t2a-cmp .t2a-cmp-split__title { font-size: 40px; font-weight: 800; color: var(--cmp-ink); margin: 0 0 18px; letter-spacing: -0.5px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-split__lead { font-size: 16px; font-weight: 600; color: var(--cmp-blue); line-height: 1.6; margin: 0 0 16px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-split__body p:not(.t2a-cmp-split__lead) { font-size: 16px; line-height: 1.7; margin: 0 0 16px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-split__body p:last-child { margin-bottom: 0; }
.t2a-cmp .t2a-cmp-why-partners strong { font-weight: 700; }

/* ============================================================
   "AMY & VĚDA" — expandable "more info" panel (accordion via Bootstrap
   .collapse, same mechanism as the footer's "Dokumenty pro:" groups —
   .collapsed toggles automatically on the trigger, driving the label/
   chevron swap below in pure CSS, no extra JS). Paragraph sizes here are
   16px throughout (site body-text size) — the source mockup used smaller
   15px/13px, deliberately not carried over.
   ============================================================ */
.t2a-cmp .t2a-cmp-science-toggle {
  background: #fff; color: var(--cmp-blue); padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15px; border: 1.5px solid var(--cmp-blue); cursor: pointer;
  font-family: var(--cmp-sans); display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s ease;
}
.t2a-cmp .t2a-cmp-science-toggle:hover { background: var(--cmp-bg-soft); }
.t2a-cmp .t2a-cmp-science-toggle__icon { width: 11px; height: 11px; fill: currentColor; transition: transform 0.25s ease; }
.t2a-cmp .t2a-cmp-science-toggle:not(.collapsed) .t2a-cmp-science-toggle__icon { transform: rotate(180deg); }
.t2a-cmp .t2a-cmp-science-toggle__hide { display: none; }
.t2a-cmp .t2a-cmp-science-toggle:not(.collapsed) .t2a-cmp-science-toggle__show { display: none; }
.t2a-cmp .t2a-cmp-science-toggle:not(.collapsed) .t2a-cmp-science-toggle__hide { display: inline; }

.t2a-cmp .t2a-cmp-science-panel-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px 88px; }
.t2a-cmp .t2a-cmp-science-panel {
  background: var(--cmp-bg-soft); border-radius: var(--cmp-radius-lg); padding: 56px 60px;
  display: flex; flex-direction: column; gap: 36px;
}
.t2a-cmp .t2a-cmp-science-panel h3 { font-size: 24px; font-weight: 700; color: var(--cmp-ink); margin: 0 0 14px; }
.t2a-cmp .t2a-cmp-science-panel p { font-size: 16px; line-height: 1.7; margin: 0 0 12px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-science-panel p:last-child { margin-bottom: 0; }
.t2a-cmp .t2a-cmp-science-panel__highlight { font-weight: 600; color: var(--cmp-ink); }
.t2a-cmp .t2a-cmp-science-panel__refs { border-top: 1px solid var(--cmp-line); padding-top: 28px; }
.t2a-cmp .t2a-cmp-science-panel__refs-title { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; color: var(--cmp-blue); margin-bottom: 14px; }
.t2a-cmp .t2a-cmp-science-panel__refs p { font-size: 16px; line-height: 1.65; color: #7b8aa5; margin: 0 0 10px; }
.t2a-cmp .t2a-cmp-science-panel__refs p:last-child { margin-bottom: 0; }
.t2a-cmp .t2a-cmp-science-panel__refs a { font-weight: 600; }

/* ============================================================
   "NAŠI PARTNEŘI" — logo + name + text cards
   ============================================================ */
.t2a-cmp .t2a-cmp-partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 0 auto; }
.t2a-cmp .t2a-cmp-partner-card {
  background: var(--cmp-bg-soft); border-radius: var(--cmp-radius-lg);
  padding: 40px 32px; display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-cmp .t2a-cmp-partner-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 61, 0.12); }
.t2a-cmp .t2a-cmp-partner-card__logo { height: 64px; display: flex; align-items: center; }
.t2a-cmp .t2a-cmp-partner-card__logo img { max-height: 52px; max-width: 200px; }
.t2a-cmp .t2a-cmp-partner-card__name { font-weight: 700; color: var(--cmp-ink); font-size: 24px; }
.t2a-cmp .t2a-cmp-partner-card p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ============================================================
   "NAPSALI O NÁS" — press mention cards (external links)
   ============================================================ */
.t2a-cmp .t2a-cmp-press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t2a-cmp .t2a-cmp-press-card {
  background: #fff; border-radius: var(--cmp-radius-lg); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 12px 34px rgba(22, 36, 61, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-cmp .t2a-cmp-press-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(22, 36, 61, 0.14); }
.t2a-cmp .t2a-cmp-press-card__logo { height: 44px; display: flex; align-items: center; }
.t2a-cmp .t2a-cmp-press-card__logo img { max-height: 38px; }
.t2a-cmp .t2a-cmp-press-card__title { font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--cmp-ink); text-wrap: pretty; }
.t2a-cmp .t2a-cmp-press-card__cta { margin-top: auto; color: var(--cmp-blue); font-weight: 700; font-size: 15px; }

/* ============================================================
   "TALK2AMY A KONKURENCE" — comparison table. New section, no equivalent
   elsewhere on the site — sizes match the site's own body-text convention
   (16px) rather than the source mockup's 15px.
   ============================================================ */
.t2a-cmp .t2a-cmp-compare {
  max-width: 960px; margin: 0 auto; background: #fff; border-radius: var(--cmp-radius-lg);
  box-shadow: 0 12px 34px rgba(22, 36, 61, 0.08); overflow: hidden;
}
/* Mobile-only duplicate 2-column tables (see markup) — hidden on desktop,
   swapped in for the 3-column .t2a-cmp-compare--full below xl. */
.t2a-cmp .t2a-cmp-compare--mobile { display: none; }
.t2a-cmp .t2a-cmp-compare-mobile-head { display: none; }
.t2a-cmp .t2a-cmp-compare__row { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; }
.t2a-cmp .t2a-cmp-compare__row + .t2a-cmp-compare__row { border-top: 1px solid var(--cmp-line); }
.t2a-cmp .t2a-cmp-compare__row--head { background: var(--cmp-line); color: #000; }
.t2a-cmp .t2a-cmp-compare__cell { padding: 20px 24px; font-size: 16px; line-height: 1.55; }
.t2a-cmp .t2a-cmp-compare__label { font-weight: 700; color: var(--cmp-ink); }
.t2a-cmp .t2a-cmp-compare__row--head .t2a-cmp-compare__label { padding: 18px 28px; color: #000; }
.t2a-cmp .t2a-cmp-compare__us {
  background: var(--cmp-bg-soft); color: var(--cmp-ink); font-weight: 600;
  box-shadow: -6px 0 10px -6px rgba(10, 108, 193, 0.25), 6px 0 10px -6px rgba(10, 108, 193, 0.25);
  position: relative; z-index: 1;
}
.t2a-cmp .t2a-cmp-compare__row--head .t2a-cmp-compare__us {
  background: var(--cmp-blue-dark); color: #fff; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 -6px 10px -6px rgba(10, 108, 193, 0.25), -6px 0 10px -6px rgba(10, 108, 193, 0.25), 6px 0 10px -6px rgba(10, 108, 193, 0.25);
}
.t2a-cmp .t2a-cmp-compare__row:last-child .t2a-cmp-compare__us {
  box-shadow: 0 6px 10px -6px rgba(10, 108, 193, 0.25), -6px 0 10px -6px rgba(10, 108, 193, 0.25), 6px 0 10px -6px rgba(10, 108, 193, 0.25);
}
.t2a-cmp .t2a-cmp-compare__badge {
  background: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
.t2a-cmp .t2a-cmp-compare__them { color: var(--cmp-muted); }
.t2a-cmp .t2a-cmp-compare__row--head .t2a-cmp-compare__them { font-weight: 600; color: #000; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-cmp .t2a-cmp-split { grid-template-columns: 1fr; gap: 36px; }
  .t2a-cmp .t2a-cmp-split--reverse .t2a-cmp-split__media,
  .t2a-cmp .t2a-cmp-split--reverse .t2a-cmp-split__body { order: initial; }
  .t2a-cmp .t2a-cmp-press-grid { grid-template-columns: 1fr; }
  .t2a-cmp .t2a-cmp-science-panel { padding: 40px 28px; }
  .t2a-cmp .t2a-cmp-compare__cell { padding: 14px 20px; }
  .t2a-cmp .t2a-cmp-compare__row--head .t2a-cmp-compare__us { border-radius: 0; }
  /* Swap the 3-column table for the two stacked 2-column ones (label+them,
     then label+us) — same per-column fr ratios as the full table's own
     grid-template-columns (1fr label / 1.4fr us / 1.2fr them), just with
     the third/second column dropped from each. */
  .t2a-cmp .t2a-cmp-compare--full { display: none; }
  .t2a-cmp .t2a-cmp-compare--mobile { display: block; }
  .t2a-cmp .t2a-cmp-compare--them-only { margin-top: 24px; }
  .t2a-cmp .t2a-cmp-compare--them-only .t2a-cmp-compare__row { grid-template-columns: 1fr 1.2fr; }
  .t2a-cmp .t2a-cmp-compare--us-only .t2a-cmp-compare__row { grid-template-columns: 1fr 1.4fr; }
  /* "Běžný produkt" / "Talk2Amy" — centered sub-heading above each mobile
     table, in the same card-title style used site-wide (e.g.
     .t2a-cmp-usage-card__title / .t2a-cmp-benefit-card__title in
     companies-redesign.css: 24px/700/--cmp-ink), not the page's own
     40px/800 .t2a-cmp-title — this is a sub-heading over a table, not a
     section title. */
  .t2a-cmp .t2a-cmp-compare-mobile-head {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--cmp-ink);
    text-align: center;
    margin: 32px 0 16px;
  }
}
@media (max-width: 560px) {
  .t2a-cmp .t2a-cmp-partners-grid { grid-template-columns: 1fr; }
}