/*
 * LAYOUT STYLES
 * Page-level structural elements: hero, sections, grids, containers
 */

.page-hero {
  &:not(.no-space) {
    --padding-top: 6rem;
    --padding-bottom: 6rem;
  }

  &:not(.hero-banner):not(.treatment-hero) {
    .pa-txt-sc__main-item {
      font-size: 1.25em !important;
    }
  }

  .top-title {
    border-color: var(--e-global-color-accent, #F0F9FF);
    border-width: 0.1px;
  }

  .top-title+.elementor-widget-premium-textual-showcase {
    font-size: 3.2rem;
    max-width: clamp(26ch, 72ch, 60vw) !important;

    url(../../../../uploads/elementor) .pa-txt-sc__outer-container {
      line-height: 1.1em;
      column-gap: 0.25em;
      row-gap: 0px;
    }

    .pa-txt-sc__item-container {
      padding: 0px !important;

      .pa-txt-sc__main-item {
        font-size: 1em;
      }

      img.pa-txt-sc__main-item {
        object-fit: contain !important;
        width: auto !important;
      }

      &:not(.pa-txt-sc__effect-none) {
        img.pa-txt-sc__main-item {
          height: 0.8em !important;
        }
      }

      &.pa-txt-sc__effect-none {
        padding: 0px !important;

        img.pa-txt-sc__main-item {
          height: 1em !important;
        }
      }
    }
  }

  .elementor-widget-premium-textual-showcase+.elementor-widget-text-editor {
    font-size: 1rem !important;
    line-height: 1.6em !important;

    >.elementor-widget-container {
      margin: 0px;
    }
  }
}

.page-section,
.article-body {
  &:not(.no-space) {
    &:not(.page-section--narrow) {
      padding: 4rem 0px;
    }

    &.page-section--narrow {
      padding: 2rem 0px;
    }
  }

  p+p {
    margin-top: 1rem;
  }

  ul:not(.premium-bullet-list-box) {
    padding-left: 1rem;
    margin-block: 1rem;
  }

  .page-section__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .page-section__content,
  .page-section__content>.e-child,
  .page-section__caption,
  .page-section__caption>.e-child,
  .page-section__summary,
  .page-section__summary>.e-child {
    gap: 1rem;

    .top-title+.elementor-widget-premium-textual-showcase,
    .top-title+.elementor-widget-jkit_heading {
      margin: -0.5rem 0px 0px 0px;

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

        >.style-gradient {
          background-image: linear-gradient(181deg,
              var(--e-global-color-accent) 65%,
              var(--e-global-color-att-dark-blue) 95%) !important;
        }
      }
    }

    .elementor-widget-text-editor {
      >.elementor-widget-container {
        margin: 0px 0.4em;
      }
    }

    .button-group {
      gap: 1rem;
    }
  }

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

  .page-section__visual {

    .elementor-widget-image,
    .elementor-widget-premium-addon-video-box {
      width: 100%;
      overflow: hidden;
      border-radius: 0.5rem;

      img {
        border-radius: 0px !important;
      }
    }
  }

  .page-section__tabs {
    .premium-tabs {
      border: none;

      .premium-tab-content {
        padding: 2rem 0rem !important;
      }

      .premium-tabs-nav-list-item {
        .premium-tab-link {
          padding: 1rem;
          border-color: var(--e-global-color-accent, #009DE4) !important;
        }

        &.tab-current {

          .premium-tab-arrow,
          .premium-tab-arrow-border {
            border-top-color: var(--e-global-color-accent, #009DE4) !important;
            top: 0px;
          }

          .premium-tab-link {
            background-color: var(--e-global-color-accent, #009DE4) !important;
            color: var(--e-global-color-on-dark, #FFFFFF) !important;
          }
        }

        &+.premium-tabs-nav-list-item {
          margin-left: -1px !important;
        }
      }

      &:not(.tab-current) {
        .premium-tab-link {
          background-color: transparent !important;
          color: var(--e-global-color-text-secondary, #2d2d2d) !important;
        }
      }
    }
  }

  &.page-section--primary {
    .page-section--secondary {
      padding: 4rem !important;
    }
  }

  &.page-section--secondary {
    &:not(.no-space) {
      padding: 5rem 0px;
    }

    background-color: var(--e-global-color-bg-secondary, #E0F2FE) !important;

    .top-title {
      border-color: var(--e-global-color-info, #009DE4);
    }

    &+.page-section--secondary {
      .cta-banner {
        margin-top: 4rem;
      }
    }

    .person-card {
      background-color: var(--e-global-color-bg-primary, #FFFFFF) !important;
    }
  }

  &.page-section--tertiary {
    color: var(--e-global-color-on-dark, E0F2FE);
    background-color: var(--e-global-color-att-dark-blue, #2d2d2d);
    border-top: solid 0.5rem var(--e-global-color-text-secondary, #2d2d2d) !important;
    border-bottom: solid 1rem var(--e-global-color-att-dark-blue, #2d2d2d) !important;

    &::before {}

    .top-title {
      color: var(--e-global-color-on-dark, #E0F2FE);
      border-color: var(--e-global-color-att-gray, #F0F9FF);
    }
  }

  &.page-section--fixed-visual {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 80% center !important;

    &::before {
      background-color: transparent;
      background-image: linear-gradient(100deg, var(--e-global-color-bg-secondary) 50%, transparent 50%);
    }
  }
}

.optimal-text-width {
  max-width: clamp(26ch, 46ch, 72ch) !important;

  &.optimal-text-width--wide {
    max-width: clamp(26ch, 72ch, 60vw) !important;
  }
}

.generic-content {
  max-width: clamp(26ch, 46ch, 72ch) !important;

  &.generic-content--wide {
    max-width: clamp(26ch, 72ch, 60vw) !important;
  }
}

.premium-msection-wrap {
  padding: 0px;

  .premium-msection-content-wrap {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;

    >div {
      width: 100% !important;
      height: 100% !important;
    }

    .page-section.h-full {
      min-height: 100% !important;
    }

    .elementor-widget-html {
      width: 100% !important;
    }
  }
}

.top-title {
  color: var(--e-global-color-accent, blue);
  border: solid 1px var(--e-global-color-bg-secondary, gray);
  border-radius: 0.25em;
  font-size: 0.8rem;
  padding: 0.75em 1em;
  width: fit-content !important;

  h1,
  h2,
  h3 {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 1em;
    font-weight: 900;
    letter-spacing: normal;
  }
}

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

  >div {
    aspect-ratio: 1 !important;
    overflow: hidden;
  }

  .grid-gallery {
    >div {
      aspect-ratio: 1 !important;
      overflow: hidden;
    }
  }

  .e-grid {
    display: grid;
    grid-template-columns: repeat(2, 25vw);
    gap: 0;
  }

  .elementor-widget-image,
  .elementor-widget-premium-addon-icon-box {
    flex-grow: 1;
    height: 100% !important;
  }

  .elementor-widget-premium-addon-icon-box {
    .elementor-widget-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .premium-icon-box-icon {
      font-size: 2rem !important;
    }

    .premium-icon-box-title {
      font-family: var(--e-global-typography-secondary-font-family) !important;
      font-weight: 700 !important;
      color: var(--e-global-color-on-dark, #fff) !important;
      font-size: 1.4em !important;
      line-height: 1.2em !important;
    }

    .premium-icon-box-content {
      font-family: var(--e-global-typography-primary-font-family) !important;
      font-weight: 400 !important;
      color: var(--e-global-color-on-dark, #fff) !important;
      font-size: 1em !important;
    }

    .premium-icon-box-text-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}

.article-content {

  h2,
  h3,
  h4 {
    font-family: var(--e-global-typography-secondary-font-family);
    font-weight: bold;
    color: var(--e-global-color-primary, #dde);

    &:not(:first-child) {
      margin-block-start: 1.5em;
    }

    margin-block-end: 0.5em;
    line-height: 1.2em;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.25em;
  }

  h4 {
    font-size: 1.125em;
  }

  p {
    line-height: 1.6em;
  }

  blockquote {
    font-style: italic;
    font-weight: 500;
    margin: 2rem 0px 2rem 1rem;
    width: calc(100% - 2rem);
    padding: 1rem;
    border-left: solid 1px var(--e-global-color-accent, #009DE4);
  }

  &.article-content--container {
    max-width: clamp(26ch, 72ch, 60vw) !important;
    background-color: var(--e-global-color-bg-body, #fff) !important;
    padding: 4rem;
    box-shadow: 0px 20px 60px 0px rgba(76.00000000000001, 87.99999999999993, 227, 0.15);
  }
}