/*
 * RESPONSIVE STYLES
 * Media queries for all breakpoints — identical to original order
 */

/* Extra Large Screens - min-width: 2401px */
@media (min-width: 1921px) {
  :root {
    --root-font-size: 16px;
  }
}

/* Widescreen - min-width: 1367px and max-width: 1920px */
@media (max-width: 1920px) {
  :root {
    --root-font-size: 16px;
  }
}

/* Laptop - min-width: 1025px and max-width: 1366px */
@media (max-width: 1366px) {
  :root {
    --root-font-size: 13px;
  }

  .page-section {

    h3,
    .heading-title {
      font-size: 3rem !important;
    }

    .cta-banner {
      .cta-banner__content {
        width: 70%;

        .heading-section-title {
          font-size: 2.6rem !important;
          line-height: 1.2em;

          .heading-title {
            display: inline-block !important;
          }
        }
      }

      .cta-banner__visual {
        width: 45%;
      }
    }
  }
}

/* Tablet Portrait - min-width: 768px and max-width: 1024px */
@media (max-width: 1024px) {
  :root {
    --root-font-size: 16px;
  }

  .page-hero {
    .top-title+.elementor-widget-premium-textual-showcase {
      font-size: 2rem;

      .pa-txt-sc__main-item {
        text-align: center !important;
      }
    }
  }

  .page-section {
    padding: 4rem 0px !important;

    h3,
    .heading-title {
      font-size: 2.4rem !important;
    }

    &.e-con.e-flex {
      >.e-con-inner {
        flex-direction: column;
        gap: 2rem !important;
        padding: 0px;

        .page-section__content,
        .page-section__visual,
        .page-section__summary,
        .page-section__content+div>.faq-list {
          width: 100%;
          align-items: center;
          padding: 0px;

          /* +.e-child {
            width: 100%;
          } */
        }

        /* .page-section__header {

          .heading-section-title,
          .elementor-widget-text-editor {
            text-align: left;
          }
        } */

        .page-section__content {

          h2,
          .top-title {
            text-align: center;
          }
        }

        .page-section__visual,
        .page-section__summary {
          padding-top: 0px !important;
        }

        .page-section__visual {
          order: -1;

          .elementor-widget-image,
          .premium-video-box-container>div {
            aspect-ratio: 4/3;
          }
        }
      }
    }

    .page-section__header {
      flex-direction: column;

      >div {
        width: 100%;
        text-align: center;
        align-items: center;

        .heading-section-title {
          text-align: center !important;
          justify-content: center !important;
        }

        .elementor-widget-text-editor {
          text-align: center !important;
          justify-content: center !important;
        }
      }
    }

    .page-section__content {
      .button-group {
        justify-content: center;
        gap: 1rem;
      }

      &+.e-child {
        width: 100%;
      }
    }

    &.page-section--fixed-visual {
      &::before {
        background-image: linear-gradient(15deg,
            var(--e-global-color-bg-secondary) 60%,
            transparent 90%) !important;
      }

      &.page-section--tertiary {
        &::before {
          background-image: linear-gradient(15deg,
              var(--e-global-color-att-dark-blue) 60%,
              transparent 90%) !important;
        }
      }

      padding: 2rem !important;

      >.e-con-inner {
        gap: 0px !important;

        >div {
          width: 100%;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 1rem;

          &:nth-child(2) {
            padding: 2rem 1rem;
          }

        }
      }
    }
  }

  .page-section.page-section--primary+.page-section.page-section--primary,
  .page-section.page-section--secondary+.page-section.page-section--secondary,
  .page-section:not([class*="page-section--"])+.page-section:not([class*="page-section--"]),
  .page-section+.page-section.page-section--primary,
  .page-section.page-section--primary+.page-section {
    padding-top: 0px !important;
  }

  .page-section,
  .article-body {

    & .page-section__visual,
    & .page-section__summary,
    & .page-section__list,
    & .page-section__content+div>.faq-list {
      &:not(.no-title):not(.no-space) {
        padding-top: 0px;
      }
    }
  }

  .elementor-widget-jkit_accordion {
    width: 100%;
    order: 2;
  }

  .image-layers {
    .premium-img-layers-list-item:first-child {
      img {
        aspect-ratio: 4/3 !important;
      }
    }
  }

  .generic-content,
  .optimal-text-width {
    max-width: clamp(28ch, 52ch, 728ch) !important;

    &.generic-content--wide,
    &.optimal-text-width--wide {
      max-width: clamp(32ch, 786ch, 80vw) !important;
    }
  }

  .article-content.article-content--container {
    max-width: clamp(32ch, 786ch, 80vw) !important;
  }

  .cta-banner {
    flex-direction: column-reverse;

    .cta-banner__content {
      z-index: 2;
      align-items: flex-start !important;
      padding: 3rem 1rem 3rem 3rem;
      aspect-ratio: 16/9;
      width: 82%;

      .heading-section-title {
        font-size: 2.2rem !important;
      }

      .heading-section-title,
      .elementor-widget-text-editor {
        text-align: left;
      }
    }

    .cta-banner__visual {
      position: absolute;
      width: 27%;
      bottom: 0;
      right: 0;
      z-index: 1;

      .elementor-widget-image {
        position: relative;
        height: auto;

        .elementor-widget-container {
          background-size: contain;
        }
      }
    }
  }

  .grid-showcase {
    .e-grid {
      grid-template-columns: repeat(2, 50vw);

      .elementor-widget-premium-addon-icon-box {
        text-align: center;
      }
    }
  }

  .treatment-hero {

    .top-title+.elementor-widget-premium-textual-showcase {
      font-size: 2.8rem !important;
      text-align: center !important;
    }

    .treatment-hero__overview,
    .elementor-widget-premium-icon-list {
      font-size: 0.8rem !important;
    }

    .treatment-hero__cta-header {
      justify-content: flex-start;

      .pa-txt-sc__outer-container {
        justify-content: left !important;
      }
    }

    .treatment-hero__dentist {
      .elementor-widget-premium-addon-image-hotspots {
        .elementor-widget-container {
          padding: 0px 2em !important
        }
      }
    }
  }

  .treatment-showcase {
    --grid-columns: 2;
  }

  .corporate-label-bar {
    .elementor-shape-top {
      svg {
        width: 100% !important;
      }
    }
  }

  .feature-grid {
    .elementor-widget-premium-addon-icon-box {
      padding: 0px !important;
    }
  }
}

