/**
 * Gym Directory USA — Homepage Blocks CSS
 * Blocks: HP-01 through HP-05
 */

/* ============================================================
   HP-01: HERO SECTION
   ============================================================ */
.gd-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--gd-navy);
}

.gd-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../../../images/hero-gym.jpg'); /* Replaced at runtime */
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.gd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(13, 27, 42, 0.85) 0%,
    rgba(13, 27, 42, 0.60) 50%,
    rgba(13, 27, 42, 0.92) 100%
  );
  z-index: 1;
}

.gd-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--gd-container);
  margin: 0 auto;
  padding: var(--gd-space-3xl) var(--gd-space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gd-space-2xl);
}

@media (min-width: 1024px) {
  .gd-hero__inner {
    grid-template-columns: 60fr 40fr;
    align-items: center;
    padding: var(--gd-space-3xl) var(--gd-space-xl);
  }
}

/* Directory label above headline */
.gd-hero__eyebrow {
  font-size: var(--gd-label);
  font-weight: var(--gd-fw-semibold);
  letter-spacing: var(--gd-ls-widest);
  text-transform: uppercase;
  color: var(--gd-flame);
  display: block;
  margin-bottom: var(--gd-space-md);
}

/* Headline with animated word spans */
.gd-hero__headline {
  font-size: clamp(42px, 6vw, 72px);
  font-weight: var(--gd-fw-black);
  color: var(--gd-text-on-dark);
  letter-spacing: var(--gd-ls-tight);
  line-height: var(--gd-lh-tight);
  margin-bottom: var(--gd-space-lg);
}

.gd-hero__headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: gd-word-up var(--anim-reveal) forwards;
}
/* nth-child stagger handled via JS inline style delay */

/* Underline SVG on keyword */
.gd-hero__underline {
  position: relative;
  display: inline-block;
}
.gd-hero__underline svg {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  overflow: visible;
}
.gd-hero__underline svg path {
  stroke: var(--gd-flame);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: gd-draw 0.8s 0.8s ease-out forwards;
}

.gd-hero__sub {
  font-size: var(--gd-body-lg);
  color: #A0AEC0;
  max-width: 480px;
  margin-bottom: var(--gd-space-xl);
  line-height: var(--gd-lh-relaxed);
}

/* ---- Search Bar ---- */
.gd-search {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-hero);
  overflow: hidden;
  display: flex;
  height: 72px;
  margin-bottom: var(--gd-space-md);
}

.gd-search__field {
  display: flex;
  align-items: center;
  gap: var(--gd-space-sm);
  padding: 0 var(--gd-space-md);
  flex: 70;
  border-right: 1px solid var(--gd-border);
}

.gd-search__field-icon {
  color: var(--gd-flame);
  flex-shrink: 0;
}

.gd-search__input {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--gd-body);
  color: var(--gd-text-primary);
  width: 100%;
  font-family: var(--gd-font-sans);
}
.gd-search__input::placeholder { color: var(--gd-text-muted); }

.gd-search__location {
  display: flex;
  align-items: center;
  gap: var(--gd-space-sm);
  padding: 0 var(--gd-space-md);
  flex: 30;
}

.gd-search__btn {
  background: var(--gd-flame);
  color: #fff;
  font-family: var(--gd-font-sans);
  font-weight: var(--gd-fw-semibold);
  font-size: var(--gd-body);
  border: none;
  padding: 0 var(--gd-space-lg);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0 var(--gd-radius-lg) var(--gd-radius-lg) 0;
  transition: background var(--anim-fast), box-shadow var(--anim-fast);
  height: 100%;
}
.gd-search__btn:hover {
  background: #E64A19;
  box-shadow: -4px 0 20px rgba(255, 87, 34, 0.4);
}

/* Mobile search: 2-row stacked */
@media (max-width: 767px) {
  .gd-search {
    flex-direction: column;
    height: auto;
    border-radius: var(--gd-radius-md);
  }
  .gd-search__field {
    border-right: none;
    border-bottom: 1px solid var(--gd-border);
    height: 56px;
    flex: none;
  }
  .gd-search__location {
    height: 56px;
    flex: none;
  }
  .gd-search__btn {
    border-radius: 0 0 var(--gd-radius-md) var(--gd-radius-md);
    height: 52px;
  }
}

/* ---- Type Chips (below search) ---- */
.gd-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gd-space-sm);
  margin-bottom: var(--gd-space-xl);
}

/* Mobile: horizontal scroll */
@media (max-width: 767px) {
  .gd-hero__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .gd-hero__chips::-webkit-scrollbar { display: none; }
}

/* ---- Trust Bar ---- */
.gd-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--gd-space-xl);
  flex-wrap: wrap;
}

.gd-trust-bar__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gd-trust-bar__number {
  font-size: 32px;
  font-weight: var(--gd-fw-black);
  color: var(--gd-text-on-dark);
  font-family: var(--gd-font-sans);
  line-height: 1;
}

