/* ==========================================================
   PH MARX — página HYROX (complemento do styles.css)
   ========================================================== */

/* dualidade em 4:3 — fotos de chegada e de box são horizontais */
.duality-media{aspect-ratio:4/3}
.duality-side p a{color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue)}
.duality-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;min-height:48px;
  font-weight:800;font-size:.95rem;color:var(--white);
  border-bottom:1px solid var(--blue);padding-bottom:2px;transition:color .25s,border-color .25s
}
.duality-link:hover{color:var(--blue)}

/* ---------- antes, durante e depois da prova ---------- */
.hx-modo{padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--line)}
.hx-modo .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.hx-modo-grid{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:hxm}
.hx-modo-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,3vw,30px);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line-2);overflow:hidden
}
.hx-modo-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--line-2)
}
.hx-modo-card.is-equipe::before{background:var(--blue)}
.hx-modo-card.is-livre::before{background:var(--accent)}
.hx-modo-tag{
  align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--silver)
}
.hx-modo-card.is-equipe .hx-modo-tag{color:var(--blue);border-color:rgba(94,155,255,.4);background:var(--blue-soft)}
.hx-modo-card.is-livre .hx-modo-tag{color:#000;background:var(--accent);border-color:var(--accent)}
.hx-modo-card h3{font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.2}
.hx-modo-card p{font-size:.95rem;margin:0}
.hx-modo-card p strong{color:var(--white)}
.hx-modo-link{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;min-height:44px;
  font-weight:800;font-size:.9rem;color:var(--white)
}
.hx-modo-card.is-equipe .hx-modo-link{color:var(--blue)}
.hx-modo-link:hover{text-decoration:underline;text-underline-offset:4px}
.hx-modo-nota{margin-top:16px;font-size:.8rem;color:#7d7d7d}
@media (min-width:900px){
  .hx-modo-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .hx-modo-card.is-equipe{transform:translateY(-10px);box-shadow:0 24px 60px -30px rgba(94,155,255,.55)}
}

/* ---------- portfólio ---------- */
.hx-galeria-cta{display:flex;justify-content:center;margin-top:clamp(20px,3vw,32px)}
@media (max-width:560px){.hx-galeria-cta .btn{width:100%}}

/* ---------- serviços: 4 cards em 2x2 no desktop (não 3+1) ---------- */
@media (min-width:900px){.hx-services{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.hx-services{grid-template-columns:repeat(4,1fr)}}
.hx-services .card p a{color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue)}

/* ---------- onde + outras provas ---------- */
.hx-outras{
  margin-top:clamp(28px,4vw,40px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line-2);
  display:grid;gap:8px;max-width:72ch
}
.hx-outras h3{font-size:1.05rem}
.hx-outras p{font-size:.95rem}

/* ---------- ritmo: menos vazio entre seções nesta página ---------- */
main > section#portfolio,main > section#servicos,main > section.coverage,main > section.faq,main > section.about{padding-block:clamp(56px,8vw,112px)}
.duality-side h2{max-width:18ch}
@media (max-width:700px){
  .hero .scroll-hint{display:none}
  /* portfólio em 2 colunas no celular: metade da rolagem, fotos ainda grandes */
  #portfolio .gallery{column-count:2;column-gap:8px}
  #portfolio .gallery .g-item{margin-bottom:8px;border-radius:10px}
  #portfolio .g-item .meta{padding:10px}
  #portfolio .g-item .meta strong{font-size:.8rem}
}

/* ---------- atletas estrangeiros: faixa em inglês logo após as opções ---------- */
.hx-en{
  margin-top:clamp(20px,3vw,28px);display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;
  padding:clamp(18px,2.6vw,24px);border-radius:var(--radius);
  border:1px solid rgba(94,155,255,.35);background:linear-gradient(90deg,var(--blue-soft),transparent 70%),var(--surface)
}
.hx-en-flag{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#000;font-weight:800;font-size:.85rem;letter-spacing:.04em
}
.hx-en-tx strong{display:block;font-size:1.02rem;line-height:1.3;margin-bottom:4px}
.hx-en-tx p{margin:0;font-size:.92rem}
.hx-en-btn{grid-column:1 / -1;justify-self:start;min-height:48px;padding:0 22px;font-size:.9rem}
@media (min-width:900px){.hx-en{grid-template-columns:auto 1fr auto}.hx-en-btn{grid-column:auto;justify-self:end}}
@media (max-width:560px){.hx-en-btn{width:100%;justify-self:stretch}}