/* =========================================================
   Home page — section-specific styles
   ========================================================= */

/* ---- Section headings shared pattern ------------------- */
.section-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

.section-heading {
  margin-bottom: var(--space-md);
}

.section-intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
}

/* =========================================================
   1. Value Props
   ========================================================= */
.value-props {
  padding: var(--space-section) 0;
}

.value-props__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.value-props__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
}

.value-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.value-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.value-card__icon {
  width: 40px;
  height: 40px;
  background-color: rgba(45, 140, 78, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-green);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-xs);
  color: var(--color-navy);
}

.value-card p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  margin-bottom: 0;
}

/* Clickable card variant */
.value-card--link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.value-card--link p {
  flex: 1;
}

.value-card__cta {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-green);
  transition: color var(--transition-fast);
}

.value-card--link:hover .value-card__cta {
  color: var(--color-green-hover);
}

/* CTA closer tile — distinguishes "See All Services" from the service cards above it */
.value-card--all {
  background-color: var(--color-offwhite);
  border-style: dashed;
}

/* =========================================================
   2. Services Overview
   ========================================================= */
.services-overview {
  padding: var(--space-section) 0;
}

.services-overview__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* (services merged into value-props section above) */

/* =========================================================
   3. About Dr. Sapala
   ========================================================= */
.about {
  padding: var(--space-section) 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about__image-wrap {
  position: relative;
}

.about__image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.about__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.credential-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background-color: rgba(45, 140, 78, 0.1);
  color: var(--color-green);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(45, 140, 78, 0.25);
}

.about__name {
  font-size: var(--font-size-2xl);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.about__title {
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-xl);
  font-weight: var(--font-weight-medium);
}

.about__bio {
  color: var(--color-charcoal);
  margin-bottom: var(--space-lg);
}

.about__cta {
  margin-top: var(--space-xl);
}

/* =========================================================
   4. Coaching Teaser
   ========================================================= */
.coaching-teaser {
  padding: var(--space-section) 0;
  text-align: center;
}

.coaching-teaser__label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-green);
  background-color: rgba(45, 140, 78, 0.15);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}

.coaching-teaser h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-white);
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}

.coaching-teaser p {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 520px;
  margin: 0 auto var(--space-2xl);
}

/* =========================================================
   5. Location & Hours
   ========================================================= */
.location {
  padding: var(--space-section) 0;
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-gray);
  height: 100%;
  min-height: 350px;
}

.location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.location__info h2 {
  margin-bottom: var(--space-xl);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-sm);
}

.hours-table tr {
  border-bottom: 1px solid var(--color-gray);
}

.hours-table tr:last-child {
  border-bottom: none;
}

.hours-table td {
  padding: var(--space-sm) 0;
  color: var(--color-charcoal);
}

.hours-table td:first-child {
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
  width: 55%;
}

.location__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-charcoal);
}

.location__detail-icon {
  width: 20px;
  height: 20px;
  color: var(--color-green);
  flex-shrink: 0;
  margin-top: 2px;
}

.location__detail a {
  color: var(--color-green);
  transition: color var(--transition-fast);
}

.location__detail a:hover {
  color: var(--color-green-hover);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .value-props__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about__image {
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }

  .location__grid {
    grid-template-columns: 1fr;
  }

  .location__map {
    height: 280px;
  }

}

@media (max-width: 480px) {
  .value-props__grid {
    grid-template-columns: 1fr;
  }
}