/* =========================================
   Info: Image + Accents (Left)
   ========================================= */

.info-image-accent-left {
  margin-bottom: 3rem;
}

.info-image-accent-left .accent-stage {
  position: relative;
  inline-size: 100%;
  min-block-size: 1px;
  overflow: visible;
}

/* -----------------------------------------
   MOBILE-FIRST — image centered
   ----------------------------------------- */
.info-image-accent-left .image-wrap {
  inline-size: clamp(12rem, 64vw, 20rem);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.info-image-accent-left .image-wrap img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* keep same diagonal rounding (TL & BR rounded) */
  border-radius: clamp(2rem, 5vw, 4rem) 0;
}

/* Accents base */
.info-image-accent-left .accent {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

/* Accent 1 — bottom-left (smaller) */
.info-image-accent-left .accent.a1 {
  inline-size: 5rem;
  bottom: -12px;
  left: 0;
  background: var(--citrus-green);
  border-radius: 0 clamp(1.5rem, 5vw, 4rem) 0 clamp(1.5rem, 5vw, 4rem); /* TR + BL */
  z-index: 3;
}

/* Accent 2 — top-right (larger) */
.info-image-accent-left .accent.a2 {
  inline-size: 6rem;
  top: -12px;
  right: 0;
  background: var(--sky-blue);
  border-radius: 0 clamp(1.5rem, 5vw, 4rem) 0 clamp(1.5rem, 5vw, 4rem); /* TR + BL */
  z-index: 3;
}

/* -----------------------------------------
   MOBILE MEDIUM (480–639px)
   ----------------------------------------- */
@media (min-width: 30rem) and (max-width: 39.9375rem) {
  .info-image-accent-left .accent.a1 {
    inline-size: 6rem;
    left: 2.75rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
  .info-image-accent-left .accent.a2 {
    inline-size: 7rem;
    right: 2.75rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
}

/* -----------------------------------------
   MOBILE LARGE (640–767px)
   ----------------------------------------- */
@media (min-width: 40rem) and (max-width: 47.9375rem) {
  .info-image-accent-left .image-wrap {
    inline-size: clamp(13rem, 75vw, 19rem);
  }
  .info-image-accent-left .accent.a1 {
    inline-size: 6rem;
    left: 6.5rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
  .info-image-accent-left .accent.a2 {
    inline-size: 7rem;
    right: 6rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
}

/* -----------------------------------------
  TABLET PORTRAIT (768–1023px)
   ----------------------------------------- */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .info-image-accent-left .image-wrap {
    inline-size: clamp(16rem, 60vw, 22rem);
  }
  .info-image-accent-left .accent.a1 {
    inline-size: 8rem;
    left: 5.75rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
  .info-image-accent-left .accent.a2 {
    inline-size: 9rem;
    right: 4.75rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
}

/* -----------------------------------------
   DESKTOP (≥1024px)
   ----------------------------------------- */
@media (min-width: 64rem) {
  .info-image-accent-left .image-wrap {
    inline-size: clamp(20rem, 42vw, 25rem);
    margin-inline-start: 6.95rem;
    margin-inline-end: auto;
  }

  .info-image-accent-left .image-wrap img {
    border-radius: clamp(1.5rem, 5vw, 4rem) 0;
  }

  /* Bottom-left accent (smaller) */
  .info-image-accent-left .accent.a1 {
    inline-size: clamp(7rem, 10vw, 9rem);
    bottom: 0;
    left: 0;
    border-radius: 0 clamp(1.5rem, 5vw, 4rem) 0 clamp(1.5rem, 5vw, 4rem);
  }

  /* Top-right accent (larger) */
  .info-image-accent-left .accent.a2 {
    inline-size: clamp(9rem, 22vw, 16rem);
    top: 0;
    left: auto;
    right: 0;
    border-radius: 0 clamp(1.5rem, 5vw, 6rem) 0 clamp(1.5rem, 5vw, 6rem);
  }
}