/* Wrapper richiesto */
.page-width {
  margin: 0 auto;
  padding-inline: var(--page-padding);
}

[data-section-type="uni-carousel-description"] {
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: var(--color-grey-100, #f5f4f3);

  uni-carousel-description {
    --peek: 22px;

    display: block;

    @media (min-width: 1024px) {
      --peek: 48px;
    }

    .uni-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: clamp(24px, 4vw, 40px);
      align-items: start;

      > * {
        min-width: 0;
      }
    }

    @media (max-width: 900px) {
      .uni-grid {
        grid-template-columns: 1fr;
      }
    }

    .uni-copy {
      .eyebrow {
        color: #2b292a;
        font-family: var(--font-fraunces);
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
      .title {
        color: #2b292a;
        font-family: var(--font-fraunces);
        font-size: 4rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .desc {
        margin-top: 4rem;
        margin-bottom: 6rem;
        color: #2b292a;
        font-family: var(--font-proxima);
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 30px */
      }

      .nav {
        display: flex;
        gap: 10px;
        margin-top: 18px;
      }
    }

    /* Colonna destra / Slider */
    .uni-carousel {
      min-width: 0;

      .swiper {
        /* il "peek" è ottenuto così:
         - padding-inline-end aggiunge spazio interno per far vedere il pezzo
         - margin-inline-end negativo ri-allinea la box con la grid */
        padding-inline-end: var(--peek);
        margin-inline-end: calc(-1 * var(--peek));

        overflow: hidden; /* evita sbordi strani delle slide */
        width: 100%;
        min-width: 0;
      }
    }

    /* Slide + card */
    .swiper-slide {
      /* Non tocchiamo la width (Swiper la setta inline).
       Solo height e box sizing per sicurezza. */
      height: auto;
      box-sizing: border-box;
      max-width: 100%;
    }

    .card {
      background: #fff;
      border-radius: 1.6rem;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100%;

      .card-media {
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        width: 100%;

        img,
        picture {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }

      .placeholder {
        background: linear-gradient(135deg, #ececec, #f7f7f7);
        width: 100%;
        height: 100%;
      }

      .card-body {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        padding: 14px;
        align-items: center;

        .card-title {
          color: #2b292a;
          font-family: var(--font-fraunces);
          font-size: 2.4rem;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .card-meta {
          color: #2b292a;
          font-family: var(--font-proxima);
          font-size: 1.6rem;
          font-style: normal;
          font-weight: 500;
          line-height: 150%; /* 24px */
          grid-column: 1 / 2;
        }
        .card-cta {
          grid-row: 1 / span 2;
          grid-column: 2 / 3;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 1px solid rgba(0, 0, 0, 0.12);
          display: grid;
          place-items: center;
          text-decoration: none;
          transition:
            transform 0.15s ease,
            background 0.15s ease,
            border-color 0.15s ease;

          &:hover {
            transform: translateX(2px);
            background: #f7f7f7;
            border-color: rgba(0, 0, 0, 0.2);
          }

          img {
            width: 16px;
            height: 16px;
            display: block;
          }
        }
      }
    }
  }
}

@media (max-width: 767.98px) {
  [data-section-type="uni-carousel-description"] {
    uni-carousel-description {
      .uni-copy {
        text-align: center;

        .eyebrow {
          font-size: 1.6rem;
        }

        .title {
          font-size: 3.2rem;
        }

        .desc {
          font-size: 1.6rem;
        }

        .nav {
          display: none;
        }
        .desc {
          margin-bottom: 5rem;
        }
      }

      .card {
        .card-body {
          .card-title {
            font-size: 2rem;
          }
        }
      }
    }
  }
}