/* ============================================================
   Home ("/") — page-specific additions on top of the shared
   .t2a-cmp primitives (companies-redesign.css) and the AboutUs
   split-section primitive (aboutus-redesign.css). Only what Home
   needs and nothing else already provides: the 2-up "Vyberte, co
   vás zajímá" card grid.
   ============================================================ */

/* Hero title accent: swap the shared .text-psychologistLight purple
   (#823dad) for the brand blue var(--cmp-blue) — scoped here instead of
   touching the shared class, which is reused in 180+ other localized
   strings site-wide. */
.t2a-cmp .t2a-cmp-hero__title .text-psychologistLight { color: var(--cmp-blue) !important; }

/* Hero grid: the shared .t2a-cmp-hero__grid (Companies) reserves 64px of
   padding-bottom for its CTA row — Home has none, so that padding just
   left a gap under the photo instead of letting it sit flush with the
   section's bottom edge. Also center the text column vertically instead
   of the shared default (bottom-aligned, tuned for Companies' longer
   hero copy) since Home's hero text is short. */
.t2a-cmp .t2a-home-hero .t2a-cmp-hero__grid { padding-bottom: 0; }
.t2a-cmp .t2a-home-hero__text { align-self: center; }
.t2a-cmp .t2a-home-hero__photo-wrap { display: flex; justify-content: center; align-items: flex-end; }

.t2a-cmp .t2a-home-choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.t2a-cmp .t2a-home-choose-card {
  /* Matches the hero's gradient end stop (companies-redesign.css
     .t2a-cmp-hero) instead of --cmp-bg-soft, so the tile reads as a
     continuation of the block above rather than a preview of the one
     below (which also happens to use --cmp-bg-soft). */
  background: #e7f2fd;
  /* Same soft-lift shadow as the "Pro koho je Talk2Amy" audience cards on
     Organizations (.t2a-org-audience-card, organizations-redesign.css) —
     overrides the shared .t2a-glow-tile's blue ambient halo. */
  box-shadow: 0 8px 26px rgba(22, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 36px 36px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--cmp-muted);
  text-decoration: none;
}
.t2a-cmp .t2a-home-choose-card:hover {
  color: var(--cmp-muted);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(22, 36, 61, 0.14);
}
/* letter-spacing: normal overrides the sitewide h1-h6 { letter-spacing:
   0.1rem } (_general.scss, meant for page/block titles) — this is an <h3>
   for semantics/font-family, but visually plays the "subtitle" role, whose
   other instances site-wide are plain <div>s that never inherit that rule. */
.t2a-cmp .t2a-home-choose-card__title { font-size: 24px; font-weight: 700; color: var(--cmp-ink); margin: 0; letter-spacing: normal; }
.t2a-cmp .t2a-home-choose-card__text { margin: 0; font-size: 16px; line-height: 1.6; max-width: 360px; }
.t2a-cmp .t2a-home-choose-card img { display: block; width: 100%; max-width: 400px; height: auto; margin-top: 14px; }

/* Organizations tile photo: fades out before the card's own bottom edge
   (unlike its own image box, which always reaches it) so it leaves the
   same kind of gap the Individuals photo already has baked into its
   source asset. Desktop tolerates a tighter gap than mobile. */
.t2a-cmp .t2a-home-org-img {
  mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
}

@media (max-width: 991px) {
  .t2a-cmp .t2a-home-choose-grid { grid-template-columns: 1fr; }

  .t2a-cmp .t2a-home-org-img {
    mask-image: linear-gradient(180deg, #000 45%, transparent 90%);
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 90%);
  }
}

/* "Jak Talk2Amy pomáhá" split section — on request, the image column widened
   to match the "Vyberte, co vás zajímá" tiles above it (.t2a-home-choose-grid:
   1fr 1fr, 32px gap, same .t2a-cmp-container). Matching that exact grid
   formula (not just a one-off px snapshot) keeps the two widths equal at any
   desktop viewport, not just one. Higher specificity (3 classes) than the
   shared .t2a-cmp-split--reverse (2 classes) it layers on top of, so it wins
   regardless of source order — and it's scoped to this block alone
   (.t2a-home-help), not the shared .t2a-cmp-split--reverse class AboutUs
   also uses. The body text gets its own cap narrower than its now-equal
   column, opening up more visual breathing room next to the wider image.
   Wrapped in the same min-width:1200px the split's own mobile collapse
   (aboutus-redesign.css, max-width:1199.98px) uses — desktop only, so it
   never fights that single-column collapse below xl. */
@media (min-width: 1200px) {
  .t2a-cmp .t2a-home-help.t2a-cmp-split { grid-template-columns: 1fr 1fr; gap: 32px; }
  .t2a-cmp .t2a-home-help .t2a-cmp-split__body { max-width: 440px; }
}