.gd-trust-bar__label {
  font-size: var(--gd-small);
  color: #A0AEC0;
}

.gd-trust-bar__sep {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Mobile trust bar */
@media (max-width: 767px) {
  .gd-trust-bar { flex-direction: column; align-items: flex-start; gap: var(--gd-space-md); }
  .gd-trust-bar__sep { display: none; }
}

/* ============================================================
   HP-02: GYM TYPE EXPLORER
   ============================================================ */
.gd-types {
  padding: var(--gd-space-3xl) 0;
  background: var(--gd-surface);
}

.gd-types__header {
  margin-bottom: var(--gd-space-xl);
}

/* Asymmetric Grid */
.gd-types__grid {
  display: grid;
  gap: var(--gd-space-md);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .gd-types__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
  }

  /* Row 1 */
  .gd-type-card:nth-child(1) { grid-column: span 2; }    /* CrossFit: large */
  .gd-type-card:nth-child(2) { grid-column: span 1; }    /* Yoga */
  .gd-type-card:nth-child(3) { grid-column: span 1; }    /* Boxing */

  /* Row 2 */
  .gd-type-card:nth-child(4) { grid-column: span 1; }    /* HIIT */
  .gd-type-card:nth-child(5) { grid-column: span 1; }    /* Weightlifting */
  .gd-type-card:nth-child(6) { grid-column: span 2; }    /* Pilates: large */

  /* Row 3 */
  .gd-type-card:nth-child(7),
  .gd-type-card:nth-child(8),
  .gd-type-card:nth-child(9),
  .gd-type-card:nth-child(10) { grid-column: span 1; }   /* equal */
}

.gd-type-card {
  position: relative;
  border-radius: var(--gd-radius-lg);
  overflow: hidden;
  cursor: pointer;
  height: 200px;
  background: var(--gd-navy);
}

/* Large cards */
.gd-type-card--large,
.gd-type-card:nth-child(1),
.gd-type-card:nth-child(6) {
  height: 280px;
}

.gd-type-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--anim-mid);
}

.gd-type-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 27, 42, 0.9) 0%, transparent 60%);
  transition: background var(--anim-fast);
}

.gd-type-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--gd-space-md);
  transition: transform var(--anim-mid);
}

.gd-type-card__name {
  font-weight: var(--gd-fw-bold);
  font-size: 16px;
  color: #fff;
  display: block;
}

.gd-type-card__count {
  font-size: var(--gd-small);
  color: var(--gd-flame);
  display: block;
  margin-top: 2px;
}

/* Orange line animation at bottom */
.gd-type-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--gd-flame);
  transition: width var(--anim-mid);
}

/* Hover states */
.gd-type-card:hover .gd-type-card__bg    { transform: scale(1.02); }
.gd-type-card:hover .gd-type-card__overlay { background: linear-gradient(0deg, rgba(13, 27, 42, 0.95) 0%, rgba(13, 27, 42, 0.2) 60%); }
.gd-type-card:hover .gd-type-card__content { transform: translateY(-4px); }
.gd-type-card:hover::after                  { width: 100%; }

/* Mobile: equal 2-column */
@media (max-width: 767px) {
  .gd-type-card, .gd-type-card--large { height: 160px; }
  .gd-types__grid { grid-template-columns: 1fr 1fr; }
  /* Last card: full width */
  .gd-type-card:last-child { grid-column: span 2; }
}

/* ============================================================
   HP-03: FEATURED CITIES STRIP
   ============================================================ */
.gd-cities {
  padding: var(--gd-space-3xl) 0;
  background: var(--gd-off-white);
  overflow: hidden;
}

.gd-cities__header {
  padding: 0 var(--gd-space-xl);
  margin-bottom: var(--gd-space-xl);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gd-space-md);
}

.gd-cities__scroll-wrap {
  position: relative;
}

.gd-cities__track {
  display: flex;
  gap: var(--gd-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--gd-space-xl) var(--gd-space-md);
}
.gd-cities__track::-webkit-scrollbar { display: none; }

/* Arrow buttons */
.gd-cities__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13, 27, 42, 0.7);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--anim-fast);
}
.gd-cities__arrow:hover { background: var(--gd-flame); }
.gd-cities__arrow--prev { left: 8px; }
.gd-cities__arrow--next { right: 8px; }
.gd-cities__arrow svg   { color: #fff; }

@media (max-width: 767px) { .gd-cities__arrow { display: none; } }

/* City Card */
.gd-city-card {
  flex: 0 0 240px;
  height: 320px;
  border-radius: var(--gd-radius-xl);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
  background: var(--gd-navy);
}

.gd-city-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--anim-mid);
}

.gd-city-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 27, 42, 0.95) 30%, transparent 70%);
}

.gd-city-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gd-flame);
  opacity: 0;
  transition: opacity var(--anim-fast);
}

.gd-city-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--gd-space-md);
  transition: transform var(--anim-mid);
}

