/*
 * unified-pages.css
 * Shared mc-* component classes for all page templates
 * mindconcept-warm theme — production build
 *
 * These classes replace the old per-page CSS systems. After migration
 * every landing page, service page, and utility page uses this single
 * file together with warm-base.css.
 *
 * Depends on the design tokens declared in warm-base.css (:root vars).
 * Font: Outfit (loaded in warm-base.css).
 *
 * Table of Contents
 * ------------------
 *  1.  Container & Layout Helpers
 *  2.  Page Hero
 *  3.  Section (generic)
 *  4.  Feature Grid & Cards
 *  5.  Symptom List
 *  6.  Timeline / Steps
 *  7.  FAQ Accordion
 *  8.  CTA Sections
 *  9.  Tag Pills
 * 10.  Stat Grid
 * 11.  Location
 * 12.  Pricing
 * 13.  Consultation Cards
 * 14.  Thank-You Page
 * 15.  Scroll Reveal Animation
 * 16.  Sticky Mobile CTA Bar
 * 17.  Responsive — Tablet (≤ 1024 px)
 * 18.  Responsive — Mobile  (≤ 768 px)
 * 19.  Responsive — Small   (≤ 480 px)
 */


/* ===================================================================
   1. CONTAINER & LAYOUT HELPERS
   =================================================================== */

.mc-lp-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ===================================================================
   2. PAGE HERO
   Full-width hero with dark background, radial glow, two-column
   layout (text + optional illustration). Used on condition pages,
   service pages, and tool pages.
   =================================================================== */

.mc-page-hero {
  position: relative;
  padding: 100px 0 80px;
  background: var(--sage-dark);
  color: #fff;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Subtle radial glow behind content */
.mc-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(61, 107, 79, .30),
    transparent 70%
  );
  pointer-events: none;
}

.mc-page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
}

/* --- Text column --- */

.mc-page-hero-text h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #fff;
}

.mc-page-hero-text h1 span {
  color: var(--gold);
}

.mc-page-hero-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: .9;
  margin-bottom: 28px;
}

/* --- Illustration column --- */

.mc-page-hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-page-hero-illustration svg {
  max-width: 100%;
  height: auto;
}


/* ===================================================================
   3. SECTION (generic)
   Padding wrapper with optional background modifiers.
   =================================================================== */

.mc-page-section {
  padding: 80px 0;
  position: relative;
}

/* Background modifiers */
.mc-page-section.mc-bg-warm  { background: var(--warm-white); }
.mc-page-section.mc-bg-cream { background: var(--cream); }

/* Centred section header */
.mc-page-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.mc-page-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.mc-page-section-subtitle {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}


/* ===================================================================
   4. FEATURE GRID & CARDS
   Auto-fit grid of benefit / feature cards. Used on virtually
   every landing page.
   =================================================================== */

.mc-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.mc-feature-card {
  padding: 36px 28px;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(61, 107, 79, .06);
  box-shadow: 0 4px 30px rgba(61, 107, 79, .06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.mc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 50px rgba(61, 107, 79, .12);
  border-color: rgba(61, 107, 79, .12);
}

/* Organic-shaped icon circle */
.mc-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50% 45% 55% 48%;
  background: linear-gradient(135deg, var(--sage), var(--sage-light));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.mc-feature-icon svg,
.mc-feature-icon i {
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 1.2rem;
}

.mc-feature-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.mc-feature-card p {
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.7;
}


/* ===================================================================
   5. SYMPTOM LIST
   Condition-page list of symptoms with icon + description rows.
   =================================================================== */

.mc-symptom-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.mc-symptom-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--warm-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(61, 107, 79, .06);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.mc-symptom-item:hover {
  border-color: rgba(196, 149, 106, .20);
  box-shadow: 0 4px 20px rgba(196, 149, 106, .08);
}

.mc-symptom-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-symptom-icon svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.mc-symptom-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.mc-symptom-item p {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.6;
}


/* ===================================================================
   6. TIMELINE / STEPS
   Vertical timeline with a gradient connector line. Used on MMPI,
   service process descriptions, etc.
   =================================================================== */

.mc-timeline {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Vertical connector line */
.mc-timeline::before {
  content: '';
  position: absolute;
  left: 52px;               /* centred under .mc-timeline-step (28 + 24px padding) */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--sage), var(--gold));
  pointer-events: none;
}

