/* ==========================================================================
   FORGE ATHLETIC CLUB - page CSS on top of the Fitrainer template
   Loaded after style.css. Everything here is either a fix the template needs
   once real photography goes in, or markup the template does not have.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. object-fit on every swapped-in photograph.
   Fitrainer pre-cropped its own placeholders to each slot, so it never sets
   object-fit anywhere. Real photos with different ratios get SQUASHED, not
   cropped, the moment they go in.
   -------------------------------------------------------------------------- */
.banner-slider1 img,
.program-image img,
.about-image-left img,
.about-image-right img,
.team-image img,
.pricing-image img,
.appointment-left img,
.achievement-image img,
.forge-circle-photo {
  object-fit: cover;
  width: 100%;
}

.banner-slider1 img { height: 100vh; min-height: 620px; }
.program-image img { height: 300px; }
.about-image-left img,
.about-image-right img { height: 300px; }
.team-image img { height: 340px; }
.pricing-image img { height: 200px; }
.appointment-left img { height: 100%; min-height: 420px; }

/* the round cutout slot in the feature column */
.forge-circle-photo {
  height: 340px;
  border-radius: 50%;
  max-width: 340px;
  margin: 0 auto;
  display: block;
  border: 6px solid #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.forge-achievement-left { margin-top: -80px; }
.forge-achievement-photo { height: 420px; object-fit: cover; }

/* --------------------------------------------------------------------------
   1b. Section background photographs.
   Four of Fitrainer's full-bleed section backgrounds are set in style.css and
   all four point at flat gray placeholder jpgs, so the bands rendered as slabs
   of gray. Repointed at the licensed photography.
   -------------------------------------------------------------------------- */
.index2 .feature .overlay { background-image: url("/images/forge-rack.jpg"); }
.index2 .service { background-image: url("/images/forge-wide.jpg"); }
/* That photo is a bright, glassy floor, and Fitrainer's 50% scrim left the
   cards washed out on top of it. Darker scrim, solid-enough cards. */
.index2 .service > .overlay { opacity: .74; }
.index2 .service .service-box {
  background-color: rgba(12, 12, 14, .58) !important;
  border: 1px solid rgba(255, 255, 255, .16);
}
.index2 .service .service-box.bg-primary { background-color: rgba(220, 29, 36, .88) !important; }
/* fixed backgrounds are ignored on iOS and janky on Android */
@media (max-width: 991px) {
  .index2 .service,
  .index2 .feature .overlay,
  .index2 .testimonial1 { background-attachment: scroll; }
}
.index2 .video-banner .video-banner-inner {
  background-image: url("/images/forge-floor.jpg");
  background-size: cover;
  background-position: center;
}
/* Fitrainer scrims this band in red, which turns a sunlit floor pink. */
.index2 .video-banner .video-banner-inner > .overlay {
  background-image: linear-gradient(180deg, rgba(12, 12, 14, .35) 0%, rgba(12, 12, 14, .80) 100%);
  background-color: transparent;
  opacity: 1;
}
.index2 .testimonial1 { background-image: url("/images/forge-warm.jpg"); }

/* --------------------------------------------------------------------------
   2. Wordmark. The template ships three raster logos that all read
   "Fitrainer", so the mark is set in type instead.
   -------------------------------------------------------------------------- */
.forge-wordmark { line-height: 1; }
.forge-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: #DC1D24;
  transform: rotate(45deg);
  position: relative;
}
.forge-mark::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: #0C0C0E;
}
.forge-wordmark-name {
  display: block;
  color: #ffffff;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .12em;
}
.forge-wordmark-sub {
  display: block;
  color: #DC1D24;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-top: 2px;
}
footer .forge-wordmark-name { color: #ffffff; }

/* --------------------------------------------------------------------------
   3. Hero. The template's headline is a two word flip animation; ours is a
   sentence, so it needs its own measure and a smaller cap size.
   -------------------------------------------------------------------------- */
/* Fitrainer capitalizes every heading, which turns a real sentence into
   Title Case Nonsense. Headings here are written, so they are left alone. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { text-transform: none !important; }
.text-uppercase { text-transform: uppercase !important; }

.banner .headline {
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -.01em;
}

/* The template's hero overlay is a 60% red-to-black wash, which turned the
   photograph into a flat red field. Darkened instead of tinted, so the gym
   behind the headline is actually visible. */
.index2 .banner .overlay {
  background-image: linear-gradient(180deg, rgba(12, 12, 14, .52) 0%, rgba(12, 12, 14, .86) 100%);
  opacity: 1;
}

/* The square-footage badge sits on the photo. Fitrainer backs it with a sale
   tag PNG scaled to 50%, so the text landed on bare image and vanished. */
.index2 .about .about-exp {
  background-image: none;
  background-color: #DC1D24;
  padding: 18px 24px;
  max-width: 320px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.index2 .about .about-exp .h3 { font-size: 20px; }
.index2 .about .about-exp span span { font-size: 14px; font-weight: 500; margin-top: 4px; }
.banner-content-inner p { font-size: 17px; }

/* --------------------------------------------------------------------------
   4. Coach cards. The template's card ends in a row of social icons that go
   nowhere on a demo; ours ends in a line of copy.
   -------------------------------------------------------------------------- */
.team-info p:last-child { color: #676767; font-size: 15px; }

/* --------------------------------------------------------------------------
   5. Plan builder
   -------------------------------------------------------------------------- */
.forge-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.forge-opt { margin: 0; }
.forge-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.forge-opt span {
  display: inline-block;
  padding: 11px 18px;
  border: 2px solid #D5D4D4;
  background: #ffffff;
  color: #1D1E21;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.forge-opt input:hover + span { border-color: #A3050B; }
.forge-opt input:checked + span {
  border-color: #DC1D24;
  background: #DC1D24;
  color: #ffffff;
}
.forge-opt input:focus-visible + span {
  outline: 3px solid #1D1E21;
  outline-offset: 2px;
}
.forge-q { border: 0; padding: 0; margin: 0; }
.forge-q legend { float: none; width: auto; }

.forge-result {
  border: 2px solid #1D1E21;
  padding: 28px;
  background: #F5F5F5;
}
.forge-result-head { border-bottom: 2px dashed #D5D4D4; }
.forge-week { list-style: none; padding: 0; margin: 0; }
.forge-week li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed #D5D4D4;
}
.forge-week li:last-child { border-bottom: 0; }
.forge-week .forge-day {
  flex: 0 0 92px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
  padding-top: 3px;
}
.forge-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.forge-slot {
  border: 2px solid #1D1E21;
  background: #ffffff;
  color: #1D1E21;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
}
.forge-slot:hover { border-color: #DC1D24; color: #DC1D24; }
.forge-slot[aria-pressed="true"] {
  background: #1D1E21;
  border-color: #1D1E21;
  color: #ffffff;
}
.forge-slot[aria-pressed="true"]:hover { color: #ffffff; }

/* --------------------------------------------------------------------------
   6. Demo disclosure bar. Fixed to the BOTTOM: the template's header is fixed
   at the top on mobile and covers anything parked up there. Suppressed
   entirely when the gallery iframes the page with ?embed=1.
   -------------------------------------------------------------------------- */
.forge-demo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: #0C0C0E;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 10px 16px;
}
.forge-demo-bar a { color: #ffb3b6; text-decoration: underline; }
body.forge { padding-bottom: 62px; }

/* --------------------------------------------------------------------------
   7. The template ships no reduced-motion guard anywhere.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 991px) {
  .forge-achievement-left { margin-top: 0; }
  .banner-slider1 img { height: 78vh; min-height: 520px; }
  .appointment-left img { min-height: 280px; }
}