/* about-fix.css - Responsive fixes for about.php */

/* === DESKTOP: Fix Hero Grid & h1 font size === */
@media (min-width: 980px) {
  .about-deep-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px;
    align-items: center;
  }
  .about-deep-copy {
    max-width: 100% !important;
  }
  .about-deep-copy h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
  }
}

@media (min-width: 1200px) {
  .about-deep-grid {
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 56px;
  }
  .about-deep-copy h1 {
    font-size: clamp(2.4rem, 3.8vw, 3.8rem) !important;
  }
}

/* === TABLET (621px - 979px) === */
@media (max-width: 979px) and (min-width: 621px) {
  .about-deep-hero { padding: 64px 0 56px; }
  .about-deep-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .about-deep-copy { text-align: center; max-width: 100% !important; }
  .about-deep-copy .cta-row { justify-content: center; }
  .finance-orbit { max-width: 400px; margin: 0 auto; min-height: 280px; }
  .about-story-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .about-story-visual { order: -1; max-width: 340px; margin: 0 auto; }
  .goal-map { grid-template-columns: repeat(2, 1fr) !important; }
  .vision-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .why-box { grid-template-columns: 1fr !important; gap: 24px; }
}

/* === MOBILE (max 620px) === */
@media (max-width: 620px) {
  .about-page { overflow-x: hidden; }

  /* Hero */
  .about-deep-hero { padding: 50px 0 40px !important; overflow: hidden; }
  .about-deep-hero::before { inset: 8px !important; }
  .about-deep-hero::after {
    width: 260px !important; height: 260px !important;
    inset-inline-end: -110px !important; top: -90px !important;
  }
  .about-deep-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .about-deep-copy { text-align: right; max-width: 100% !important; }
  .about-deep-copy h1 { font-size: clamp(1.85rem, 9vw, 2.5rem) !important; margin: 6px 0 12px !important; line-height: 1.18 !important; }
  .about-deep-copy p { font-size: .96rem !important; line-height: 1.85 !important; }
  .about-deep-copy .cta-row { flex-direction: column !important; gap: 10px !important; }
  .about-deep-copy .cta-row a,
  .about-deep-copy .cta-row button { width: 100% !important; text-align: center; justify-content: center; }
  .finance-orbit { min-height: 240px !important; max-width: 290px !important; margin: 0 auto !important; }
  .orbit-ring.r1 { width: 230px !important; height: 230px !important; }
  .orbit-ring.r2 { width: 170px !important; height: 170px !important; }

  /* About Story */
  .about-story-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .about-story-visual { order: -1; }
  .about-story-copy h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .story-stats { gap: 10px; flex-wrap: wrap; }
  .story-stat { min-width: 85px; flex: 1 1 calc(50% - 5px); }

  /* Vision */
  .vision-section { padding: 38px 0 !important; }
  .vision-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Goals */
  .goals-section { padding: 38px 0 !important; }
  .goal-map { grid-template-columns: 1fr !important; }
  .goals-section h2,
  .vision-section h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

  /* Why */
  .why-section { padding: 38px 0 !important; }
  .why-box { grid-template-columns: 1fr !important; gap: 18px !important; }
  .why-bubble-wrap { min-height: 230px !important; }
  .why-copy h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .why-copy p { font-size: .94rem; }
}

/* === VERY SMALL (max 400px) === */
@media (max-width: 400px) {
  .about-deep-copy h1 { font-size: 1.75rem !important; }
  .about-deep-hero { padding: 38px 0 30px !important; }
  .finance-orbit { min-height: 200px !important; max-width: 250px !important; }
  .about-story-copy h2,
  .vision-section h2,
  .goals-section h2,
  .why-copy h2 { font-size: 1.4rem !important; }
}