/* Classta Embed - Modern viewport height support */
/* Automatically applies to all Classta iframes (by src pattern) or those with the class */
/* 
 * Note: Users can set a fixed height in the iframe's inline style for desktop.
 * This CSS only applies viewport height on mobile devices for optimal mobile experience.
 * On desktop, if no height is set, a default of 600px is used.
 */

iframe[src*="/embed/"],
iframe.classta-embed-iframe {
  /* Default height for desktop (can be overridden by inline style) */
  height: 600px;
}

/* Mobile: Use viewport height for optimal mobile experience */
@media (max-width: 768px) {
  iframe[src*="/embed/"],
  iframe.classta-embed-iframe {
    /* Use small viewport height for initial load (toolbars visible) */
    height: 100svh;
  }

  /* Dynamic viewport height for modern browsers */
  @supports (height: 100dvh) {
    iframe[src*="/embed/"],
    iframe.classta-embed-iframe {
      height: 100dvh;
    }
  }

  /* iOS/Safari specific fix */
  @supports (-webkit-touch-callout: none) {
    iframe[src*="/embed/"],
    iframe.classta-embed-iframe {
      height: -webkit-fill-available;
    }
  }
}

/* Fullscreen mode when modal is open (applied by embed-helper.js) */
.classta-fullscreen-ios {
  height: -webkit-fill-available !important;
}

@supports (height: 100dvh) {
  .classta-fullscreen-ios {
    height: 100dvh !important;
  }
}