/* ============================================
   PEDIATRIC GROWTH PARTNERS — MOBILE CSS
   Applies to all pages at ≤768px
   ============================================ */

/* Hamburger hidden on desktop */
.hamburger { display: none; }

@media (max-width: 768px) {

  /* ---- NAV ---- */
  nav, .nav-inner {
    padding: 0 20px !important;
    height: 64px !important;
    flex-wrap: nowrap !important;
  }
  .nav-logo img {
    height: 40px !important;
  }

  /* Hide desktop links by default on mobile */
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(18,40,80,0.98) !important;
    backdrop-filter: blur(12px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 0 24px !important;
    z-index: 99 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    gap: 0 !important;
  }
  /* Show when open class is toggled */
  .nav-links.open {
    display: flex !important;
  }
  .nav-links a {
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .nav-links a:last-child {
    border-bottom: none !important;
  }
  .nav-cta {
    margin: 16px 24px 0 !important;
    padding: 14px 20px !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    border-bottom: none !important;
  }

  /* Hamburger button */
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
  }
  .hamburger:hover {
    background: rgba(255,255,255,0.1) !important;
  }
  .hamburger span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--white) !important;
    border-radius: 2px !important;
    transition: transform 0.25s, opacity 0.25s !important;
    transform-origin: center !important;
  }
  /* Animate to X when open */
  .hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ---- HERO ---- */
  .hero {
    padding: 80px 20px 60px !important;
    min-height: auto !important;
  }
  /* index.html hero uses a 2-col grid */
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .hero-card {
    display: none !important;
  }
  .hero h1,
  .hero-content-left h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  /* groups.html + new-owners.html hero buttons */
  .hero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .hero-btns a, .hero-btns button {
    text-align: center !important;
    width: 100% !important;
  }
  .hero-badge {
    font-size: 10px !important;
    padding: 6px 14px !important;
  }
  .hero-inner {
    padding: 0 !important;
  }

  /* ---- PAGE HERO (about, resources) ---- */
  .page-hero {
    padding: 80px 20px 50px !important;
    min-height: auto !important;
  }
  .page-hero h1 {
    font-size: clamp(26px, 7vw, 40px) !important;
    line-height: 1.2 !important;
  }
  .page-hero p {
    font-size: 15px !important;
  }

  /* ---- SECTION PADDING (new-owners, about) ---- */
  .section {
    padding: 60px 20px !important;
  }

  /* ============================================
     HOME PAGE — PATH SELECTOR CARDS
     "Where Are You on Your Ownership Journey?"
     ============================================ */
  .path-section {
    padding: 60px 20px !important;
  }
  .path-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    /* override any grid definition */
    grid-template-columns: unset !important;
  }
  .path-card {
    width: 100% !important;
    min-height: auto !important;
  }
  .path-card-img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .path-card-body {
    padding: 28px 24px !important;
  }
  .path-card-title {
    font-size: 20px !important;
  }
  .btn-path {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ---- HOME: MOVEMENT SECTION ---- */
  .movement {
    padding: 60px 20px !important;
  }
  .movement-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .movement h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  /* ---- STATS BAR ---- */
  .stats-bar {
    padding: 24px 20px !important;
  }
  .stats-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  .stat-item {
    padding: 16px 12px !important;
    text-align: center !important;
  }
  .stat-item:not(:last-child)::after {
    display: none !important;
  }
  .stat-num {
    font-size: 32px !important;
  }
  .stat-label {
    font-size: 10px !important;
  }

  /* ============================================
     WHO WE ARE / ABOUT SECTION (index + groups)
     2-column grid: image + text
     ============================================ */
  .about {
    padding: 60px 20px !important;
  }
  .about-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    grid-template-columns: unset !important;
  }
  .about-img-wrap {
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .about-badge-overlay {
    bottom: -10px !important;
    right: -10px !important;
  }

  /* ============================================
     THREE FORCES (index + groups)
     3-column grid
     ============================================ */
  .three-forces {
    padding: 60px 20px !important;
  }
  .forces-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: unset !important;
  }
  .forces-header {
    margin-bottom: 36px !important;
  }
  .force-num {
    font-size: 40px !important;
  }
  .forces-tagline {
    font-size: 15px !important;
    padding: 24px 0 0 !important;
  }

  /* ============================================
     PROBLEMS / CHALLENGES (groups)
     2-column grid: problems list + quote
     ============================================ */
  .problems {
    padding: 60px 20px !important;
  }
  .problems-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .problems-right {
    position: static !important;
  }
  .problems-quote {
    padding: 28px 24px !important;
  }

  /* ============================================
     SERVICES (groups + new-owners)
     3-column grid
     ============================================ */
  .services {
    padding: 60px 20px !important;
  }
  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    grid-template-columns: unset !important;
  }
  .service-card-img {
    height: 200px !important;
  }
  .service-card-body {
    padding: 20px !important;
  }
  .service-title {
    font-size: 16px !important;
  }
  .service-body {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .services-pillar-header {
    padding: 0 0 16px !important;
    margin-bottom: 24px !important;
  }
  .services-pillar-title {
    font-size: 22px !important;
  }

  /* ============================================
     HOW IT WORKS / STEPS (groups + new-owners)
     3-column grid
     ============================================ */
  .how {
    padding: 60px 20px !important;
  }
  .steps-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    grid-template-columns: unset !important;
  }
  .steps-grid::before {
    display: none !important;
  }
  .step {
    padding: 0 !important;
  }

  /* ============================================
     ASSESSMENT / QUIZ (groups)
     ============================================ */
  .assessment {
    padding: 60px 20px !important;
  }
  .assessment-inner {
    padding: 0 !important;
  }
  #quiz-questions,
  #quiz-contact,
  #quiz-results > div {
    padding: 24px 16px !important;
  }
  .quiz-box {
    padding: 24px 20px !important;
    border-radius: 12px !important;
  }
  .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
  }
  .form-group.full {
    grid-column: 1 !important;
  }
  /* Quiz question header row: title + counter */
  .quiz-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* Quiz nav row: back + next buttons */
  .quiz-nav-row {
    flex-direction: row !important; /* keep back/next side by side */
  }
  /* Quiz results: score circle + text */
  .quiz-score-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: center !important;
  }
  /* Quiz results CTA: text + button */
  .quiz-cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .quiz-cta-row .btn-primary {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* ============================================
     TESTIMONIAL (groups)
     2-column grid: image + quote
     ============================================ */
  .testimonial {
    padding: 60px 20px !important;
  }
  .testimonial-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .testimonial-img-wrap {
    max-width: 240px !important;
    margin: 0 auto !important;
  }

  /* ---- FAQ ---- */
  .faq {
    padding: 60px 20px !important;
  }

  /* ---- FINAL CTA ---- */
  .final-cta {
    padding: 60px 20px !important;
    text-align: center !important;
  }
  .final-cta h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  .cta-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-btns a {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  /* ============================================
     FOOTER
     4-column grid
     ============================================ */
  footer {
    padding: 48px 20px 24px !important;
  }
  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    grid-template-columns: unset !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* ============================================
     ABOUT PAGE — BIO CARDS
     2-column grid: sidebar (photo) + content
     ============================================ */
  .bio-section {
    padding: 60px 20px !important;
  }
  .bio-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  /* reverse layout: photo was on right, now both stack same direction */
  .bio-inner.reverse {
    flex-direction: column !important;
  }
  .bio-inner.reverse .bio-sidebar {
    order: -1 !important; /* photo first on mobile too */
  }
  .bio-inner.reverse .bio-content {
    order: 0 !important;
  }
  .bio-sidebar {
    position: static !important; /* remove sticky */
    max-width: 320px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .bio-photo {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto 20px !important;
    display: block !important;
  }
  .bio-creds {
    padding: 20px !important;
  }
  .bio-content .lead-quote {
    font-size: 18px !important;
    padding-left: 16px !important;
  }

  /* About page: shared values 3-column grid */
  .sv-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: unset !important;
  }
  .shared-values {
    padding: 60px 20px !important;
  }

  /* ============================================
     NEW OWNERS PAGE — MULTI-COLUMN SECTIONS
     ============================================ */

  /* problem-grid: 2-col (text + quote box) */
  .problem-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .problem-quote {
    padding: 28px 24px !important;
  }

  /* who-grid: 2-col (image + text) */
  .who-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .who-img-wrap {
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .who-img {
    width: 100% !important;
  }

  /* dk-grid: 2-col (checklist + DISC box) */
  .dk-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    grid-template-columns: unset !important;
  }
  .dk-right {
    padding: 28px 24px !important;
  }

  /* fw-grid: 4-col framework steps */
  .fw-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    grid-template-columns: unset !important;
  }
  .fw-step {
    padding: 28px 24px !important;
  }

  /* outcomes-list: 2-col */
  .outcomes-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
  }

  /* framework-steps (if used) */
  .framework-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    grid-template-columns: unset !important;
  }
  .framework-step {
    padding: 28px 24px !important;
  }

  /* checklist-grid */
  .checklist-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  /* problem-cards */
  .problem-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: unset !important;
  }

  /* ============================================
     RESOURCES PAGE — BLOG GRID
     3-column grid
     ============================================ */
  .blog-section {
    padding: 60px 20px !important;
  }
  .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    grid-template-columns: unset !important;
  }
  .blog-card {
    padding: 0 !important;
  }
  .blog-card-body,
  .card-body {
    padding: 20px !important;
  }

  /* ---- MODAL (resources articles) ---- */
  .modal-content {
    padding: 28px 20px !important;
    margin: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ---- QUIZ RESULTS ---- */
  #r-breakdown {
    flex-direction: column !important;
  }
  #quiz-results > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* ---- GENERAL SECTION SPACING ---- */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section-title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  .section-body {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* ---- TABLET (769px – 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero h1,
  .hero-content-left h1 {
    font-size: clamp(32px, 4vw, 48px) !important;
  }
  .stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .forces-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .about-inner {
    gap: 40px !important;
  }
  .path-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .problem-grid,
  .who-grid,
  .dk-grid {
    gap: 40px !important;
  }
  .bio-inner {
    gap: 48px !important;
  }
  .sv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .fw-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .steps-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}