/**
 * Trainer page styles (msa-theme).
 *
 * Namespaced under .trainer-page so nothing here can leak into the
 * homepage or other templates. Reuses the global design tokens from
 * main.css (--night, --sky, --green, --red, --radius, --shadow, etc.).
 */

/* ---- Section rhythm helpers (scoped) ---- */
.trainer-page .trainer-section-sub{
  margin:14px auto 0;
  max-width:720px;
}

/* ---- Hero adjustments (reuses .hero markup) ---- */
.trainer-hero .hero-copy{max-width:600px}
.trainer-hero .court-card .coach-silhouette{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.trainer-hero .floating-chip .ball-icon{background:var(--sky)}

/* ---- Generic trainer card (Про тренера / Кому підходять / Trust) ---- */
.trainer-grid{display:grid;gap:20px}
.trainer-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.trainer-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.trainer-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--accent,var(--noble));
  box-shadow:0 18px 54px -44px rgba(35,43,87,.5);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.trainer-card:hover{
  transform:translateY(-4px);
  box-shadow:0 32px 72px -44px rgba(35,43,87,.62);
}
.trainer-card .trainer-card-icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:16px;
  background:color-mix(in srgb,var(--accent,var(--noble)),transparent 86%);
  color:var(--accent,var(--noble));
  font-size:1.4rem;
  font-weight:950;
}
.trainer-card h3{margin:6px 0 0;color:var(--night);font-size:1.22rem;line-height:1.18}
.trainer-card p{margin:0;color:var(--muted);font-size:.96rem}

/* ---- Про тренера: split copy + cards ---- */
.trainer-about-layout{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:44px;
  align-items:center;
}
.trainer-about-copy .lead{margin-top:18px}

/* ---- Філософія: accent pullquote + principles ---- */
.trainer-philosophy-quote{
  margin:0 0 32px;
  padding:30px 34px;
  border-left:6px solid var(--green);
  border-radius:22px;
  background:#fff;
  color:var(--night);
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.32;
  font-weight:900;
  box-shadow:var(--shadow);
}
.trainer-philosophy-quote .quote-mark{
  display:block;
  margin-bottom:6px;
  color:var(--sky);
  font-size:2.6rem;
  line-height:.6;
  font-weight:950;
}
.trainer-principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.trainer-principle{
  position:relative;
  padding:24px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 44px -36px rgba(35,43,87,.55);
}
.trainer-principle .trainer-principle-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent,var(--green));
  box-shadow:inset 0 0 0 4px #fff,0 0 0 1px var(--accent,var(--green));
  margin-bottom:16px;
}
.trainer-principle b{display:block;color:var(--night);font-size:1.06rem;line-height:1.25}

/* ---- Як проходять тренування: 4 numbered steps (reuses .step) ---- */
.steps.trainer-steps--four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- Trust block reveal animation (zoom/scale-in) ---- */
@keyframes trainerZoomIn{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
.trainer-reveal{opacity:0}
.trainer-reveal.is-visible{
  animation:trainerZoomIn .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.trainer-reveal.is-visible:nth-child(2){animation-delay:.12s}
.trainer-reveal.is-visible:nth-child(3){animation-delay:.24s}
.trainer-reveal.is-visible:nth-child(4){animation-delay:.36s}

/* ---- Photo / media placeholders (Тренування в дії) ---- */
.trainer-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.trainer-photo{
  position:relative;
  min-height:300px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--night),var(--accent,var(--noble)));
  box-shadow:0 18px 50px -34px rgba(35,43,87,.7);
  transition:transform .25s ease,box-shadow .25s ease;
}
.trainer-photo:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 70px -40px rgba(35,43,87,.8);
}
/* tennis-court styling lines on the placeholder */
.trainer-photo:before{
  content:"";
  position:absolute;
  inset:22px 30px;
  border:2px solid rgba(91,197,242,.22);
  border-radius:6px;
}
.trainer-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(20,26,53,.86),rgba(20,26,53,.12) 70%);
}
.trainer-photo .trainer-photo-tag{
  position:absolute;
  z-index:2;
  top:16px;
  left:16px;
  padding:6px 11px;
  border-radius:999px;
  background:#fff;
  color:var(--accent,var(--night));
  font-weight:950;
  font-size:.74rem;
}
.trainer-photo .trainer-photo-label{
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:18px;
  color:#fff;
  font-size:1.12rem;
  font-weight:900;
  line-height:1.2;
}
/* hint that this slot is meant to be replaced by a real image */
.trainer-photo .trainer-photo-hint{
  position:absolute;
  z-index:2;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  text-align:center;
  color:rgba(255,255,255,.5);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
}

