/* Section: products_teaser — category tiles (mockups "Προϊόντα" / "Pro products"). Cards, grid and head come from base.css. */

.ex-products-teaser { scroll-margin-top: var(--ex-scroll-offset); }

/* Idiotis homepage: white fading into a light grey behind the tiles. */
.ex-products-teaser--idiotis {
  --ex-head-gap: 40px; /* mockup: 40px under this head (38px under the other heads of the page) */
  background: linear-gradient(180deg, var(--ex-white) 0%, #F3F4F4 180px);
}

/* Pro homepage: slightly airier rows (mockup gap 20px 16px). */
.ex-products-teaser--pro .ex-products-teaser__grid { gap: 20px 16px; }

.ex-products-teaser__grid { margin: 0; padding: 0; list-style: none; }
/* Hover: the mockup lifts the tile and darkens its border (base .ex-card); functional spec 02.4.1 adds a slight
   zoom of the photo and a red title. */
.ex-products-teaser__tile .ex-card__media > img { transition: transform .6s var(--ex-ease-out); }
.ex-products-teaser__tile:hover .ex-card__media > img,
.ex-products-teaser__tile:focus-within .ex-card__media > img { transform: scale(1.04); }
.ex-products-teaser__tile .ex-card__title { transition: color var(--ex-t-base); }
.ex-products-teaser__tile:hover .ex-card__title,
.ex-products-teaser__tile:focus-within .ex-card__title { color: var(--ex-red); }
@media (prefers-reduced-motion: reduce) {
  .ex-products-teaser__tile .ex-card__media > img { transition: none; }
  .ex-products-teaser__tile:hover .ex-card__media > img,
  .ex-products-teaser__tile:focus-within .ex-card__media > img { transform: none; }
}
.ex-products-teaser__label { display: flex; flex-direction: column; min-width: 0; }

/* Tile without any image: dark branded panel, red edge, category name. */
.ex-products-teaser__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 22px 24px 22px 30px;
  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-products-teaser__placeholder::after {
  content: '';
  position: absolute;
  top: 18%;
  right: 9%;
  width: clamp(90px, 9vw, 150px);
  height: clamp(66px, 6.6vw, 110px);
  border: 1.5px solid rgba(255, 255, 255, .5);
  transform: perspective(900px) rotateY(-26deg);
}
.ex-products-teaser__placeholder-name {
  position: relative;
  max-width: 70%;
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: var(--ex-fw-title);
  line-height: 1;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .92);
}

@media (max-width: 899px) {
  .ex-products-teaser--pro .ex-products-teaser__grid { gap: var(--ex-space-4); }
}