/* 
 * Minimal Mobile Fixes
 * These styles adjust typography and specific component layouts 
 * without overriding the core grid layout built into res_*.css.
 */

@media screen and (max-width: 900px) {
  /* Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
  }

  /* Typography Scaling for smaller screens */
  .mat-display-large, h1, .title.mat-display-large {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }
  
  .mat-display-medium, h2, .title.mat-display-medium, .section-title .title {
    font-size: 2rem !important;
    line-height: 1.25 !important;
  }
  
  .mat-headline-small, h3, .title.mat-headline-small {
    font-size: 1.5rem !important;
  }

  .mat-body-large, p, .description.mat-body-large {
    font-size: 1rem !important;
  }

  /* App Hero adjustments */
  app-hero > .wrapper {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  /* Header adjustments */
  app-header > div, .header {
    padding: 12px 16px !important;
    justify-content: space-between !important;
  }

  /* Hide desktop navigation elements */
  .nav {
    display: none !important;
  }

  .header-right {
    display: flex !important;
  }

  .btn, .mdc-button, .mat-mdc-button, button {
    padding: 0 16px !important;
    font-size: 0.9rem !important;
  }

  /* Accordions */
  .faq-accordion-header {
    padding: 16px !important;
  }

  .faq-accordion-body {
    padding: 16px !important;
  }

  /* ================================================================
     CRITICAL: Fix the examples list iframe scroll trap on mobile.
     iOS Safari lets iframes capture touch events even with
     pointer-events:none on the parent. The only reliable fix is to
     collapse the iframe container so it can't cover the viewport.
     ================================================================ */
  
  /* The "How Wisdumm can be used" section wrapper.
     Above ~700px the iframe is wide enough that examples.html keeps its
     two-column layout, which wants the full height. */
  app-text-animation .media-wrapper {
    height: 520px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 16px !important;
    padding-top: 0 !important;
  }

  /* The iframe inside it — disable interaction completely */
  app-text-animation .media-wrapper iframe {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* The section heading ran to two oversized lines and ate the panel's space */
  app-text-animation .content .title {
    font-size: 1.85rem !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }

  /* General media-wrapper height fix */
  .media-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* The "How Wisdumm can be used" parent container — 
     reduce padding and prevent it from being oversized */
  app-text-animation .container {
    padding: 0 !important;
    margin: 20px 16px !important;
  }

  app-text-animation .content {
    padding: 0 16px 24px 16px !important;
  }

  /* Glassmorphism info boxes — stack nicely on mobile */
  .section-title {
    padding: 0 16px !important;
  }
}

/* Below ~700px the iframe is narrow enough that examples.html stacks the
   list above the panel. The panel is 16:9, so its height grows with the
   iframe's width — the wrapper has to track that or the list gets crushed.
   56.25vw is the panel; the +173px covers the list, gap and padding. */
@media screen and (max-width: 700px) {
  app-text-animation .media-wrapper {
    height: calc(56.25vw + 173px) !important;
    max-height: none !important;
  }
}

/* ================================================================
   Global: Absolute positioning for video/iframe inside media-wrapper
   to fix the black panel / padding-top: 56.25% aspect ratio hack.
   ================================================================ */
.media-wrapper video, 
.media-wrapper .interactive-iframe, 
.media-wrapper .interactive-canvas-iframe, 
.media-wrapper .interactive-3d-iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}