/* ---- Final CTA ---- */
.trainer-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  border-radius:34px;
  background:linear-gradient(135deg,var(--night),var(--noble));
  color:#fff;
  text-align:center;
  box-shadow:var(--shadow);
}
.trainer-cta:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(45% 60% at 80% 10%,rgba(91,197,242,.22),transparent 60%);
  pointer-events:none;
}
.trainer-cta .eyebrow{color:#fff;justify-content:center}
.trainer-cta h2{position:relative;color:#fff;margin:12px 0 0}
.trainer-cta p{
  position:relative;
  margin:16px auto 0;
  max-width:620px;
  color:#d9def4;
  font-size:1.05rem;
}
.trainer-cta .hero-actions{
  position:relative;
  justify-content:center;
  margin-top:28px;
}

/* ---- Final contact block (#trainer-contact) ---- */
.trainer-contact-wrap{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:24px;
  align-items:stretch;
}
.trainer-contact-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,4vw,40px);
  border-radius:30px;
  background:linear-gradient(135deg,var(--night),var(--noble));
  color:#fff;
  box-shadow:var(--shadow);
}
.trainer-contact-panel:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(46% 60% at 82% 8%,rgba(91,197,242,.22),transparent 60%);
  pointer-events:none;
}
.trainer-contact-panel .eyebrow{color:#fff}
.trainer-contact-panel h2{position:relative;color:#fff;margin-top:12px}
.trainer-contact-panel p{position:relative;margin:16px 0 0;color:#d9def4;max-width:440px}
.trainer-contact-links{position:relative;display:grid;gap:12px;margin-top:26px}
.trainer-contact-links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:850;
  backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s ease;
}
.trainer-contact-links a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}

.trainer-contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(24px,3.5vw,32px);
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.trainer-field{display:grid;gap:7px}
.trainer-field label{color:var(--night);font-weight:900;font-size:.88rem}
.trainer-field input,
.trainer-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:15px;
  padding:13px 14px;
  color:var(--ink);
  background:var(--tint);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.trainer-field input:focus,
.trainer-field textarea:focus{
  border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(91,197,242,.22);
}
.trainer-field textarea{min-height:112px;resize:vertical}
.trainer-contact-submit{margin-top:6px;align-self:flex-start}
.trainer-form-note{margin:4px 0 0;color:var(--muted);font-size:.82rem}

/* Honeypot — приховане поле-пастка, недоступне для людей, але видиме ботам */
.trainer-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Повідомлення про результат відправки форми */
.trainer-form-message{
  margin:0 0 4px;
  padding:14px 16px;
  border-radius:16px;
  font-weight:850;
  font-size:.92rem;
  line-height:1.4;
  border:1px solid transparent;
}
.trainer-form-message-success{
  color:#3c5a13;
  background:color-mix(in srgb,var(--green) 18%,#fff);
  border-color:color-mix(in srgb,var(--green) 45%,transparent);
}
.trainer-form-message-error{
  color:#9a1c1e;
  background:color-mix(in srgb,var(--red) 12%,#fff);
  border-color:color-mix(in srgb,var(--red) 40%,transparent);
}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .trainer-grid--4,.trainer-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.trainer-steps--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trainer-principles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .trainer-about-layout{grid-template-columns:1fr;gap:30px}
  .trainer-grid--3,.trainer-grid--4,.trainer-media-grid{grid-template-columns:1fr}
  .steps.trainer-steps--four{grid-template-columns:1fr}
  .trainer-principles{grid-template-columns:1fr}
  .trainer-philosophy-quote{padding:24px}
  .trainer-contact-wrap{grid-template-columns:1fr}
  .trainer-contact-submit{align-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .trainer-reveal{opacity:1}
  .trainer-reveal.is-visible{animation:none}
}

/* =========================================================================
 * TRAINERS CPT — archive (/trenery/) + single trainer
 * ====================================================================== */

/* ---- Archive hero (centered, shorter than the homepage hero) ---- */
.trainers-hero{
  min-height:auto;
  padding:148px 0 88px;
  text-align:center;
}
.trainers-hero-inner{
  position:relative;
  z-index:2;
  max-width:760px;
  margin-inline:auto;
}
.trainers-hero .hero-badge{display:inline-flex;margin-bottom:18px}
.trainers-hero h1{margin-inline:auto}
.trainers-hero .hero-copy{margin-inline:auto;margin-top:18px}

/* ---- Trainers grid + cards ---- */
.trainers-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.trainers-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 18px 54px -44px rgba(35,43,87,.5);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.trainers-card:hover{
  transform:translateY(-5px);
  box-shadow:0 34px 74px -42px rgba(35,43,87,.62);
  border-color:color-mix(in srgb,var(--sky),transparent 55%);
}
.trainers-card-photo{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:linear-gradient(135deg,var(--night),var(--noble));
}
.trainers-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.trainers-card:hover .trainers-card-img{transform:scale(1.04)}
.trainers-card-ph{display:block;width:100%;height:100%}
.trainers-card-ph svg{width:100%;height:100%;object-fit:cover}
.trainers-card-body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.trainers-card-role{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 11px;
  border-radius:999px;
  background:var(--tint);
  color:var(--noble);
  font-size:.74rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.trainers-card-name{margin:2px 0 0;color:var(--night);font-size:1.32rem;line-height:1.15}
.trainers-card-name a{color:inherit}
.trainers-card-name a:hover{color:var(--noble)}
.trainers-card-desc{margin:0;color:var(--muted);font-size:.95rem}
.trainers-card-spec{margin:0;color:var(--night);font-size:.86rem;font-weight:800}
.trainers-card-spec span{color:var(--muted);font-weight:700}
.trainers-card-btn{margin-top:auto;align-self:flex-start}

/* ---- Empty state ---- */
.trainers-empty{
  max-width:560px;
  margin:0 auto;
  padding:clamp(36px,5vw,56px);
  text-align:center;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.trainers-empty-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:22px;
  background:color-mix(in srgb,var(--sky),transparent 86%);
  color:var(--noble);
}
.trainers-empty h2{margin:0 0 12px;color:var(--night)}
.trainers-empty p{margin:0 auto 24px;max-width:420px;color:var(--muted)}

/* ---- Single trainer hero photo ---- */
.trainer-single-hero .trainer-single-img{width:100%;height:100%;object-fit:cover}
.trainer-single-role{
  margin:14px 0 0;
  color:var(--sky);
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.01em;
}

/* ---- Single trainer: bio + meta sections ---- */
.trainer-bio{
  max-width:760px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
}
.trainer-bio h2,.trainer-bio h3{color:var(--night)}
.trainer-bio a{color:var(--noble);text-decoration:underline}
.trainer-bio img{border-radius:18px;margin:10px 0}

.trainer-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.trainer-meta-card{
  padding:26px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--accent,var(--noble));
  box-shadow:0 16px 48px -40px rgba(35,43,87,.5);
}
.trainer-meta-card h3{margin:0 0 10px;color:var(--night);font-size:1.18rem}
.trainer-meta-card p{margin:0;color:var(--muted);line-height:1.6}

.trainer-chips{display:flex;flex-wrap:wrap;gap:8px}
.trainer-chip{
  padding:8px 13px;
  border-radius:999px;
  background:var(--tint);
  color:var(--night);
  font-size:.82rem;
  font-weight:850;
}

/* ---- Achievements ---- */
.trainer-achievements{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  max-width:820px;
}
.trainer-achievement{
  position:relative;
  padding:16px 18px 16px 50px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:var(--night);
  font-weight:800;
  box-shadow:0 14px 40px -34px rgba(35,43,87,.5);
}
.trainer-achievement:before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--green);
  box-shadow:inset 0 0 0 5px #fff;
}

/* ---- Single quote tweak ---- */
.trainer-single-quote{max-width:880px;margin-inline:auto}

/* ---- Responsive: trainers ---- */
@media (min-width:1101px){
  /* keep the trainer heroes compact (override the tall homepage hero) */
  .trainers-hero{min-height:auto;padding:150px 0 90px}
}
@media (max-width:1100px){
  .trainers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .trainers-grid{grid-template-columns:1fr}
  .trainer-meta-grid{grid-template-columns:1fr}
  .trainers-hero{padding:120px 0 60px}
}
@media (max-width:480px){
  .trainers-card-btn,.trainers-empty .btn{width:100%}
}

/* =========================================================================
 * SINGLE TRAINER — details moved INTO the dark hero (glass cards)
 * ====================================================================== */

/* Hero now holds the details block: keep it dense (not full-height) and
 * drop the white bottom fade so the glass cards stay crisp on dark blue. */
.trainer-single-hero{min-height:auto;padding-top:126px;padding-bottom:64px}
.trainer-single-hero:after{display:none}
.trainer-single-hero .hero-grid{gap:40px;align-items:center}

.trainer-hero-details{
  position:relative;
  z-index:2;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.16);
}
.trainer-hero-details-head{margin-bottom:22px}
.trainer-hero-details-head .eyebrow{color:#fff}
.trainer-hero-details-head .eyebrow:before{background:var(--green)}
.trainer-hero-details-head h2{
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.12;
  font-weight:950;
}

.trainer-hero-details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:16px;
}
.trainer-hero-detail-card{
  position:relative;
  padding:22px 20px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 24px 56px -34px rgba(8,12,38,.95),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
}
.trainer-hero-detail-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:var(--accent,var(--sky));
  opacity:.95;
}
.trainer-hero-detail-card h3{
  margin:0 0 9px;
  color:#fff;
  font-size:1.06rem;
  line-height:1.2;
}
.trainer-hero-detail-card p{
  margin:0;
  color:rgba(236,241,255,.92);
  font-size:.93rem;
  line-height:1.55;
}
.trainer-hero-detail-card.is-education{--accent:var(--sky)}
.trainer-hero-detail-card.is-experience{--accent:var(--green)}
.trainer-hero-detail-card.is-specialization{--accent:var(--red)}
.trainer-hero-detail-card.is-groups{--accent:var(--noble)}

