/**
 * HTML Embed Section Component
 * Flexible section for embedding custom HTML code
 */

.html-embed {
  position: relative;
  width: 100%;
}

/* Background Color Options */
.html-embed--bg-transparent {
  background-color: transparent;
}

.html-embed--bg-white {
  background-color: #fff;
}

.html-embed--bg-light {
  background-color: #f5f5f5;
}

.html-embed--bg-gray {
  background-color: #e8e8e8;
}

.html-embed--bg-dark {
  background-color: #333;
}

.html-embed--bg-black {
  background-color: #000;
}

/* Container Width Options */
.html-embed__container--narrow {
  max-width: 800px !important;
}

.html-embed__container--default {
  max-width: var(--container-max);
}

.html-embed__container--wide {
  max-width: 1600px !important;
}

.html-embed__container--full {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Embed Content */
.html-embed__content {
  width: 100%;
}

/* Reset some common iframe styles */
.html-embed__content iframe {
  max-width: 100%;
  border: 0;
}

/* Common embed containers */
.html-embed__content > div,
.html-embed__content > form {
  margin: 0 auto;
  max-width: 100%;
}

/* Responsive embeds */
.html-embed__content .embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.html-embed__content .embed-responsive::before {
  display: block;
  content: "";
}

.html-embed__content .embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.html-embed__content .embed-responsive-4by3::before {
  padding-top: 75%;
}

.html-embed__content .embed-responsive iframe,
.html-embed__content .embed-responsive embed,
.html-embed__content .embed-responsive object,
.html-embed__content .embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile adjustments - FORCE FULL WIDTH */
@media (max-width: 767px) {
  .html-embed {
    padding-top: var(--space-48) !important;
    padding-bottom: var(--space-48) !important;
  }
  
  /* Override ALL container width classes on mobile */
  .html-embed__container--narrow,
  .html-embed__container--default,
  .html-embed__container--wide,
  .html-embed__container--full {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remove ALL container constraints on mobile */
  .html-embed .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Force embed content to full width */
  .html-embed__content {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .html-embed__content > div,
  .html-embed__content > form {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Force all nested containers to full width too */
  .html-embed__content * {
    max-width: 100% !important;
  }
  
  .html-embed__content iframe {
    width: 100% !important;
    min-width: 100% !important;
  }
}