/* Section: sustainability — light (Idiotis "Βιωσιμότητα") and dark mirrored (Pro / Industrial "ESG"). */

.ex-sustainability[id] { scroll-margin-top: var(--ex-scroll-offset); }
.ex-sustainability__stats { margin: 0; padding: 0; list-style: none; }
.ex-sustainability__stat { min-width: 0; }
.ex-sustainability__stat-value,
.ex-sustainability__stat-label { display: block; }
.ex-sustainability__stat-value { font-weight: 900; color: var(--ex-fg); }
.ex-sustainability__cta { margin: 28px 0 0; }

/* ---------- Light: full-bleed split, image left with diagonal edge ---------- */
.ex-sustainability--light { overflow: hidden; }
.ex-sustainability--light .ex-sustainability__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.ex-sustainability--light.ex-sustainability--no-image .ex-sustainability__inner { grid-template-columns: minmax(0, 1fr); }
.ex-sustainability--light .ex-sustainability__media {
  min-height: 420px;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
.ex-sustainability--light .ex-sustainability__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 5vw, 84px) var(--ex-gutter);
}
.ex-sustainability--light .ex-sustainability__title { margin-bottom: 20px; }
.ex-sustainability--light .ex-sustainability__text { margin-bottom: 32px; font-size: 15.5px; line-height: 1.65; color: #4A504F; } /* mockup: darker text on the blue band */
.ex-sustainability--light .ex-sustainability__stats {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 1.8vw, 40px);
}
.ex-sustainability--light .ex-sustainability__stat + .ex-sustainability__stat {
  padding-left: clamp(14px, 1.8vw, 40px);
  border-left: 1.5px solid #B4BCBB;
}
.ex-sustainability--light .ex-sustainability__stat-value {
  font-size: clamp(30px, 2.6vw, 42px);
  letter-spacing: -.01em;
}
/* Mockup: the last value ("Uw") is in the accent colour. Remove this rule if the client calls it a leftover. */
.ex-sustainability--light .ex-sustainability__stat:last-child:not(:first-child) .ex-sustainability__stat-value { color: var(--ex-red); }
.ex-sustainability--light .ex-sustainability__stat-label {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #5A605F;
}

/* ---------- Dark: text left, image right ---------- */
.ex-sustainability--dark .ex-sustainability__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.ex-sustainability--dark.ex-sustainability--no-image .ex-sustainability__inner { grid-template-columns: minmax(0, 1fr); }
.ex-sustainability--dark .ex-sustainability__media { order: 2; height: clamp(300px, 34vw, 420px); }
.ex-sustainability--dark .ex-sustainability__eyebrow { margin-bottom: 14px; }
.ex-sustainability--dark .ex-sustainability__title { margin-bottom: 16px; }
.ex-sustainability--dark .ex-sustainability__text { margin-bottom: 26px; font-size: 14px; line-height: 1.65; }
.ex-sustainability--dark .ex-sustainability__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: .5px solid rgba(255, 255, 255, .25);
}
.ex-sustainability--dark .ex-sustainability__stat { padding: 16px 18px; }
.ex-sustainability--dark .ex-sustainability__stat + .ex-sustainability__stat { border-left: .5px solid rgba(255, 255, 255, .25); }
.ex-sustainability--dark .ex-sustainability__stat-value { font-size: clamp(22px, 1.9vw, 30px); }
.ex-sustainability--dark .ex-sustainability__stat-label { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ex-fg); }

/* ---------- Responsive (proposal — not designed) ---------- */
@media (max-width: 1199px) {
  .ex-sustainability--light .ex-sustainability__inner,
  .ex-sustainability--dark .ex-sustainability__inner { grid-template-columns: minmax(0, 1fr); }
  .ex-sustainability--light .ex-sustainability__media {
    min-height: 0;
    height: clamp(240px, 46vw, 420px);
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  }
  .ex-sustainability--light .ex-sustainability__content { padding-block: clamp(32px, 5vw, 56px) clamp(40px, 6vw, 64px); }
}

@media (max-width: 599px) {
  .ex-sustainability--light .ex-sustainability__stats { flex-direction: column; gap: 16px; }
  .ex-sustainability--light .ex-sustainability__stat + .ex-sustainability__stat {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1.5px solid #B4BCBB;
  }
  .ex-sustainability--dark .ex-sustainability__stats { grid-auto-flow: row; }
  .ex-sustainability--dark .ex-sustainability__stat + .ex-sustainability__stat {
    border-left: 0;
    border-top: .5px solid rgba(255, 255, 255, .25);
  }
}