/*
 * Zazen Custom - Homepage Sections
 * 20-homepage.css
 *
 * Styles for new partials introduced in the Phase-4 home redesign:
 *   - about-cards            (2 dark slate cards)
 *   - mission                (text + image split)
 *   - services-overview      (7-card grid, replaces featured + 3)
 *   - patient-resources      (2 dark slate cards, mirrors about-cards)
 *   - seo-content            (heading + sub + body block)
 *   - insurance-carecredit   (logos + CareCredit banner)
 *   - cta-section--zazen     (recolor override of existing CTA parallax)
 *   - find-us                (4x4 photo grid additions)
 *   - local-seo              (2-col, service-area chips + landmarks)
 *
 * All values reference tokens from 00-tokens.css. No hard-coded colors.
 */


/* ============================================================
 *  Our Mission
 * ============================================================ */

.mission-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.mission-section__text .eyebrow {
  margin-bottom: var(--space-3);
}
.mission-section__body {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin: var(--space-4) 0 var(--space-6);
  max-width: 56ch;
}
.mission-section__actions {
  margin-top: var(--space-6);
}
.mission-section__image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mission-section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 380px;
}
.mission-section__image--placeholder {
  width: 100%;
  min-height: 380px;
  background: var(--color-bg-alt);
}
@media (max-width: 960px) {
  .mission-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .mission-section__image,
  .mission-section__image--placeholder {
    min-height: 280px;
  }
}


/* ============================================================
 *  Services Overview - 7-card grid
 * ============================================================ */

.svc-overview-home__header {
  text-align: center;
  margin-bottom: var(--space-10);
  max-width: 880px;
  margin-inline: auto;
}
.svc-overview-home__header .section-subheading {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}
.svc-overview-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
/* Make the 7th card full-width-balanced on the bottom row:
   3+3+1 isn't great, so on the largest breakpoint we let auto-fill handle it. */
@media (min-width: 1200px) {
  .svc-overview-home__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 960px) {
  .svc-overview-home__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .svc-overview-home__grid {
    grid-template-columns: 1fr;
  }
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-hover);
}
.svc-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.svc-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.svc-card:hover .svc-card__image img {
  transform: scale(1.04);
}
.svc-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-action-light));
}
.svc-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.svc-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}
.svc-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin: 0;
  flex: 1;
}
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2);
}
.svc-card:hover .svc-card__link {
  color: var(--color-action-hover);
}


/* ============================================================
 *  Insurance & CareCredit
 * ============================================================ */

.insurance-section__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.insurance-section__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin: var(--space-4) 0 var(--space-6);
}
.insurance-section__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.payment-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.payment-logo svg {
  display: block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.carecredit-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
  text-decoration: none;
  color: var(--color-text-inverse);
  transition: var(--transition-base);
}
.carecredit-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.carecredit-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carecredit-banner__bg--placeholder {
  background: linear-gradient(135deg, var(--color-navy), var(--color-action-deep));
}
.carecredit-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-8);
  background: linear-gradient(180deg, rgba(32, 32, 32, 0) 50%, rgba(32, 32, 32, 0.55) 100%);
}
.carecredit-banner__brand {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-2);
}
.carecredit-banner__brand-accent {
  color: var(--color-action);
}
.carecredit-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
}
.carecredit-banner:hover .carecredit-banner__cta {
  background: #258651; /* derived: --color-success darkened ~15% */
}

@media (max-width: 960px) {
  .insurance-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ============================================================
 *  CTA Section - Zazen color override
 * ============================================================ */

.cta-section--zazen .cta-section__overlay {
  background: linear-gradient(
    180deg,
    rgba(88, 109, 128, 0.85) 0%,
    rgba(62, 79, 93, 0.92) 100%
  ); /* derived: --color-action 85% to --color-action-deep 92% */
}
.cta-section--zazen .cta-section__btn--primary {
  background: var(--color-action);
  color: var(--color-text-inverse);
  border-color: var(--color-action);
}
.cta-section--zazen .cta-section__btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}


/* ============================================================
 *  SEO Section (merged: copy + service area + landmarks)
 * ============================================================ */

.seo-section__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--space-10);
}
.seo-section__header .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}
.seo-section__sub {
  font-size: var(--text-md);
  color: var(--color-action);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-3);
}
.seo-section__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}
.seo-section__body p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}
.seo-section__subhead {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-4);
}
.seo-section__aside {
  padding: var(--space-8);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.seo-section__landmarks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.seo-section__landmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-action);
}
.seo-section__landmark svg { color: var(--color-action); flex-shrink: 0; }
.seo-section__landmark a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}
.seo-section__landmark a:hover { color: var(--color-action); text-decoration: underline; }
.seo-section__cta-line { margin-top: var(--space-4); }

@media (max-width: 960px) {
  .seo-section__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ============================================================
 *  Info cards (About Us + Patient Resources) - LIGHT style
 * ============================================================ */

.info-cards__header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.info-cards__header .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}
.info-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}
.info-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}
.info-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
  position: relative;
  padding-bottom: var(--space-3);
}
.info-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-action);
}
.info-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin: 0;
  flex: 1;
}
.info-card__actions {
  margin-top: var(--space-6);
}
.info-card__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: 1px dashed var(--color-border-action);
  border-radius: var(--radius-sm);
  color: var(--color-action);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .info-cards__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .info-card { padding: var(--space-6); }
}


/* ============================================================
 *  Find Us - header + tour carousel
 * ============================================================ */

.find-us__header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.find-us__intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.tour-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.tour-carousel__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-1);
  flex: 1;
}
.tour-carousel__track::-webkit-scrollbar { display: none; }
.tour-carousel__slide {
  flex: 0 0 auto;
  width: clamp(260px, 32%, 380px);
  aspect-ratio: 3 / 2;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
}
.tour-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tour-carousel__arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-action);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.tour-carousel__arrow:hover {
  background: var(--color-action);
  color: var(--color-text-inverse);
  border-color: var(--color-action);
}
.tour-carousel--placeholder {
  min-height: 200px;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.find-us__gallery-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 600px) {
  .tour-carousel__arrow { width: 40px; height: 40px; }
  .tour-carousel__slide { width: 78%; }
}