/*!
 * ZZZ Fitness Club — Trainer Page Stylesheet
 *
 * Depends on assets/css/main.css (loaded first).
 * about.css provides the base .page-hero styles.
 *
 * Sections:
 *   1.  Page Hero — trainer bg image override
 *   2.  Stats Bar
 *   3.  Trainers Grid & Cards
 *   4.  Contact Highlights
 *   5.  Responsive overrides
 *
 * @package ZZZ_Fitness_Theme
 * @version 1.0.0
 */

/* ============================================================================
   1. PAGE HERO — trainer-specific background image
   ============================================================================ */

.page-hero--trainer::before {
  background-image:
    linear-gradient(110deg,
      rgba(26,26,26,0.95) 0%,
      rgba(26,26,26,0.78) 38%,
      rgba(26,26,26,0.55) 75%,
      rgba(26,26,26,0.45) 100%),
    url('https://zzzfitnessclub.com/wp-content/uploads/2026/04/85_11zon-scaled.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ghost button variant used in hero */
.btn-ghost {
  background: rgba(0,0,0,0.4);
  color: var(--text);
  border: 1.5px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: .35s var(--ease);
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(211,47,47,0.12);
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.4);
}

/* Hero CTA row */
.page-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.page-hero-ctas .btn { white-space: nowrap; }

@media (max-width: 600px) {
  .page-hero--trainer { padding: 80px 0 70px; }
  .page-hero-ctas { width: 100%; }
  .page-hero-ctas .btn { flex: 1; min-width: 0; justify-content: center; }
}


/* ============================================================================
   2. STATS BAR
   ============================================================================ */

.stats-bar {
  background: #050505;
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 760px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item { display: flex; flex-direction: column; gap: 6px; }

.stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================================
   4. CONTACT HIGHLIGHTS
   ============================================================================ */

.contact-hl-section {
  padding: 100px 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(211,47,47,0.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(245,124,0,0.07), transparent 45%),
    var(--bg);
  border-top: 1px solid var(--line);
}

.contact-hl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}
@media (min-width: 760px)  { .contact-hl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .contact-hl-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.ch-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 30px 24px;
  overflow: hidden;
  transition:
    border-color .35s var(--ease), background .35s var(--ease),
    transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; color: inherit;
}
.ch-card:hover {
  border-color: rgba(211,47,47,0.45);
  background: linear-gradient(180deg, rgba(211,47,47,0.08), rgba(255,255,255,0.02));
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.ch-ic {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(211,47,47,0.15);
  border: 1px solid rgba(211,47,47,0.28);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.ch-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ch-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase;
}
.ch-value {
  font-family: 'Inter', sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--text); line-height: 1.3; letter-spacing: -0.01em;
  word-break: break-word;
}
.ch-value a { color: inherit; transition: color .25s var(--ease); }
.ch-value a:hover { color: var(--accent-hover); }

.ch-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: auto; }

.ch-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.ch-link:hover { color: var(--accent-hover); transform: translateX(3px); }


/* ============================================================================
   5. RESPONSIVE OVERRIDES
   ============================================================================ */

/* Tablet */
@media (max-width: 1049px) {
  .trainers-section { padding: 80px 0; }
  .trainers-grid { gap: 12px; }
}

/* Mobile */
@media (max-width: 768px) {
  .stats-bar     { padding: 20px 0; }
  .stats-grid    { gap: 18px 12px; }
  .stat-num      { font-size: 26px; }
  .stat-label    { font-size: 10px; letter-spacing: 0.06em; }

  .trainers-section  { padding: 56px 0; }
  .trainers-grid     { gap: 10px; }
  .trainer-card      { aspect-ratio: 4/5; }
  .trainer-card .photo { filter: grayscale(15%); }
  .trainer-card .name-base { padding: 14px 14px; }
  .trainer-card .name-base h3   { font-size: 15px; letter-spacing: -0.02em; }
  .trainer-card .name-base .role { font-size: 8.5px; letter-spacing: 0.12em; margin-top: 5px; }
  .trainer-card .panel h3       { font-size: 16px; }
  .trainer-card .panel .role    { font-size: 9px; letter-spacing: 0.14em; }
  .trainer-card .panel .bio     { font-size: 11.5px; line-height: 1.5; margin-top: 12px; }
  .trainer-card .panel .creds span { font-size: 9px; padding: 4px 8px; }
  .trainer-card .panel .socials a  { width: 32px; height: 32px; }

  .contact-hl-section { padding: 56px 0; }
  .contact-hl-grid    { margin-top: 28px; gap: 12px; grid-template-columns: 1fr; }
  .ch-card      { padding: 22px 20px; gap: 12px; border-radius: 14px; }
  .ch-ic        { width: 44px; height: 44px; border-radius: 12px; }
  .ch-ic svg    { width: 20px; height: 20px; }
  .ch-label     { font-size: 10.5px; letter-spacing: 0.14em; }
  .ch-value     { font-size: 16px; }
  .ch-sub       { font-size: 12.5px; }
  .ch-link      { font-size: 11px; }
}

/* Small phone */
@media (max-width: 480px) {
  .stats-bar   { padding: 16px 0; }
  .stats-grid  { gap: 14px 10px; }
  .stat-num    { font-size: 22px; }
  .stat-label  { font-size: 9.5px; }

  .trainers-grid { gap: 8px; }
  .trainer-card .name-base { padding: 10px 10px 12px; }
  .trainer-card .name-base h3   { font-size: 14px; }
  .trainer-card .name-base .role { font-size: 8px; margin-top: 4px; }

  .ch-card  { padding: 20px 16px; }
  .ch-value { font-size: 15px; }
  .ch-sub   { font-size: 12px; }
}

/* Tiny phone */
@media (max-width: 360px) {
  .stat-num  { font-size: 20px; }
  .stat-label { font-size: 9px; }
  .trainers-grid { gap: 6px; }
  .trainer-card .name-base { padding: 8px 8px 10px; }
  .trainer-card .name-base h3   { font-size: 13px; }
  .trainer-card .name-base .role { font-size: 7.5px; }
}