/* Section: hero_slider — homepage hero (mockups "Hero slider", Idiotis / Pro / Industrial). */

.ex-hero-slider {
  --ex-hero-media-h: clamp(260px, 46vw, 460px); /* image height once the columns stack */
  position: relative;
  overflow: hidden;
  background: var(--ex-white);
  /* Horizontal drags belong to the slider (swipe): without this a swipe to the right is taken by the browser as
     "back" (overscroll navigation) and the visitor leaves the page. Vertical scrolling stays native. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* All slides share one grid cell: the section is as tall as the tallest slide, no jump on change. */
.ex-hero-slider__slides { display: grid; }

.ex-hero-slider__slide {
  grid-area: 1 / 1;
  display: grid;
  /* Client feedback 2026-10-20: text 4/12 of the screen, image 8/12 (measured at the bottom of its diagonal).
     The text column never gets narrower than its 1680px width (560px): below that the widest button pair
     («ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ» + «ΥΠΟΛΟΓΙΣΤΕ ΤΟ ΟΦΕΛΟΣ», 524px) no longer fits side by side (client feedback 2026-11-05). */
  grid-template-columns: max(560px, 100% / 3) minmax(0, 1fr);
  min-height: clamp(430px, 54vh, 570px);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
  transition: opacity .65s ease, visibility 0s linear .65s;
}
.ex-hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
  transition: opacity .65s ease, visibility 0s;
}

/* Text column: the hero fills the viewport down to the USP strip, which must stay visible (functional spec 02.1.4).
   The mockup subtracts 215px = header (130px, measured by scroll.js into --ex-header-h) + USP strip (85px). */
.ex-hero-slider__text-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--ex-header-h, 130px) - 85px);
  /* Right padding 24px: the 4/12 column keeps "ΤΟ ΜΕΛΛΟΝ" on one line (client feedback 2026-10-20); the image diagonal
     starts 150px further right at the top, so the text never touches it. */
  padding: clamp(28px, 3.4vw, 56px) 24px clamp(56px, 5vw, 72px) var(--ex-gutter);
}
.ex-hero-slider__text {
  max-width: 560px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.ex-hero-slider__slide.is-active .ex-hero-slider__text { opacity: 1; transform: none; }

.ex-hero-slider__eyebrow { margin-bottom: 20px; }
/* The 28px under the paragraph belong to the paragraph (mockup): a slide without buttons is centred including them
   (Industrial slide 1, Pro slide 3). */
.ex-hero-slider__lead { margin: 20px 0 28px; }
.ex-hero-slider__title + .ex-hero-slider__actions { margin-top: 28px; }
/* Beta audit v3: the two buttons stay side by side, as in the mockup, wherever they fit. The row may use the column's
   24px right padding and 32px more: the diagonal leaves at least 24px to the image at the buttons' height from 1200px
   to 1680px (measured 2026-11-04). A pair that is still too wide (longer labels, e.g. «ΥΠΟΛΟΓΙΣΤΕ ΤΟ ΟΦΕΛΟΣ» at 1440px) drops the
   second button to a new line instead of running into the image. */
@media (min-width: 1200px) {
  .ex-hero-slider__actions { margin-right: -56px; }
  .ex-hero-slider__actions .ex-btn { flex: none; white-space: nowrap; }
}

/* Pro / Industrial mockups: the hero starts at the top of the page, behind the header ("glass" mode), and its text column
   has padding-top clamp(120px, 14vh, 160px). In the theme the hero starts under the header, so the header height comes off
   that padding (3px at a 950px viewport: text block 27px higher than on the Idiotis hero), the diagonal of the image is
   the two frames sit 12% / 8% of the taller image
   above the bottom edge. The spacer pseudo-elements centre the text like justify-content: center, but never let it
   touch the header when the copy is taller than the viewport. */
@media (min-width: 1200px) {
  .ex-hero-slider--pro .ex-hero-slider__text-col,
  .ex-hero-slider--industrial .ex-hero-slider__text-col {
    justify-content: flex-start;
    padding-top: max(0px, calc(clamp(120px, 14vh, 160px) - var(--ex-header-h, 130px)));
  }
  .ex-hero-slider--pro .ex-hero-slider__text-col::before,
  .ex-hero-slider--industrial .ex-hero-slider__text-col::before { content: ''; flex: 1 1 0; min-height: 20px; }
  .ex-hero-slider--pro .ex-hero-slider__text-col::after,
  .ex-hero-slider--industrial .ex-hero-slider__text-col::after { content: ''; flex: 1 1 0; }
  .ex-hero-slider--pro .ex-hero-slider__frame--red,
  .ex-hero-slider--industrial .ex-hero-slider__frame--red { bottom: calc(12% + .12 * var(--ex-header-h, 130px)); }
  .ex-hero-slider--pro .ex-hero-slider__frame--white,
  .ex-hero-slider--industrial .ex-hero-slider__frame--white { bottom: calc(8% + .08 * var(--ex-header-h, 130px)); }
}

/* Image column: diagonal left edge + two perspective frames. */
.ex-hero-slider__media { position: relative; min-width: 0; }
.ex-hero-slider__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ex-dark);
  /* Diagonal left edge: its top is 150px right of its bottom at every desktop width (client feedback 2026-10-20,
     beta audit v3: a fixed 150px, not scaled down below 1680px). */
  clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%);
}
.ex-hero-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ex-hero-slider__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(35, 31, 32, 0) 55%, rgba(35, 31, 32, .42));
  pointer-events: none;
}