.gd-city-card__name {
  display: block;
  font-size: 22px;
  font-weight: var(--gd-fw-bold);
  color: #fff;
  letter-spacing: -0.5px;
  transition: color var(--anim-fast);
}

.gd-city-card__state {
  display: block;
  font-size: var(--gd-small);
  color: var(--gd-flame);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 4px 0 8px;
}

.gd-city-card__pill {
  display: inline-block;
  background: rgba(255, 87, 34, 0.15);
  border: 1px solid var(--gd-flame);
  color: var(--gd-flame);
  font-size: 12px;
  font-weight: var(--gd-fw-semibold);
  padding: 4px 12px;
  border-radius: var(--gd-radius-pill);
}

/* Hover states */
.gd-city-card:hover .gd-city-card__bg      { transform: scale(1.05); }
.gd-city-card:hover .gd-city-card__content { transform: translateY(-8px); }
.gd-city-card:hover .gd-city-card__name    { color: var(--gd-flame); }
.gd-city-card:hover .gd-city-card__accent  { opacity: 1; }

/* ============================================================
   HP-04: HOW IT WORKS
   ============================================================ */
.gd-how {
  padding: var(--gd-space-3xl) 0;
  background: var(--gd-off-white);
}

.gd-how__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--gd-space-2xl);
}

.gd-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gd-space-xl);
  position: relative;
}

@media (min-width: 768px) {
  .gd-how__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gd-space-lg);
  }
}

/* Dumbbell connecting line (desktop only) */
.gd-how__connector {
  display: none;
}

@media (min-width: 768px) {
  .gd-how__connector {
    display: block;
    position: absolute;
    top: 60px;
    left: calc(33.33% + 20px);
    width: calc(33.33% - 40px);
    pointer-events: none;
  }
  .gd-how__connector svg path {
    stroke: var(--gd-flame);
    stroke-opacity: 0.3;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  .gd-how__connector.is-visible svg path {
    animation: gd-draw 1.2s ease-out forwards;
  }
  /* Second connector (between step 2 and 3) */
  .gd-how__connector:nth-of-type(2) {
    left: calc(66.66% + 20px);
  }
  .gd-how__connector:nth-of-type(2).is-visible svg path {
    animation: gd-draw 1.2s 0.3s ease-out forwards;
  }
}

/* Step Card */
.gd-how__step {
  position: relative;
  padding: var(--gd-space-xl) var(--gd-space-lg);
  background: var(--gd-surface);
  border-radius: var(--gd-radius-xl);
  border: 1.5px solid var(--gd-border);
  overflow: hidden;
  text-align: center;
}

/* Watermark step number */
.gd-how__step-num {
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 140px;
  font-weight: var(--gd-fw-black);
  color: rgba(13, 27, 42, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--gd-font-sans);
}

/* Icon halo */
.gd-how__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(255, 87, 34, 0.08);
  border-radius: 50%;
  margin-bottom: var(--gd-space-md);
}

.gd-how__icon { color: var(--gd-flame); }

.gd-how__title {
  font-size: var(--gd-h3);
  font-weight: var(--gd-fw-bold);
  color: var(--gd-text-primary);
  margin-bottom: var(--gd-space-sm);
}

.gd-how__desc {
  font-size: var(--gd-body);
  color: var(--gd-text-muted);
  max-width: 260px;
  margin: 0 auto;
  line-height: var(--gd-lh-relaxed);
}

/* ============================================================
   HP-05: SOCIAL PROOF STRIP
   ============================================================ */
.gd-proof {
  background: var(--gd-navy);
  padding: var(--gd-space-2xl) 0;
}

.gd-proof__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gd-space-2xl);
  margin-bottom: var(--gd-space-2xl);
}

.gd-proof__stat {
  text-align: center;
}

.gd-proof__number {
  display: block;
  font-size: 64px;
  font-weight: var(--gd-fw-black);
  color: var(--gd-text-on-dark);
  line-height: 1;
  font-family: var(--gd-font-sans);
}

.gd-proof__number .suffix { color: var(--gd-flame); }

.gd-proof__label {
  display: block;
  font-size: 12px;
  letter-spacing: var(--gd-ls-wider);
  text-transform: uppercase;
  color: var(--gd-text-muted);
  margin-top: var(--gd-space-sm);
}

.gd-proof__divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 767px) {
  .gd-proof__stats   { flex-direction: column; gap: var(--gd-space-lg); }
  .gd-proof__divider { width: 60px; height: 1px; }
  .gd-proof__number  { font-size: 48px; }
}

/* Rotating testimonial */
.gd-proof__testimonials {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  min-height: 80px;
  position: relative;
}

.gd-proof__quote {
  font-size: 18px;
  font-style: italic;
  color: #A0AEC0;
  line-height: var(--gd-lh-relaxed);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gd-proof__quote.is-active { opacity: 1; position: static; }

.gd-proof__attribution {
  display: block;
  font-size: 12px;
  color: var(--gd-flame);
  font-style: normal;
  margin-top: var(--gd-space-sm);
  font-weight: var(--gd-fw-semibold);
}