/* Mobile Portrait - max-width: 767px */
@media (max-width: 767px) {
  :root {
    --root-font-size: 16px;
  }

  .optimal-text-width,
  .generic-content {
    max-width: none !important;

    &.optimal-text-width--wide,
    &.generic-content--wide {
      max-width: none !important;
    }
  }

  .article-content.article-content--container {
    max-width: none !important;
    padding: 1rem !important;

    .elementor-widget-text-editor {
      text-align: left;
    }
  }

  .page-section {
    --width: 100% !important;

    .page-section__header {

      .page-section__caption {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }

      h2,
      .top-title {
        text-align: center;
      }

      .heading-section-title,
      .elementor-widget-text-editor {
        text-align: center !important;
      }
    }

    .page-section__body {
      gap: 2rem;
    }

    .page-section__content {

      >h2,
      .top-title {
        text-align: center;
      }

      >h3,
      .heading-title {
        display: inline-block !important;
        font-size: 2rem !important;
        text-align: center !important;
        justify-content: center !important;
      }
    }

    .page-section__visual,
    .page-section__summary {
      padding-top: 0px !important;
      text-align: center;
      align-items: center;
      justify-content: center;

      .elementor-widget-image {
        aspect-ratio: 4/3;
      }
    }

    &.page-section--secondary {
      .cta-banner {
        .cta-banner__visual {
          .elementor-widget-image {
            border-bottom-color: var(--e-global-color-bg-secondary) !important;
          }
        }
      }
    }
  }

  .hero-banner {
    .hero-banner__title {
      font-size: 2rem !important;
    }
  }

  .treatment-hero {
    .top-title+.elementor-widget-premium-textual-showcase {
      font-size: 2.4rem !important;
    }

    >.elementor-element:first-child {
      .e-con-inner {
        gap: 0px !important;
      }
    }

    .pa-txt-sc__outer-container {
      justify-content: center;
    }

    .premium-image-hotspots-img-wrap {
      border-bottom: solid 4px var(--e-global-color-highlight, #F0F9FF) !important;
    }

    .treatment-hero__overview,
    .elementor-widget-premium-icon-list {
      font-size: 1rem !important;
      margin: 0px;
    }

    .treatment-hero__cta {
      align-items: center;
      margin-bottom: 3rem;

      .treatment-hero__cta-header {
        align-items: center;
        justify-content: center;
        margin-bottom: 0px;

        .pa-txt-sc__outer-container {
          justify-content: center !important;
          align-items: center;
          gap: 0.25rem !important;

          .pa-txt-sc__main-item {
            text-align: center !important;
          }
        }

        .elementor-widget-icon {
          position: relative !important;
          top: auto !important;
          left: auto !important;

          .elementor-icon {
            font-size: 5rem;

            svg {
              width: 1em;
              height: 1em;
            }
          }
        }
      }

      .cta-button-group {
        align-items: center;
      }
    }


    .treatment-hero__dentist {
      width: 80% !important;
      margin: 0 auto !important;

      .elementor-widget-premium-addon-image-hotspots {
        .elementor-widget-container {
          padding: 0px 3em !important
        }
      }
    }
  }

  .treatment-showcase {
    --grid-columns: 1;
  }

  .grid-showcase {
    font-size: 0.8rem;

    >div {
      aspect-ratio: auto !important;
    }

    .grid-gallery {
      >div {
        aspect-ratio: auto !important;
      }
    }
  }

  .step-card {
    container-type: initial;
    aspect-ratio: auto;
    min-height: auto;
    height: auto;
    padding: 0px !important;
    background-position: center;
    background-size: cover;

    .elementor-widget-container {
      background: linear-gradient(30deg, #fff 0%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.2) 100%) !important;
      padding: 1rem 1rem 1rem 2rem;

      .premium-icon-box-container-in {
        min-height: 70cqw;
        padding: 0px !important;
        background: transparent !important;
        align-items: flex-end;
      }
    }

  }

  .cta-banner {
    flex-direction: column-reverse !important;

    .cta-banner__visual {
      aspect-ratio: 1;
      width: 100% !important;
      position: relative;

      .elementor-widget-image {
        border-bottom-left-radius: 20% !important;
        border-bottom-right-radius: 20% !important;
        border-bottom: solid 4px var(--e-global-color-bg-primary, #F0F9FF) !important;

        overflow: hidden;
        position: absolute;
        height: 120%;

        .elementor-widget-container {
          background-size: 75% auto;
        }
      }
    }

    .cta-banner__content {
      flex-direction: column;
      aspect-ratio: auto;
      padding: 2rem;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;

      .heading-section-title,
      .elementor-widget-text-editor {
        justify-content: center !important;
        text-align: center !important;
      }
    }

    .cta-button-group {
      justify-content: center;
    }
  }

  .offcanvas-push {
    &.right {}
  }

  .corporate-label-bar {
    .elementor-shape-top {
      svg {
        width: 150% !important;
      }
    }
  }

  .grid-bullet-list {
    .premium-bullet-list-box {
      grid-template-columns: repeat(1, minmax(0, 1fr));

      .premium-bullet-list-content {
        &:not(:last-child) {
          border-bottom: 1px solid var(--e-global-color-att-dark-blue, #333) !important;
        }
      }
    }
  }

  .image-layers {
    .premium-img-layers-list-item:first-child {
      img {
        aspect-ratio: 4/3 !important;
      }
    }
  }

  .person-showcase {
    padding: 0px 2rem 2rem;

    border-radius: 0.5rem;
    overflow: visible !important;

    .elementor-widget-image {
      width: 60% !important;

      .elementor-widget-container {
        border: solid 3px var(--e-global-color-bg-secondary, #F0F9FF) !important;
        background-color: var(--e-global-color-bg-body) !important;
        transform: translateY(-1rem);
        border-bottom-left-radius: 3rem !important;
        border-bottom-right-radius: 3rem !important;
        border-radius: 1rem !important;
        z-index: 1;
        padding: 8px !important;

        aspect-ratio: 5/6;
      }

      &::before {
        content: "";
        position: absolute;
        top: -0px;
        left: 50%;
        transform: translateX(-50%);
        width: 105%;
        height: 110%;
        background: radial-gradient(circle, var(--e-global-color-text) 0%, transparent 70%);
        filter: blur(10px);
        z-index: 0;
      }

      +.e-con-full {
        padding: 0px;
      }
    }
  }
}