/* Section: tools — colours tile (white, swatches) + energy tile (photo). Mockup "Εργαλεία". */

.ex-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--ex-white);
}
.ex-tools--single { grid-template-columns: minmax(0, 1fr); }

.ex-tools__tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 440px;
  overflow: hidden;
  scroll-margin-top: var(--ex-scroll-offset);
}
.ex-tools__tile--color { flex-direction: column; justify-content: flex-end; background: var(--ex-white); }
.ex-tools__tile--energy { align-items: flex-end; background: var(--ex-dark); }

.ex-tools__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ex-tools__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 31, 32, .15), rgba(35, 31, 32, .9));
  pointer-events: none;
}

.ex-tools__body {
  position: relative;
  width: 100%;
  padding: clamp(28px, 3.2vw, 52px) var(--ex-gutter);
}
.ex-tools__eyebrow { gap: 10px; margin-bottom: 14px; }
.ex-tools__tile--color .ex-tool-icon { color: var(--ex-red); }
.ex-tools__tile--energy .ex-tool-icon { color: var(--ex-white); }

.ex-tools__title {
  margin-bottom: 14px;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1;
  letter-spacing: -.01em;
}
.ex-tools__text { max-width: 420px; font-size: 14.5px; line-height: 1.55; }
.ex-tools__tile--energy .ex-tools__text { color: rgba(255, 255, 255, .8); }

.ex-tools__swatches { display: flex; gap: 9px; margin-top: 20px; }
.ex-tools__swatch {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(35, 31, 32, .2);
  transform: skewX(-14deg);
}
.ex-tools__swatch--1 { background: #EDEBE6; }
.ex-tools__swatch--2 { background: #3a3d40; }
.ex-tools__swatch--3 { background: #9a6a3c; }
.ex-tools__swatch--4 { background: #aeb3b7; }
.ex-tools__swatch--5 { background: #17181a; }

/* CTA 48px high (16px 26px), 13.5px / 700 (.ex-btn--bold) / .07em. */
.ex-tools__actions { margin-top: 24px; }
.ex-tools__actions .ex-btn { --ex-btn-px: 26px; padding-block: 16px; letter-spacing: .07em; }


/* ≤1199: tiles stack (proposal) */
@media (max-width: 1199px) {
  .ex-tools { grid-template-columns: minmax(0, 1fr); }
  .ex-tools__tile { min-height: 0; }
  .ex-tools__tile--energy { min-height: clamp(340px, 48vw, 440px); }
}

@media (max-width: 599px) {
  .ex-tools__actions .ex-btn { width: 100%; }
}