/* Mobile (default): S (343px) */
.editorial-carousel-card-container {
  --editorial-card-width-s: 21.4375rem;
  --editorial-card-border-radius: var(--radius-1, var(--Card-Radius, 1.5rem));
}

/* Tablet Portrait: S (302px) */
@media (768px <= width < 1024px) {
  .editorial-carousel-card-container {
    --editorial-card-width-s: 18.875rem;
    --editorial-card-border-radius: var(--radius-1, var(--Card-Radius, 1.5rem));
  }
}

/* Desktop Small: S (276px), M (373px) */
@media (1024px <= width < 1200px) {
  .editorial-carousel-card-container {
    --editorial-card-width-s: 17.25rem;
    --editorial-card-width-m: 23.3125rem;
    --editorial-card-border-radius: var(--Card-Radius, 1.5rem);
  }
}

/* Desktop: S (316px), M (426px) — scaled via root font-size above 1440px */
@media (width >= 1200px) {
  .editorial-carousel-card-container {
    --editorial-card-width-s: 19.75rem;
    --editorial-card-width-m: 26.625rem;
    --editorial-card-border-radius: var(--Card-Radius, 1.5rem);
  }
}

.editorial-carousel-card-wrapper {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  height: 100%;

  & .editorial-carousel-card-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    max-width: 100%;
    height: 100%;

    /* Size via var (0=S, 1=M) */
    --_size: var(--editorial-card-size, 0); /* 0=S (default), 1=M */
    --_w-s: var(--editorial-card-width-s);
    --_w-m: var(
      --editorial-card-width-m,
      var(--editorial-card-width-s)
    ); /* fallback se M non esiste */

    width: calc(var(--_w-s) + (var(--_w-m) - var(--_w-s)) * var(--_size));
    border-radius: var(
      --editorial-card-border-radius,
      var(--Card-Radius, 1.5rem)
    );
    background: var(--Card-Insurance-Product-Card-Background, #fff);
    box-shadow: var(--Depth-Positive-S, 2px) var(--Depth-Positive-S, 2px)
      var(--P08, 8px) 0 rgb(0 0 0 / 8%);

    & .editorial-carousel-card-image {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: stretch;

      /* Aspect ratio: 0 = S (4/3), 1 = M (16/9) */
      --_ar-s: 4 / 3;
      --_ar-m: 16 / 9;

      aspect-ratio: calc(
        var(--_ar-s) + (var(--_ar-m) - var(--_ar-s)) * var(--_size)
      );
      border-radius: var(--Images-Radius, 1.5rem) var(--Images-Radius, 1.5rem)
        var(--Radius-Zero, 0) var(--Radius-Zero, 0);
      overflow: hidden;

      & img,
      & picture {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--Images-Radius, 1.5rem) var(--Images-Radius, 1.5rem)
          var(--Radius-Zero, 0) var(--Radius-Zero, 0);
        object-fit: cover;
        object-position: top;
      }
    }

    & .editorial-carousel-card-content {
      flex: 1;
      display: flex;
      position: relative;
      padding: var(--Card-Insurance-Product-Card-Vertical-Padding, 1.5rem)
        var(--Card-Insurance-Product-Card-Horizontal-Padding, 1.5rem);
      flex-direction: column;
      align-items: start;
      gap: var(--Card-Insurance-Product-Card-Gap, 1.5rem);
      align-self: stretch;
      min-height: 0;

      & .editorial-carousel-card-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--Card-Insurance-Product-Card-Text-Gap, 0.5rem);
        align-self: stretch;
        min-height: 0;

        & .title {
          align-self: stretch;
          color: var(--Card-Insurance-Product-Card-Title, #001c35);
          text-align: start;
          font: var(--Heading);
          letter-spacing: -0.015rem;
        }

        & .description {
          align-self: stretch;
          color: var(--Card-Insurance-Product-Card-Body, #001c35);
          text-align: start;
          font: var(--Body-Base);
        }
      }

      & .button-subdescription {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--Card-Insurance-Product-Card-Button-Gap, 0.5rem);
        align-self: stretch;
        flex-shrink: 0;

        & .subdescription {
          align-self: stretch;
          color: var(--Card-Insurance-Product-Card-Details, #63727d);
          text-align: start;
          font: var(--Body-Small);
        }
      }
    }
  }
}

/* Tablet Portrait */
@media (768px <= width < 1200px) {
  .editorial-carousel-card-wrapper {
    & .editorial-carousel-card-container {
      & .editorial-carousel-card-image {
        & img,
        & picture {
          width: 100%;
        }
      }

      & .editorial-carousel-card-content {
        padding: var(--Card-Insurance-Product-Card-Vertical-Padding, 1.5rem)
          var(--Card-Insurance-Product-Card-Horizontal-Padding, 1.5rem)
          var(--Card-Insurance-Product-Card-Vertical-Padding, 1.5rem)
          var(--Card-Insurance-Product-Card-Horizontal-Padding, 1.5rem);

        & .editorial-carousel-card-text {
          & .title {
            font: var(--Subheading);
            letter-spacing: -0.0125rem;
          }
        }
      }
    }
  }
}

/* Mobile */
@media (width < 768px) {
  .editorial-carousel-card-wrapper {
    .editorial-carousel-card-container {
      & .editorial-carousel-card-image {
        border-radius: var(--Images-Radius, 1.5rem) var(--Images-Radius, 1.5rem)
          var(--Radius-Zero, 0) var(--Radius-Zero, 0);

        & img,
        & picture {
          width: 100%;
        }
      }

      & .editorial-carousel-card-content {
        padding: var(--Card-Insurance-Product-Card-Vertical-Padding, 1.5rem)
          var(--Card-Insurance-Product-Card-Horizontal-Padding-M, 1rem);
        gap: var(--Card-Insurance-Product-Card-Gap, 1.5rem);
      }
    }

    &.slide-hidden {
      display: none;
    }
  }
}