/* No-image fallback: branded dark panel (Pro slide 3 / Industrial slide 3). */
.ex-hero-slider__panel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ex-red) 0, var(--ex-red) 6px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 46px),
    linear-gradient(150deg, var(--ex-dark) 0%, #2b2f39 55%, var(--ex-dark) 100%);
}

.ex-hero-slider__frame {
  position: absolute;
  z-index: 2;
  width: clamp(170px, 15vw, 270px);
  height: clamp(125px, 11vw, 195px);
  transform: perspective(900px) rotateY(-26deg);
  pointer-events: none;
}
.ex-hero-slider__frame--red { left: -3%; bottom: 12%; border: 2px solid var(--ex-red); }
.ex-hero-slider__frame--white { left: 2%; bottom: 8%; border: 1.5px solid rgba(255, 255, 255, .85); }

.ex-hero-slider__caption {
  position: absolute;
  right: clamp(16px, 2.6vw, 48px);
  bottom: 22px;
  z-index: 3;
  margin: 0;
  max-width: 60%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-align: right;
  color: rgba(255, 255, 255, .85);
}

/* Dashes + counter, bottom-left */
.ex-hero-slider__pager {
  position: absolute;
  left: var(--ex-gutter);
  bottom: 24px;
  z-index: var(--ex-z-controls);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ex-hero-slider__dash {
  position: relative;
  width: 14px;
  height: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #C9CFCE;
  transform: skewX(-24deg);
  cursor: pointer;
  transition: width .25s, background .25s;
}
/* Larger hit area than the 5px dash */
.ex-hero-slider__dash::after { content: ''; position: absolute; inset: -14px -4px; }
.ex-hero-slider__dash:hover { background: var(--ex-text-soft); }
.ex-hero-slider__dash.is-active,
.ex-hero-slider__dash[aria-current="true"] { width: 34px; background: var(--ex-red); }
.ex-hero-slider__counter {
  margin: 0 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--ex-placeholder);
}

/* Arrows, bottom-right over the image */
.ex-hero-slider__nav {
  position: absolute;
  right: clamp(16px, 2.6vw, 48px);
  bottom: 56px;
  z-index: var(--ex-z-controls);
  display: flex;
  gap: 8px;
}
.ex-hero-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(35, 31, 32, .3);
  color: var(--ex-white);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ex-t-base), border-color var(--ex-t-base);
}
.ex-hero-slider__arrow:hover,
.ex-hero-slider__arrow:focus-visible { border-color: var(--ex-red); background: var(--ex-red); }
.ex-hero-slider__arrow:focus-visible { outline: 2px solid var(--ex-white); outline-offset: 2px; }

/* Without JavaScript only the first slide exists for the visitor: no dead controls. */
html:not(.js) .ex-hero-slider__pager,
html:not(.js) .ex-hero-slider__nav { display: none; }

/* 1200–1439: the 4/12 column would be under 480px; 5/12 keeps the title on three lines. */
@media (max-width: 1439px) {
  .ex-hero-slider__slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ≤1199: image on top, text below (proposal, not designed) */
@media (max-width: 1199px) {
  .ex-hero-slider__slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--ex-hero-media-h) auto;
    min-height: 0;
  }
  .ex-hero-slider__media { grid-row: 1; }
  .ex-hero-slider__text-col {
    grid-row: 2;
    justify-content: flex-start;
    min-height: 0;
    padding: clamp(28px, 4.4vw, 44px) var(--ex-gutter) 68px;
  }
  .ex-hero-slider__text { max-width: 640px; }
  .ex-hero-slider__clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - clamp(18px, 4vw, 40px))); }
  .ex-hero-slider__frame--red { left: auto; right: 18%; bottom: 14%; }
  .ex-hero-slider__frame--white { left: auto; right: 14%; bottom: 9%; }
  .ex-hero-slider__nav { top: calc(var(--ex-hero-media-h) - 44px - clamp(30px, 5vw, 52px)); bottom: auto; right: var(--ex-gutter); }
  .ex-hero-slider__caption { top: 16px; bottom: auto; right: var(--ex-gutter); }
}

@media (max-width: 899px) {
  .ex-hero-slider__dash::after { inset: -20px -4px; } /* 45px tall tap area */
  .ex-hero-slider__frame { display: none; }
  .ex-hero-slider__lead { margin: 16px 0 22px; }
  .ex-hero-slider__title + .ex-hero-slider__actions { margin-top: 22px; }
}

@media (max-width: 599px) {
  .ex-hero-slider { --ex-hero-media-h: clamp(220px, 62vw, 320px); }
  .ex-hero-slider__title { font-size: clamp(34px, 10.4vw, 44px); }
  .ex-hero-slider__actions { flex-direction: column; align-items: stretch; }
  .ex-hero-slider__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-hero-slider__slide,
  .ex-hero-slider__slide.is-active,
  .ex-hero-slider__text,
  .ex-hero-slider__dash,
  .ex-hero-slider__arrow { transition: none; }
  .ex-hero-slider__text { transform: none; }
}