.mc-timeline-item {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
}

.mc-timeline-item:last-child {
  margin-bottom: 0;
}

.mc-timeline-step {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  z-index: 1;
}

.mc-timeline-content {
  padding-top: 6px;
}

.mc-timeline-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.mc-timeline-content p {
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.7;
}


/* ===================================================================
   7. FAQ ACCORDION
   Self-contained FAQ block. Toggle via JS adding .active to the item.
   =================================================================== */

.mc-page-faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.mc-page-faq-item {
  background: var(--warm-white);
  border: 1px solid rgba(61, 107, 79, .06);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

/* Question button */
.mc-page-faq-question {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: color .3s ease;
}

.mc-page-faq-question:hover {
  color: var(--sage);
}

/* Toggle icon */
.mc-page-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(61, 107, 79, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s ease;
}

.mc-page-faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--sage);
  transition: transform .3s ease;
}

/* Active state */
.mc-page-faq-item.active .mc-page-faq-icon {
  background: var(--sage);
}

.mc-page-faq-item.active .mc-page-faq-icon svg {
  stroke: #fff;
  transform: rotate(45deg);
}

/* Answer panel (height-driven slide) */
.mc-page-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.mc-page-faq-answer-inner {
  padding: 0 24px 20px;
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.7;
}

.mc-page-faq-item.active .mc-page-faq-answer {
  max-height: 400px;
}


/* ===================================================================
   8. CTA SECTIONS
   Light and dark variants for call-to-action blocks.
   =================================================================== */

.mc-page-cta {
  padding: 60px 0;
  text-align: center;
}

.mc-page-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.mc-page-cta p {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* Dark variant (sage-dark background, rounded card) */
.mc-page-cta-dark {
  background: var(--sage-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  margin: 40px auto;
  max-width: 1100px;
  padding: 60px 24px;
}

.mc-page-cta-dark h2 { color: #fff; }
.mc-page-cta-dark p  { color: rgba(255, 255, 255, .80); }


/* ===================================================================
   9. TAG PILLS
   Small keyword badges used on condition pages.
   =================================================================== */

.mc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}

.mc-tag {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--gold-pale);
  color: var(--sage-dark);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}


/* ===================================================================
   10. STAT GRID
   Numerical statistics in a small card grid (e.g. MMPI page).
   =================================================================== */

.mc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.mc-stat-item {
  text-align: center;
  padding: 24px;
  background: var(--warm-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(61, 107, 79, .06);
}

.mc-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sage);
  line-height: 1.15;
}

.mc-stat-label {
  font-size: .85rem;
  color: var(--text-light);
  margin-top: 4px;
}


/* ===================================================================
   11. LOCATION
   Map + contact info block (Kontakt page).
   =================================================================== */

.mc-location-section {
  max-width: 1100px;
  margin: 40px auto;
  padding: 48px 24px;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 30px rgba(61, 107, 79, .06);
}

.mc-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.mc-location-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mc-location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.mc-location-info h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.mc-location-address {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: .95rem;
  color: var(--text-body);
  line-height: 1.6;
}

.mc-location-address svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sage);
  margin-top: 2px;
}

.mc-location-phone {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sage);
}

.mc-location-phone svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mc-location-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 24px;
}

.mc-location-photo img {
  width: 100%;
  height: auto;
  display: block;
}


/* ===================================================================
   12. PRICING
   Price list card (Cennik page).
   =================================================================== */

.mc-pricing-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.mc-pricing-card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 4px 30px rgba(61, 107, 79, .06);
  border: 1px solid rgba(61, 107, 79, .06);
}

