/* =============================================================================
   ERGOTHERAPIEPRAXIS LEA FREIBOTT — Homepage Styles (home.css)
   ============================================================================= */

/* =============================================================================
   0. SCROLL ANIMATIONS
   ============================================================================= */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.fade-up--delay-1 { transition-delay: 100ms; }
.fade-up--delay-2 { transition-delay: 200ms; }
.fade-up--delay-3 { transition-delay: 300ms; }
.fade-up--delay-4 { transition-delay: 400ms; }

/* =============================================================================
   1. HERO SECTION
   ============================================================================= */
.hero {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.hero-content {
  padding: var(--space-16) var(--space-12) var(--space-16) var(--container-pad);
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.hero-heading {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  max-width: 14ch;
}

.hero-heading em {
  font-style: italic;
  color: var(--color-primary-dark);
}

.hero-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 46ch;
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

/* 
 * CRITICAL DESIGN RULE:
 * Media container background MUST be pure white #ffffff.
 */
.hero-media-wrapper {
  padding: var(--space-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-media-container {
  width: 100%;
  height: 85%;
  background: #ffffff; /* STRICT: pure white */
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 40px rgba(45,45,45,0.08), 0 1px 3px rgba(45,45,45,0.05);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media-container svg {
  width: 80px;
  height: 80px;
  color: var(--color-border);
  opacity: 0.5;
}

/* =============================================================================
   2. PHILOSOPHY & HUMAN ELEMENT
   ============================================================================= */
.philosophie {
  padding-block: 120px;
  background: var(--color-bg);
}

.philosophie-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--space-16);
  align-items: center;
}

/* 
 * CRITICAL DESIGN RULE:
 * Placeholder background MUST be pure white #ffffff.
 */
.philosophie-media {
  background: #ffffff; /* STRICT: pure white */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  box-shadow: 0 12px 32px rgba(45,45,45,0.06);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.philosophie-media svg {
  width: 64px;
  height: 64px;
  color: var(--color-border);
  opacity: 0.5;
}

.philosophie-content h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.philosophie-content p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
}

/* =============================================================================
   3. SERVICES OVERVIEW
   ============================================================================= */
.leistungen-preview {
  background: var(--color-bg);
  padding-block: 120px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(45,45,45,0.03);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(45,45,45,0.08);
}

/* 
 * CRITICAL DESIGN RULE:
 * Icon placeholder background MUST be pure white #ffffff.
 */
.service-icon-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ffffff; /* STRICT: pure white */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--color-border);
  opacity: 0.5;
}

.service-card h3 {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  flex: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-primary-dark);
  margin-top: auto;
}

/* =============================================================================
   4. PRAXIS-EINBLICKE (MASONRY)
   ============================================================================= */
.praxis-galerie {
  background: var(--color-surface-alt);
  padding-block: 120px;
}

.praxis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 240px;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

/* 
 * CRITICAL DESIGN RULE:
 * Image placeholders MUST be pure white #ffffff.
 */
.praxis-figure {
  background: #ffffff; /* STRICT: pure white */
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(45,45,45,0.03);
}

.praxis-figure svg {
  width: 48px;
  height: 48px;
  color: var(--color-border);
  opacity: 0.5;
}

.praxis-figure:nth-child(1) { grid-row: span 2; }
.praxis-figure:nth-child(2) { grid-row: span 1; }
.praxis-figure:nth-child(3) { grid-row: span 1; }

/* =============================================================================
   5. PATIENT JOURNEY
   ============================================================================= */
.patienten-weg {
  background: var(--color-bg);
  padding-block: 120px;
  position: relative;
  overflow: hidden;
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
  position: relative;
}

.journey-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.journey-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* 
 * CRITICAL DESIGN RULE:
 * Circle placeholders MUST be pure white #ffffff.
 */
.journey-step__icon {
  width: 80px;
  height: 80px;
  background: #ffffff; /* STRICT: pure white */
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(45,45,45,0.05);
}

.journey-step__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-border);
  opacity: 0.5;
}

.journey-step h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.journey-step p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 30ch; margin-inline: auto; }

/* =============================================================================
   6. ABOUT TEASER
   ============================================================================= */
