/* Training page */
.training-page { background: #f8f7f2; color: var(--ink); }
.training-hero { min-height: 620px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.93) 32%, rgba(5,5,5,.28) 64%, rgba(5,5,5,.72) 100%), url("../images/boxing-gym-near-me-west-palm-beach.png") center 60px / cover no-repeat, #050505; }
.training-hero .wrap { height: 100%; max-width: 1470px; display: flex; align-items: center; padding-top: 2rem; padding-bottom: 4.7rem; }
.training-hero-copy { max-width: 680px; position: relative; z-index: 1; }
.training-hero .eyebrow { margin: 0 0 12px; }
.training-hero h1 { margin: 0; max-width: 760px; font: 800 clamp(3.8rem, 6.8vw, 7.2rem)/.88 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.training-hero h1 em, .training-hero h1 span { display: block; }
.training-hero .lede { max-width: 670px; margin: 20px 0 22px; color: #fff; font-size: clamp(1.15rem, 1.55vw, 1.75rem); line-height: 1.14; }
.training-hero .button { font-size: clamp(1rem, 1.15vw, 1.3rem); padding: 17px 25px; }
.training-hero-note { position: absolute; top: calc(100% + 32px); left: 0; margin: 0; font: 800 .82rem/1.35 var(--display); letter-spacing: .25em; text-transform: uppercase; }
.training-intro { padding-top: 60px; padding-bottom: 56px; }
.training-intro .section-title { margin: 0; text-align: center; font-size: clamp(2.7rem, 4.45vw, 5.3rem); line-height: .9; }
.training-intro-lede { margin: 8px 0 28px; text-align: center; font-size: clamp(1.15rem, 1.65vw, 1.7rem); }
.training-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.training-card { border: 1px solid #717484; overflow: hidden; }
.training-card > img { display: block; width: 100%; height: clamp(220px, 25vw, 390px); object-fit: cover; }
.training-card-body { padding: 28px 30px 26px; }
.training-card .eyebrow { margin: 0 0 11px; color: currentColor; }
.training-card .eyebrow::before { background: var(--red); }
.training-card h2 { margin: 0 0 13px; font: 800 clamp(3rem, 4.4vw, 5.35rem)/.83 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.training-card-description { max-width: 590px; margin: 0 0 24px; font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.15; }
.training-card h3 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 3px solid var(--red); font: 800 clamp(1.35rem, 1.85vw, 2rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.training-list { list-style: none; padding: 0; margin: 0; }
.training-list li { position: relative; min-height: 70px; padding: 13px 0 13px 72px; border-bottom: 1px solid currentColor; }
.training-list li::before { content: "✓"; position: absolute; left: 8px; top: 14px; color: var(--red); font: 800 3rem/.75 Arial, sans-serif; }
.training-list strong, .training-list span { display: block; }
.training-list strong { font: 800 clamp(1.1rem, 1.4vw, 1.55rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.training-list span { margin-top: 4px; font-size: clamp(.95rem, 1.2vw, 1.18rem); line-height: 1.1; }
.training-card-note { margin: 14px 0; font-size: clamp(.95rem, 1.2vw, 1.16rem); line-height: 1.15; }
.training-card .button { display: flex; justify-content: center; width: 100%; padding: 17px 16px; font-size: clamp(.9rem, 1.2vw, 1.25rem); text-align: center; }
.training-card--competition { background: #faf9f4; color: #0b0b0b; }
.training-card--fitness { background: #080808; color: #fff; }
.training-card--fitness h3 { border-bottom-color: var(--red); }
.training-contact-note { margin: 20px 0 0; text-align: center; font-size: 1.05rem; }

@media (min-width: 801px) {
  .training-hero { height: calc(100dvh - 62px); min-height: 0; }
  .training-hero .wrap { padding-left: max(34px, calc((100% - 1470px) / 2 + 34px)); }
}

@media (max-width: 800px) {
  .training-hero { min-height: 0; height: calc(100dvh - 45px); background-position: center, 61% 60px; background-size: cover, cover; }
  .training-hero .wrap { align-items: flex-end; padding-top: 95px; padding-bottom: 92px; }
  .training-hero h1 { font-size: clamp(3.4rem, 13vw, 5.4rem); }
  .training-hero .lede { font-size: 1.13rem; }
  .training-hero-note { top: calc(100% + 24px); font-size: .66rem; }
  .training-intro { padding: 42px 0; }
  .training-program-grid { grid-template-columns: 1fr; gap: 20px; }
  .training-card-body { padding: 23px 20px 20px; }
  .training-card > img { height: 230px; }
}