/* Component: project card (template-parts/components/project-card.php).
   Built on the base photo tile (.ex-tile + .ex-media--tile): gradient, body position and type scale come from base.css.
   Default = Erga list look; --overlay = homepage "Έργα" / Pro "Key projects" look. */

.ex-project-card { width: 100%; }
/* Rendered values (Erga and both homepage mockups, measured at 1680px): the text block is 63px high and ends 20px above the
   tile's edge. The type is an inline <span> in a 16px line (18px line box, glyph box 5px from its top); name and location
   have no line-height of their own (22px / 15px lines). The theme had 1.3 / 1.2 / 1.35, which lifted every line 3-4px. */
.ex-project-card__type { margin: 0; padding: 5px 0 1px; line-height: normal; }
.ex-project-card__title { line-height: normal; overflow-wrap: anywhere; }
.ex-project-card__location { margin: 2px 0 0; line-height: normal; color: var(--ex-white); }

/* Homepage look: the location line is dimmed (rgba .72 in the Idiotis homepage mockup). */
.ex-project-card--overlay .ex-project-card__location { color: rgba(255, 255, 255, .72); }

/* Pro homepage "Key projects" (EXALCO-Pro-Homepage, rendered): text block 60px high, 18px from the edge; type .14em,
   name without letter-spacing and 5px below the type, location 12.5px in solid white directly under the name. */
.ex-audience-pro .ex-project-card--overlay .ex-project-card__body { bottom: 18px; }
.ex-audience-pro .ex-project-card--overlay .ex-project-card__type { letter-spacing: .14em; }
.ex-audience-pro .ex-project-card--overlay .ex-project-card__title { margin-top: 5px; letter-spacing: 0; }
.ex-audience-pro .ex-project-card--overlay .ex-project-card__location { margin-top: 0; font-size: 12.5px; color: var(--ex-white); }

/* Hover (beta audit v3): the product card's hover on a photo tile — a white wedge rises diagonally from the bottom edge
   (bouncy, like .ex-card__media) and a red rule draws along the bottom edge (ease-out); no dark rule. The photo zooms
   slightly, as before. The wedge sits over the gradient and under the text (which ends 20px above the edge). */
.ex-project-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: calc(var(--ex-z-raised) + 1);
  height: var(--ex-card-rise, 18px);
  background: var(--ex-white);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path var(--ex-t-bounce) var(--ex-ease-bounce);
  pointer-events: none;
}
.ex-project-card__rule {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 3px;
  background: var(--ex-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ex-t-slow) var(--ex-ease-out);
  pointer-events: none;
}
.ex-project-card:hover::before,
.ex-project-card:focus-visible::before { clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.ex-project-card:hover .ex-project-card__rule,
.ex-project-card:focus-visible .ex-project-card__rule { transform: scaleX(1); }
.ex-project-card:hover .ex-project-card__image,
.ex-project-card:focus-visible .ex-project-card__image { transform: scale(1.04); }
.ex-project-card:focus-visible { outline-offset: -4px; outline-color: var(--ex-white); }

@media (max-width: 899px) {
  .ex-project-card__title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-project-card::before,
  .ex-project-card__rule { transition: none; }
  .ex-project-card:hover .ex-project-card__image,
  .ex-project-card:focus-visible .ex-project-card__image { transform: none; }
}