/* ============================
   ADRASA · Why Ribbon
   Background is on the RIBBON (card), not the Elementor Section
============================ */

.adrasa-why {
  /* Scale token (keep as-is) */
  --adrasa-scale: 0.88;

  /* Colors */
  --adrasa-navy: #1c3463;
  --adrasa-navy-2: #1c3066;
  --adrasa-cyan: #3fb6e2;
  --adrasa-ice: #c6e3ee;

  /* ✅ Fluid spacing (desktop/tablet) */
  --adrasa-why-pad-top: clamp(18px, 2.2vw, calc(28px * var(--adrasa-scale)));
  --adrasa-why-pad-bottom: clamp(26px, 3.6vw, calc(56px * var(--adrasa-scale)));

  /* Card */
  --adrasa-why-radius: clamp(16px, 1.6vw, calc(22px * var(--adrasa-scale)));
  --adrasa-why-pad: clamp(16px, 2.2vw, calc(26px * var(--adrasa-scale)));
  --adrasa-why-pad-lg-x: clamp(18px, 2.6vw, calc(30px * var(--adrasa-scale)));

  /* Base (mobile/tablet) gap between rows inside the card */
  --adrasa-why-gap: clamp(12px, 1.8vw, calc(18px * var(--adrasa-scale)));

  /* Desktop: BRAND column width */
  --adrasa-why-brand-col: clamp(220px, 18vw, calc(280px * var(--adrasa-scale)));

  /* Trade-space setup (desktop) */
  --adrasa-why-items-gap-lg: clamp(10px, 1.1vw, calc(12px * var(--adrasa-scale)));
  --adrasa-why-items-offset-lg: clamp(14px, 1.8vw, calc(22px * var(--adrasa-scale)));

  /* ✅ Fluid brand typography (desktop/tablet) */
  --adrasa-why-italic-size: clamp(44px, 4.2vw, calc(74px * var(--adrasa-scale)));
  --adrasa-why-regular-size: clamp(42px, 4.0vw, calc(70px * var(--adrasa-scale)));

  /* Items */
  --adrasa-why-item-gap: clamp(8px, 1.0vw, calc(10px * var(--adrasa-scale)));
  --adrasa-why-item-pad-y: clamp(8px, 1.1vw, calc(10px * var(--adrasa-scale)));
  --adrasa-why-item-pad-x: clamp(6px, 0.9vw, calc(8px * var(--adrasa-scale)));

  /* ✅ Fluid item text */
  --adrasa-why-text-size: clamp(14px, 1.2vw, calc(18px * var(--adrasa-scale)));

  /* ✅ Fluid icon */
  --adrasa-why-icon: clamp(26px, 2.2vw, calc(36.77px * var(--adrasa-scale)));
  --adrasa-why-icon-fallback: clamp(26px, 2.2vw, calc(36.77px * var(--adrasa-scale)));

  padding-top: var(--adrasa-why-pad-top);
  padding-bottom: var(--adrasa-why-pad-bottom);
}

/* Ribbon card */
.adrasa-why__card {
  position: relative;
  overflow: hidden;

  border-radius: var(--adrasa-why-radius);
  padding: var(--adrasa-why-pad);

  /* Glass base */
  background-color: rgba(255, 255, 255, 0.17);

  /* IMPORTANT: no border */
  border: 0 !important;
  outline: 0 !important;

  box-shadow: 0 calc(18px * var(--adrasa-scale)) calc(40px * var(--adrasa-scale)) rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(calc(18px * var(--adrasa-scale)));
  -webkit-backdrop-filter: blur(calc(18px * var(--adrasa-scale)));

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--adrasa-why-gap);
}

/* Background image layer (set via Elementor controls on the widget) */
.adrasa-why__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: var(--adrasa-why-bg-image, none);
  background-size: var(--adrasa-why-bg-size, cover);
  background-position: var(--adrasa-why-bg-position, center center);
  background-repeat: var(--adrasa-why-bg-repeat, no-repeat);

  opacity: var(--adrasa-why-bg-opacity, 0.35);
  pointer-events: none;
}

/* Ensure content sits above background image */
.adrasa-why__card > * {
  position: relative;
  z-index: 1;
}

/* Desktop layout: 2 columns (BRAND + ITEMS) */
@media (min-width: 992px) {
  .adrasa-why__card {
    grid-template-columns: var(--adrasa-why-brand-col) 1fr;
    align-items: center;

    /* keep normal vertical spacing */
    row-gap: var(--adrasa-why-gap);
    /* NOTE: we’re not relying on huge column-gap anymore */
    column-gap: 0;

    padding: var(--adrasa-why-pad) var(--adrasa-why-pad-lg-x);
  }

  /* ✅ This is the visible “space” between BRAND and ITEMS */
  .adrasa-why__items {
    padding-left: var(--adrasa-why-items-offset-lg);
  }
}

/* Left brand */
.adrasa-why__brand {
  width: 100%;
}

.adrasa-why__brand-italic {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--adrasa-why-italic-size);
  line-height: 0.95;
  color: rgba(198, 227, 238, 0.85);
  margin-bottom: calc(6px * var(--adrasa-scale));
}

.adrasa-why__brand-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: var(--adrasa-why-regular-size);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: rgba(198, 227, 238, 0.75);
}

/* Items grid */
.adrasa-why__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(16px * var(--adrasa-scale));

  /* never center items */
  justify-items: start;
  align-items: start;

  /* default */
  padding-left: 0;
}

@media (min-width: 992px) {
  .adrasa-why__items {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--adrasa-why-items-gap-lg);
  }
}

@media (max-width: 991.98px) {
  .adrasa-why__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .adrasa-why__items {
    grid-template-columns: 1fr;
  }
}

/* Figma layout = icon on top, text below, BOTH aligned LEFT */
.adrasa-why__item {
  width: 100%;
  display: grid;

  justify-items: start;
  text-align: left;

  gap: var(--adrasa-why-item-gap);
  padding: var(--adrasa-why-item-pad-y) var(--adrasa-why-item-pad-x);
}

.adrasa-why__icon {
  width: var(--adrasa-why-icon);
  height: var(--adrasa-why-icon);

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.adrasa-why__icon img {
  width: 100%;
  height: 100%;
  display: block;

  opacity: 0.9;
  filter: brightness(1.15);

  margin: 0 !important;
}

.adrasa-why__icon-fallback {
  width: var(--adrasa-why-icon-fallback);
  height: var(--adrasa-why-icon-fallback);
  display: block;
  border-radius: 999px;
  background: rgba(198, 227, 238, 0.45);
}

.adrasa-why__text {
  margin: 0;
  max-width: none;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: var(--adrasa-why-text-size);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);

  text-align: left;
}