/* Gym sites: parts that are not in the design export. Colors come from the theme block in each page's head. */

/* The full-suite section, drawn in the export's own type and spacing */
.programs { background: #FFFFFF; }
.programs-inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 36px; }
.programs-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.programs-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 0.16em; color: var(--brand-text); }
.programs h2 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; }
.programs h2 span { color: var(--brand-text); }
.programs-head p { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.55; color: #484956; }
.programs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.program {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px;
  background: #FFFFFF; border: 1px solid #E2E2E2; border-top: 4px solid var(--brand); border-radius: 14px;
  color: var(--ink); text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.program:hover { color: var(--ink); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); transform: translateY(-2px); }
.program strong { font-size: 21px; line-height: 1.2; font-weight: 800; }
.program span { flex: 1; font-size: 16px; line-height: 1.55; color: #484956; }
.program em { font-style: normal; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-text); }
.program em::after { content: " \2192"; }
.program:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 960px) {
  .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Programs: two compact tiles a row on a phone, title and button only, instead of six tall cards */
  .programs-inner { padding: 48px 16px; gap: 24px; }
  .programs h2 { font-size: 34px; line-height: 1.06; }
  .programs-head p { font-size: 17px; }
  .programs-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .program { padding: 16px 14px 14px; gap: 10px; border-top-width: 3px; border-radius: 12px; min-height: 104px; }
  .program strong { flex: 1; font-size: 16px; line-height: 1.25; }
  .program span { display: none; }
  .program em { font-size: 0; }  /* the full label stays for screen readers; a phone shows "Start →" */
  .program em::after { content: "Start \2192"; font-size: 13px; }

  /* Hero: the gym's own photo shows across the top of the first screen (it was hidden behind a near-solid overlay),
     fading into the dark background before the price box and button */
  section[aria-labelledby="hero-title"] > img:first-child {
    inset: 0 0 auto 0 !important; height: 460px !important; object-position: 60% 30% !important;
  }
  section[aria-labelledby="hero-title"] > div[aria-hidden="true"] {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--dark) 42%, transparent) 0px,
      color-mix(in srgb, var(--dark) 62%, transparent) 180px,
      color-mix(in srgb, var(--dark) 88%, transparent) 330px,
      var(--dark) 460px) !important;
  }
  #hero-title, #hero-title + p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
}