/* Chips adapted for the dark hero */
.trainer-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.trainer-hero-chip{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#eef3ff;
  font-size:.8rem;
  font-weight:850;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Premium framing for the hero photo */
.trainer-single-photo{
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(91,197,242,.16),rgba(71,79,157,.2));
  box-shadow:0 54px 120px -50px rgba(6,10,34,1),inset 0 1px 0 rgba(255,255,255,.2);
}
.trainer-single-hero .hero-visual{max-width:430px}

/* Social icons under the photo */
.trainer-socials{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}
.trainer-social-link{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  color:#eef3ff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 16px 36px -26px rgba(6,10,34,.9);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.trainer-social-link:hover,
.trainer-social-link:focus-visible{
  transform:translateY(-3px);
  background:var(--sky);
  border-color:var(--sky);
  color:var(--night);
  outline:none;
}
.trainer-social-link svg{display:block}

@media (min-width:1101px){
  /* override the tall homepage hero so the single hero hugs its content */
  .trainer-single-hero{min-height:auto;padding-top:134px;padding-bottom:72px}
}
@media (max-width:820px){
  .trainer-single-hero{padding-top:104px;padding-bottom:48px}
  .trainer-single-hero .hero-grid{gap:28px}
  .trainer-hero-details{margin-top:28px;padding-top:24px}
  .trainer-hero-detail-card{padding:18px 16px}
  .trainer-socials{margin-top:16px;gap:14px}
}