.ueber-mich-teaser {
  background: var(--color-surface-alt);
  padding-block: 120px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* 
 * CRITICAL DESIGN RULE:
 * Portrait placeholder MUST be pure white #ffffff.
 */
.about-portrait {
  background: #ffffff; /* STRICT: pure white */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(45,45,45,0.06);
}

.about-portrait svg {
  width: 64px;
  height: 64px;
  color: var(--color-border);
  opacity: 0.5;
}

/* =============================================================================
   7. FAQ ACCORDION
   ============================================================================= */
.faq-section {
  background: var(--color-bg);
  padding-block: 120px;
  margin-top: 120px;
}

.faq-container {
  max-width: 800px;
  margin-inline: auto;
  margin-top: var(--space-10);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(45,45,45,0.02);
}

.faq-summary {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none; /* Hide default arrow */
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-summary::after {
  transform: rotate(45deg);
}

.faq-content {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   8. AKTUELLES TEASER
   ============================================================================= */
.blog-teaser {
  background: var(--color-surface-alt);
  padding-block: 120px;
  margin-top: 2rem; /* Ensure no collision with FAQ */
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.blog-card {
  background: #ffffff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

/* 
 * CRITICAL DESIGN RULE:
 * Blog image placeholders MUST be pure white #ffffff.
 */
.blog-media {
  aspect-ratio: 16 / 9;
  background: #ffffff; /* STRICT: pure white */
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-media svg {
  width: 32px;
  height: 32px;
  color: var(--color-border);
  opacity: 0.5;
}

.blog-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-date {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.blog-content h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.blog-content a {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-primary-dark);
}

/* =============================================================================
   9. KONTAKT & LOCATION (Retained from original)
   ============================================================================= */
.kontakt-teaser {
  background: var(--color-text);
  color: var(--color-surface);
}

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}

.kontakt-map {
  background: var(--color-border);
  position: relative;
}

.kontakt-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.kontakt-info {
  padding: clamp(var(--space-12), 8vw, var(--space-24));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kontakt-info h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--color-surface);
  margin-bottom: var(--space-8);
}

.kontakt-details {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.kontakt-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-surface-alt);
  line-height: var(--lh-relaxed);
}

.kontakt-detail-item strong {
  color: var(--color-surface);
  display: block;
  font-size: var(--text-md);
}

.kontakt-detail-icon {
  color: var(--color-primary);
}

/* =============================================================================
   WAS IST ERGOTHERAPIE? SECTION
   ============================================================================= */
.was-ist-ergo {
  padding-block: 120px;
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}

.was-ist-ergo::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -60px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(253, 184, 125, 0.08),
    transparent 70%
  );
  border-radius: var(--radius-full);
  pointer-events: none;
}

.ergo-intro {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-24);
}

.ergo-intro__text {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.ergo-intro__text em {
  font-style: italic;
  color: var(--color-primary-dark);
}

.ergo-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: stretch;
}

/* Treatment list column */
.ergo-list-column {
  display: flex;
  flex-direction: column;
}

.ergo-list-heading {
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  letter-spacing: var(--ls-tight);
}

.ergo-treatment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Individual treatment items — hidden by default, animated on scroll */
.ergo-treatment-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border-left: 2px solid var(--color-primary);
  /* Animation start state */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background var(--transition-fast);
}

.ergo-treatment-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ergo-treatment-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ergo-item-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: rgba(253, 184, 125, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ergo-item-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary-dark);
}

.ergo-treatment-item span {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

/* Gallery column */
.ergo-gallery-column {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  height: 100%;
}

/*
 * CRITICAL DESIGN RULE:
 * Every gallery placeholder MUST have pure white #ffffff background.
 */
.ergo-gallery-figure {
  background: #ffffff; /* STRICT: pure white */
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(45, 45, 45, 0.06);
  transition: transform var(--transition-spring), box-shadow var(--transition-fast);
}

.ergo-gallery-figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(45, 45, 45, 0.10);
}

.ergo-gallery-figure svg {
  width: 36px;
  height: 36px;
  color: var(--color-border);
  opacity: 0.45;
}

/* Asymmetric grid structure */
.ergo-gallery-figure:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  height: 100%;
}
.ergo-gallery-figure:nth-child(2),
.ergo-gallery-figure:nth-child(3) {
  grid-column: 2 / 3;
  height: 100%;
}

/* =============================================================================
   RESPONSIVE LAYOUTS
   ============================================================================= */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-content { padding: var(--space-16) var(--space-6); align-items: center; }
  .hero-actions { justify-content: center; }
  .hero-media-wrapper { display: none; } /* Hide heavy media on mobile hero if desired, or adjust */
  .philosophie-grid { grid-template-columns: 1fr; text-align: center; }
  .ergo-content-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; text-align: center; }
  .blog-grid { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt-map { height: 300px; order: 2; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .praxis-grid { grid-template-columns: 1fr; }
  .praxis-figure:nth-child(1) { grid-row: span 1; }
  .journey-steps { grid-template-columns: 1fr; }
  .journey-steps::before { display: none; }
  .ergo-gallery-column { grid-template-columns: 1fr; }
  .ergo-gallery-figure:first-child { grid-column: span 1; aspect-ratio: 4 / 3; }
  .was-ist-ergo { padding-block: var(--space-12); }
}