/* ==========================================================================
   Image Block Component
   ========================================================================== */

@layer utilities {
  .image-block {
    --image-block-width-mobile: auto;
    --image-block-height-mobile: auto;
    --image-block-width: auto;
    --image-block-height: auto;

    position: relative;
    display: inline-block;
    width: var(--image-block-width-mobile, auto);
    height: var(--image-block-height-mobile, auto);
  }

  .image-block.image-block--responsive {
    width: auto;
    height: auto;
    max-width: var(--image-block-width);
    max-height: var(--image-block-height);
  }

  /* Responsive dimensions at breakpoint */
  @media (min-width: 640px) {
    .image-block.image-block--screen-sm {
      width: var(--image-block-width, auto);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-sm.image-block--responsive  {
      width: auto;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }
  @media (min-width: 768px) {
    .image-block.image-block--screen-md {
      width: var(--image-block-width, auto);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-md.image-block--responsive {
      width: auto;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }
  @media (min-width: 1024px) {
    .image-block.image-block--screen-lg {
      width: var(--image-block-width, auto);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-lg.image-block--responsive {
      width: auto;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }

  /* --------------------------------------------------------------------------
    Media Container
    -------------------------------------------------------------------------- */

  .image-block__media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .image-block__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* --------------------------------------------------------------------------
    Image Styles with Onload Fade-in
    -------------------------------------------------------------------------- */

  .image-block__image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    
    /* Onload transition: starts invisible, fades in when loaded */
    opacity: 0;
    transition: opacity var(--transition-base, 250ms ease);
  }

  .image-block__image.is-loaded {
    opacity: 1;
  }

  /* For eager loading or cached images, skip animation */
  .image-block__image[loading="eager"].is-loaded,
  .image-block--no-transition .image-block__image {
    transition: none;
  }

  /* --------------------------------------------------------------------------
    Icon Styles
    -------------------------------------------------------------------------- */

  .image-block__icon {
    width: var(--image-block-width, 100%);
    height: var(--image-block-height, auto);
  }

  /* --------------------------------------------------------------------------
    Background Styles
    -------------------------------------------------------------------------- */

  .image-block--has-background {
    /* Add padding when background is shown */
    padding: var(--space-4, 1rem);
  }

  .image-block__background {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* Background Themes */
  .image-block--bg-light-blue .image-block__background {
    background-color: var(--color-cyan-light, #EBF9FE);
  }

  .image-block--bg-light-green .image-block__background {
    background-color: var(--color-green-light, #E6F7ED);
  }

  .image-block--bg-light-gray .image-block__background {
    background-color: var(--color-gray-100, #F5F5F5);
  }

  .image-block--bg-white .image-block__background {
    background-color: var(--color-white, #FFFFFF);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  }

  /* --------------------------------------------------------------------------
    Responsive Adjustments
    -------------------------------------------------------------------------- */

  /* Mobile dimensions (uses mobile-specific CSS vars if set) */
  @media (max-width: 639px) {
    .image-block.image-block--screen-sm {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-sm.image-block--responsive-mobile {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
    .image-block.image-block--screen-sm .image-block__image {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-sm.image-block--responsive-mobile .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
  }
  @media (max-width: 767px) {
    .image-block.image-block--screen-md {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-md.image-block--responsive-mobile {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
    .image-block.image-block--screen-md .image-block__image {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-md.image-block--responsive-mobile .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
  }
  @media (max-width: 1023px) {
    .image-block.image-block--screen-lg {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-lg .image-block__image {
      width: var(--image-block-width-mobile, 100%);
      height: var(--image-block-height-mobile, auto);
    }
    .image-block.image-block--screen-lg.image-block--responsive-mobile {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
    .image-block.image-block--screen-lg.image-block--responsive-mobile .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width-mobile, var(--image-block-width));
      max-height: var(--image-block-height-mobile, var(--image-block-height));
    }
  }

  /* Tablet and up */
  @media (min-width: 640px) {
    .image-block.image-block--screen-sm .image-block__image {
      width: var(--image-block-width, 100%);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-sm.image-block--responsive .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }
  @media (min-width: 768px) {
    .image-block.image-block--screen-md .image-block__image {
      width: var(--image-block-width, 100%);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-md.image-block--responsive .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }
  @media (min-width: 1024px) {
    .image-block.image-block--screen-lg .image-block__image {
      width: var(--image-block-width, 100%);
      height: var(--image-block-height, auto);
    }
    .image-block.image-block--screen-lg.image-block--responsive .image-block__image {
      width: 100%;
      height: auto;
      max-width: var(--image-block-width);
      max-height: var(--image-block-height);
    }
  }
}