/* ==========================================================================
   IMAGE-TEXT BLOCK - Mobile First
   ========================================================================== */

/* Base Styles (Mobile) */
section.image-text {
  margin: 4rem 0;

  .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* Mobile: Image always on top */
  .image {
    width: 100%;
    order: 1;
  }

  /* Mobile: Text always below */
  .text {
    width: 100%;
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  h2 {
    color: var(--color-tcc-blue);
    margin: 0;
  }

  h3 {
    text-transform: none;
    color: var(--color-tcc-blue);
    margin: 0;
  }

  p {
    font-size: var(--text-xl);
    margin: 0 0 1rem;
    text-wrap: pretty;
  }

  ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    font-size: var(--text-xl);
    margin: 0;
  }
}

/* Style Primary (Mobile) */
.image-text.style-primary {
  .image-container {
    min-height: auto;
  }

  .image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
  }
}

/* Style Full Width (Mobile) */
.image-text.style-full-width {
  .full-width-bg {
    position: relative;
    background: var(--color-tcc-light-cyan);
    width: 100%;
    overflow: hidden;

    .image {
      width: 100%;
      height: auto;
    }

    .image img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .container {
    position: relative;
    z-index: 1;
    padding: 2rem;
  }

  .container .text {
    padding: 0;
  }
}

/* Style Small (Mobile) */
.image-text.style-small {
  .image img {
    aspect-ratio: 1;
    border-radius: 100%;
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }

  .text {
    text-align: center;
  }

  h2 {
    text-transform: none;
    font-weight: 600;
    text-wrap: balance;
    margin: 0;
  }
}

/* Style Rounded (Mobile) */
.image-text.style-rounded {
  .image img {
    border-radius: 1rem;
    overflow: hidden;
    object-fit: cover;
    width: 100%;
  }

  h2 {
    text-transform: none;
    font-weight: 600;
    margin: 0;
  }
}

/* ==========================================================================
   DESKTOP STYLES - 1024px and up
   ========================================================================== */

@media (min-width: 1024px) {
  section.image-text {
    padding: 0;

    .container {
      flex-direction: row;
      gap: 2rem;
    }

    .image {
      width: 50%;
      order: 0;
    }

    .text {
      width: 50%;
      order: 0;
      justify-content: center;
    }
  }

  /* Style Primary (Desktop) */
  .image-text.style-primary {
    margin: 5rem 0;

    .image-container {
      min-height: 700px;
    }

    .image img {
      background: var(--color-tcc-blue);
      padding: 1rem 1rem 1rem 0;
      position: absolute;
      top: 50%;
      left: 0;
      height: auto;
      max-height: 100%;
      max-width: 45%;
      min-height: 700px;
      width: auto;
      transform: translateY(-50%);
      object-fit: cover;
      border-radius: 0 350px 350px 0;
    }

    &.layout-right .image {
      order: 2;
    }

    &.layout-right .image img {
      right: 0;
      left: auto;
      border-radius: 100% 0 0 100%;
      padding: 1rem 0 1rem 1rem;
    }
  }

  /* Style Full Width (Desktop) */
  .image-text.style-full-width {
    .container {
      justify-content: flex-end;
    }

    .full-width-bg {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 0;
      display: flex;

      .image {
        height: 100%;
        width: 50%;
      }

      .image img {
        height: 100%;
        width: 100%;
      }
    }

    .container .text {
      padding: 0 0 0 4rem;
    }

    &.layout-right {
      .container {
        justify-content: flex-start;
      }

      .full-width-bg {
        justify-content: flex-end;
      }

      .image {
        order: 2;
      }

      .text {
        padding: 0 4rem 0 0;
      }
    }
  }

  /* Style Small (Desktop) */
  .image-text.style-small {
    .container {
      gap: 8rem;
    }

    .text {
      width: 75%;
      text-align: left;
    }

    h2 {
      max-width: 580px;
    }

    .image {
      width: 25%;
    }

    .image img {
      max-width: none;
      transition: all 0.3s ease;

      &:hover {
        border-radius: 1rem;
      }
    }

    &.layout-right .image {
      order: 2;
    }
  }

  /* Style Rounded (Desktop) */
  .image-text.style-rounded {
    .container {
      gap: 8rem;
    }

    .text {
      width: 50%;
    }

    .image {
      width: 50%;
    }

    &.layout-right .image {
      order: 2;
    }
  }

  /* Layout Options (Desktop) */
  .image-text.layout-right {
    .image {
      order: 2;
    }
  }
}