/* Section: quality — Industrial "Quality ASCONA": media left (photo or dark logo panel), copy + checklist right. */

.ex-quality[id] { scroll-margin-top: var(--ex-scroll-offset); }

.ex-quality__inner {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.ex-quality--no-media .ex-quality__inner { grid-template-columns: minmax(0, 1fr); }

.ex-quality__media { position: relative; height: clamp(300px, 34vw, 420px); overflow: hidden; background: var(--ex-tint); }

/* Logo panel shown while there is no photo: dark gradient, fine vertical lines, red bar on the left. */
.ex-quality__media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--ex-dark) 0%, #2b2f39 55%, var(--ex-dark) 100%);
}
.ex-quality__media--logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 46px);
  pointer-events: none;
}
.ex-quality__media--logo::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--ex-red);
}
.ex-quality__logo {
  position: relative;
  z-index: var(--ex-z-raised);
  width: clamp(180px, 22vw, 300px);
  max-width: 70%;
  height: auto;
  object-fit: contain; /* an SVG logo gets width="1" height="1" from WordPress: its box is square, the drawing keeps its ratio */
}

.ex-quality__content { min-width: 0; }
.ex-quality__eyebrow { margin-bottom: 14px; }
.ex-quality__title { margin-bottom: 16px; }
.ex-quality__text { max-width: 540px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.65; }

.ex-quality__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.ex-quality__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(35, 31, 32, .2);
  font-size: 13px;
  font-weight: 600;
  line-height: normal; /* rendered: 15px line, row 41px */
  color: var(--ex-ink);
}
.ex-quality__item::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--ex-red); }
/* The 24px under the list stay even without a link: the mockup centres the block including them. */
.ex-quality__cta { margin: 0; }

/* ---------- Responsive (proposal — not designed) ---------- */
@media (max-width: 1199px) {
  .ex-quality__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ex-quality__media { height: clamp(220px, 44vw, 380px); }
  .ex-quality__text,
  .ex-quality__items { max-width: none; }
}

@media (max-width: 899px) {
  .ex-quality__item { min-height: var(--ex-touch); }
}