/* ===== AGGRESSIVE MOBILE FIXES =====
 * Loaded last so it wins the cascade.
 * Uses attribute selectors to override inline styles.
 */

@media (max-width: 768px) {

  /* ============ FOUNDATIONS ============ */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }
  * { box-sizing: border-box !important; max-width: 100% !important; }

  /* Hide sidebar TOC */
  .sidebar-toc { display: none !important; }

  /* Force all images/iframes responsive */
  img, iframe, video, svg {
    max-width: 100% !important;
    height: auto !important;
  }
  iframe[src*="youtube"] { aspect-ratio: 16/9 !important; }

  /* ============ CONTAINERS & SECTIONS ============ */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }
  .section {
    padding: 48px 0 !important;
  }
  .section-card {
    margin: 12px !important;
    padding: 32px 20px !important;
    border-radius: 16px !important;
  }

  /* ============ TYPOGRAPHY ============ */
  h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.2rem !important; line-height: 1.3 !important; }
  h4 { font-size: 1rem !important; line-height: 1.3 !important; }

  /* ============ FORCE GRIDS TO STACK ============ */
  /* Inline grid styles */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Class-based grids */
  .grid-2, .grid-3, .grid-4, .grid-6,
  .hero__grid, .services-grid, .channels-grid, .channel-grid,
  .pas__agitate, .team-grid, .testimonials-grid,
  .hilda-feature__grid, .reviews-section,
  .footer__top, .footer__grid, .footer__nav-grid,
  .features-grid, .resources-grid, .blog-grid, .success-grid,
  .diff-grid, .who-grid, .steps, .steps-grid,
  .training-hero__inner, .training-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Inline flex rows */
  [style*="display: flex"][style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ============ HERO (GLOBAL) ============ */
  .hero { padding: 48px 0 32px !important; }
  .hero::after { display: none !important; }
  .hero__inner { max-width: 100% !important; padding: 0 !important; }
  .hero__sub { font-size: 1rem !important; line-height: 1.6 !important; }
  .hero__asterisk { font-size: 0.78rem !important; }
  .hero__tagline { font-size: 0.7rem !important; }

  /* Hero actions stack */
  .hero__actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero__actions .btn, .hero__actions a {
    width: 100% !important;
    text-align: center !important;
  }

  /* ============ HERO TEAM PHOTOS (kill absolute positioning) ============ */
  .hero__visual {
    position: static !important;
    min-height: auto !important;
    display: block !important;
    margin-top: 24px !important;
  }
  .hero__team-photos {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  [class*="hero__photo"] {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    flex: 1 1 32% !important;
    max-width: 32% !important;
    height: 130px !important;
    border-radius: 12px !important;
    border-width: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  /* Strategy mockup is complex - give it full width on mobile */
  .hero__photo--strategy {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Keep the mockup self-contained */
  .strategy-mockup {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  .strategy-mockup__row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
  }
  .strategy-mockup__channel { flex: 1 1 40% !important; }
  .strategy-mockup__priority { flex: 1 1 40% !important; text-align: right !important; }
  .hero__photo:hover { transform: none !important; }
  .hero__photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero__photo-label {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    top: auto !important;
    right: auto !important;
    font-size: 0.6rem !important;
    padding: 2px 8px !important;
    background: #fff !important;
    color: #1B1918 !important;
    border-radius: 6px !important;
    z-index: 2 !important;
  }
  .hero__visual-caption {
    text-align: center !important;
    margin-top: 12px !important;
    font-size: 0.8rem !important;
  }

  /* Strategy page: strategy mockup + Josh photo (different structure) */
  .strategy-mockup, [class*="mockup"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
  }

  /* ============ STATS BARS ============ */
  .stats-bar, .stats-strip {
    padding: 16px !important;
    margin: 12px !important;
  }
  .stats-bar__inner, .stats-strip__inner {
    flex-wrap: wrap !important;
    gap: 14px 12px !important;
    justify-content: center !important;
  }
  .stats-bar__divider, .stats-strip__divider { display: none !important; }
  .stats-bar__item, .stats-strip__item {
    flex: 1 1 40% !important;
    min-width: 120px !important;
    text-align: center !important;
  }
  .stats-bar__number, .stats-strip__number { font-size: 1.1rem !important; }
  .stats-bar__label, .stats-strip__label { font-size: 0.68rem !important; }

  /* ============ NAV ============ */
  .nav { position: relative !important; padding: 12px 0 !important; }
  .nav .container { padding: 0 16px !important; }
  .nav__links {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    flex-direction: column !important;
    padding: 16px 20px !important;
    gap: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    z-index: 1000 !important;
  }
  .nav__links.active { display: flex !important; }
  .nav__links li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    width: 100% !important;
  }
  .nav__links li:last-child { border: none !important; padding-top: 12px !important; }
  .nav__hamburger { display: flex !important; }
  .nav__logo img { height: 22px !important; }
  .nav__dropdown-menu {
    position: static !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 8px 0 0 16px !important;
    min-width: auto !important;
    width: 100% !important;
    background: transparent !important;
  }
  .nav__dropdown:hover .nav__dropdown-menu { display: block !important; }
  .nav__dropdown-menu::before { display: none !important; }

  /* ============ BUTTONS ============ */
  .btn { padding: 12px 24px !important; font-size: 0.85rem !important; }

  /* ============ TEAM CARDS ============ */
  .team-card, [class*="team-card"] {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }
  .team-card img,
  .team-card__photo {
    margin: 0 auto !important;
    width: 80px !important;
    height: 80px !important;
  }

  /* ============ FEATURED / BIG CARDS ============ */
  .service-card, .feature-card, .pas__pain {
    padding: 24px 20px !important;
  }
  .service-card--featured {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
  }

  /* ============ REVIEW BAR / MARQUEE ============ */
  .review-bar { margin: 0 !important; padding: 16px 0 !important; }
  .review-bar__track { gap: 16px !important; animation-duration: 60s !important; }
  .review-bar__item { min-width: 240px !important; max-width: 280px !important; padding: 0 12px !important; }
  .review-bar__text { font-size: 0.8rem !important; }

  /* Google rating card */
  .google-rating-card { padding: 20px !important; }

  /* ============ QUIZ ============ */
  #quizWidget { padding: 24px 16px !important; }
  .qz-option, .qz-multi {
    width: 100% !important;
    padding: 14px 16px !important;
  }
  .qz-option strong, .qz-multi strong { font-size: 0.92rem !important; }

  /* ============ COMPARE TABLE ============ */
  .compare-table {
    display: block !important;
    overflow-x: auto !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  .compare-table th,
  .compare-table td {
    padding: 8px 10px !important;
  }

  /* ============ TESTIMONIAL CARDS ============ */
  .testimonial-card { padding: 20px !important; }
  .testimonial-card__quote { font-size: 0.92rem !important; }

  /* ============ CASE CARDS ============ */
  .case-card, .case-card--link { padding: 20px !important; }

  /* ============ FAQ ============ */
  .faq-item summary { font-size: 0.9rem !important; padding: 16px 0 !important; }

  /* ============ DARK SECTIONS ============ */
  .section--dark {
    margin: 12px !important;
    padding: 40px 20px !important;
    border-radius: 16px !important;
  }

  /* ============ HILDA FEATURE ============ */
  .hilda-feature {
    margin: 12px !important;
    padding: 40px 20px !important;
    border-radius: 16px !important;
  }
  .hilda-feature__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hilda-card { padding: 20px !important; }

  /* ============ FOOTER ============ */
  .footer {
    margin: 12px !important;
    padding: 40px 20px 24px !important;
    border-radius: 16px !important;
  }
  .footer__top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 24px !important;
  }
  .footer__nav-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .footer__brand p, .footer__tagline { font-size: 0.85rem !important; }

  /* ============ CTA SECTION ============ */
  .cta-section, [class*="cta-"] { padding: 48px 20px !important; }

  /* ============ TRAINING-SPECIFIC ============ */
  .training-hero__right {
    margin-top: 20px !important;
    padding: 24px !important;
  }
  .channel-card-v2 { padding: 24px 20px !important; }
  .channel-card-v2__logo { max-height: 28px !important; width: auto !important; }
  .channel-card-v2__tags { gap: 6px !important; }
  .channel-card-v2__tag { font-size: 0.68rem !important; padding: 3px 8px !important; }

  .channel-card-v2--featured,
  .ai-banner {
    grid-column: 1 / -1 !important;
    display: block !important;
    padding: 24px 20px !important;
  }

  /* ============ STRATEGY-SPECIFIC ============ */
  .path-flow, .path-steps {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .path-step, .path-viz__callout {
    width: 100% !important;
    text-align: center !important;
  }
  .path-card, [class*="path-card"] {
    padding: 24px 20px !important;
    width: 100% !important;
  }
  .you-are-here, [class*="you-are-here"] {
    position: static !important;
    margin: 8px auto !important;
    transform: none !important;
    display: inline-block !important;
  }

  /* Strategy document mockup (Priority 1 / Priority 2 / Not now) */
  .strategy-doc, .strategy-mockup {
    transform: none !important;
    margin: 0 auto !important;
    max-width: 320px !important;
    width: 100% !important;
  }

  /* ============ AUDIT PAGE ============ */
  .audit-form, .audit-input, [class*="audit"] input { width: 100% !important; }

  /* ============ CHAT WIDGET ============ */
  #hilda-chat-window, .hilda-chat-window {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 80px !important;
  }

  /* ============ ABSOLUTE POSITIONED DECORATIONS ============ */
  /* Any absolute-positioned decorative element outside hero should be neutralised if it breaks layout */
  .section::before, .section::after { opacity: 0.03 !important; }

  /* ============ AVAILABILITY PILL (training) ============ */
  .availability, [class*="avail"] {
    flex-wrap: wrap !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }

  /* ============ BLOG / RESOURCES GRIDS ============ */
  [class*="blog-card"], [class*="resource-card"] { width: 100% !important; padding: 20px !important; }

  /* Category / filter pills */
  .filter-pills, .category-pills, [class*="filter-pill"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ============ EMBEDDED MOCKUPS (all pages) ============ */
  [class*="mockup"], [class*="-doc"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

}

/* Small phones */
@media (max-width: 480px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .stats-bar__item, .stats-strip__item { flex: 1 1 100% !important; }
  .footer__nav-grid { grid-template-columns: 1fr !important; }
  .hero__photo, .hero__photo--1, .hero__photo--2, .hero__photo--hilda {
    height: 100px !important;
  }
  .hero__photo-label { font-size: 0.55rem !important; }
  .section-card, .hilda-feature, .footer, .section--dark {
    margin: 8px !important;
  }
}