.mc-pricing-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--gold-pale);
  color: var(--sage-dark);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}

.mc-pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(61, 107, 79, .06);
  gap: 16px;
}

.mc-pricing-item:last-child {
  border-bottom: none;
}

.mc-pricing-name {
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}

.mc-pricing-price {
  font-weight: 700;
  color: var(--sage);
  white-space: nowrap;
}

.mc-pricing-duration {
  font-size: .85rem;
  color: var(--text-light);
  white-space: nowrap;
}


/* ===================================================================
   13. CONSULTATION CARDS
   Grid of consultation-type cards (Bezplatna konsultacja page).
   =================================================================== */

.mc-consult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.mc-consult-card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid rgba(61, 107, 79, .06);
  box-shadow: 0 4px 30px rgba(61, 107, 79, .06);
  transition: transform .35s ease, box-shadow .35s ease;
  text-align: center;
}

.mc-consult-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(61, 107, 79, .10);
}

.mc-consult-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50% 45% 55% 48%;
  background: linear-gradient(135deg, var(--sage), var(--sage-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-consult-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.mc-consult-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.mc-consult-card p {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.7;
}


/* ===================================================================
   14. THANK-YOU PAGE
   Centred confirmation card shown after form submission.
   =================================================================== */

.mc-thank-you {
  max-width: 600px;
  margin: 80px auto;
  padding: 60px 40px;
  text-align: center;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(61, 107, 79, .08);
  border-top: 4px solid var(--sage);
}

.mc-thank-you-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(61, 107, 79, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-thank-you-icon svg {
  width: 40px;
  height: 40px;
  color: var(--sage);
}

.mc-thank-you h1 {
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.mc-thank-you p {
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 24px;
}


/* ===================================================================
   15. SCROLL REVEAL ANIMATION
   Applied via JS — add .mc-reveal to any element, observer adds
   .mc-visible when it enters the viewport.
   =================================================================== */

.mc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.mc-reveal.mc-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===================================================================
   16. STICKY MOBILE CTA BAR
   Fixed bottom bar visible only on small screens for service pages.
   =================================================================== */

.mc-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--sage-dark);
  padding: 14px 24px;
  display: none;                    /* hidden by default */
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .10);
}

.mc-sticky-cta a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.mc-sticky-cta .mc-btn {
  padding: 12px 24px;
  font-size: .9rem;
}


/* ===================================================================
   17. RESPONSIVE — TABLET (max-width: 1024px)
   =================================================================== */

@media (max-width: 1024px) {
  .mc-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mc-consult-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===================================================================
   18. RESPONSIVE — MOBILE (max-width: 768px)
   =================================================================== */

@media (max-width: 768px) {
  /* Hero */
  .mc-page-hero {
    padding: 80px 0 60px;
  }

  .mc-page-hero-inner {
    grid-template-columns: 1fr;
  }

  .mc-page-hero-illustration {
    display: none;
  }

  /* Sections */
  .mc-page-section {
    padding: 60px 0;
  }

  /* Grids → single column */
  .mc-feature-grid,
  .mc-consult-grid {
    grid-template-columns: 1fr;
  }

  .mc-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Location */
  .mc-location-grid {
    grid-template-columns: 1fr;
  }

  /* Timeline */
  .mc-timeline::before {
    left: 44px;                    /* re-centre under smaller step circles */
  }

  .mc-timeline-step {
    width: 40px;
    height: 40px;
    font-size: .9rem;
  }

  /* Sticky CTA visible on mobile */
  .mc-sticky-cta {
    display: flex;
  }

  /* Thank-you spacing */
  .mc-thank-you {
    margin: 48px 16px;
    padding: 40px 24px;
  }
}


/* ===================================================================
   19. RESPONSIVE — SMALL (max-width: 480px)
   =================================================================== */

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

  .mc-pricing-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .mc-page-hero-text h1 {
    font-size: 1.6rem;
  }

  .mc-page-cta-dark {
    margin: 24px 12px;
    padding: 40px 20px;
  }
}