/*
 * Site — About page.
 *
 * Loaded on is_page_template('page-about.php') via `site-page-about`
 * handle in theme/inc/60-enqueue.php. Template: page-about.php.
 *
 * Uses shared .team-grid from global.css. This module adds the motto
 * block above the team grid and the about-team container.
 */

/* Slim page-header on O nás (no crumbs, no lead) */
.page-header { padding-bottom: 24px; }

/* Motto block — full-width section above the team grid */
.motto-block {
  padding: 36px var(--gutter) calc(60px * var(--scale));
}
.motto {
  display: grid; grid-template-columns: minmax(0, 720px) 1fr;
  gap: 80px;
}
.motto p {
  /* Quote treated as display — linear scale on --scale. 28 × 0.9 ≈ 25px
     @1440 (matches the previous clamped value), 34px @1920. */
  font-size: calc(28px * var(--scale));
  line-height: 1.35; font-weight: 400;
  letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}
.motto p em { color: var(--accent); font-style: italic; font-weight: 500; }
.motto .small {
  margin-top: 22px;
  font-size: calc(16px * var(--read-scale)); line-height: 1.6; color: var(--ink-dim); text-wrap: pretty;
}

/* Team — full page width, uses shared .team-grid from global.css */
.about-team {
  padding: 0 var(--gutter) calc(100px * var(--scale));
}
@media (max-width: 768px) {
  .motto-block { padding: 24px var(--gutter) 48px; }
  .motto { grid-template-columns: 1fr; gap: 24px; }
  .motto p { font-size: clamp(20px, 5.2vw, 24px); }
  .motto .small { margin-top: 16px; font-size: 15px; }
  .about-team { padding: 0 var(--gutter) 60px; }
}

/* Tablet (769–1024px) — motto stacks to a single column so the
   paragraph keeps a comfortable reading width. */
@media (min-width: 769px) and (max-width: 1024px) {
  .motto { grid-template-columns: 1fr; gap: 32px; }
}