/*
 * Alf Theme — Shared Product Card Component (.pcard)
 * Figma nodes: 658:2828 (vehicle platforms) / 830:2912 (portfolio)
 *
 * White card, beige "shelf" floor that expands to fill the media area on
 * hover, contain-fit product image, centred red product name below, with
 * a hover-revealed description underneath.
 *
 * Used by:
 *   - Products page → Product Portfolio Explorer   (.pcard--portfolio)
 *   - Products page → Products Across Vehicle Platforms (.pcard--platforms)
 *   - Product Design page → Products we Engineer   (.pcard--pd)
 *
 * Rendered via alf_render_product_card() in inc/helpers.php — do not
 * hand-roll this markup in a template; call the helper instead so all
 * three sections stay visually identical.
 *
 * Floor colour differs per section via the .pcard--light-floor modifier
 * (added on the card itself) — default is #f0f0e3, light is #f8faf0. The
 * same modifier keys .pcard__floor and .pcard__info::before (see below)
 * so both growing pieces of the reveal match.
 */

.pcard {
  background-color: #ffffff;
  border: 1px solid #f3f3f3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 0 32px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Image area ─────────────────────────────────────────────────── */
.pcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 366 / 215;
  overflow: hidden;
  background-color: #ffffff;
}

/* Beige floor strip — expands to fill media area on card hover */
.pcard__floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  background-color: #f0f0e3;
  z-index: 0;
  transition: height 0.35s ease;
}

.pcard--light-floor .pcard__floor {
  background-color: #f8faf0;
}

.pcard:hover .pcard__floor {
  height: 100%;
}

/* Product image — contained above the floor; scales up slightly on
   hover for a subtle magnify effect. .pcard__media's overflow:hidden
   clips the zoom so it never affects the card's own box size. */
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 1;
  transition: transform 0.35s ease;
}

.pcard:hover .pcard__img {
  transform: scale(1.08);
}

/* ── Name + hover-revealed description wrapper ────────────────────
   .pcard__desc is absolutely positioned inside this (see below), so
   .pcard__info's own in-flow height always equals .pcard__name's height
   alone — exactly matching the flex child this replaced — which is what
   keeps the card's total height fixed whether or not the desc is shown. */
.pcard__info {
  position: relative;
}

/* Mirrors .pcard__floor's upward growth, but downward: grows from 0 to a
   generously large height on hover. Starts at top:-24px — flush against
   .pcard__media's bottom edge, i.e. exactly where the floor's own growth
   stops — so it also sweeps through the flex gap between media and info
   instead of leaving that gap to fade in on its own via a separate,
   unsynchronized transition. (-24px must match .pcard's own gap value.)
   The exact target height doesn't matter — .pcard's own overflow:hidden
   clips it at the card's real bottom edge — so this covers any
   name/description length without needing to measure it. */
.pcard__info::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 0;
  background-color: #f0f0e3;
  z-index: 0;
  transition: height 0.35s ease;
}

.pcard--light-floor .pcard__info::before {
  background-color: #f8faf0;
}

.pcard:hover .pcard__info::before {
  height: 400px;
}

.pcard__name {
  position: relative;
  z-index: 1;
  /* above .pcard__info::before */
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-primary, #cd261d);
  text-align: center;
  padding: 0 16px;
  margin: 0;
}

/* ── Hover-revealed description ─────────────────────────────────────
   Absolutely positioned instead of a normal flex child on purpose: it
   must never add to the card's own height, in either state. It overlays
   the card's existing bottom padding instead of growing into new space,
   so hover never changes the card's box size. Locked to a single
   ellipsis-truncated line so it always fits that reserved space no
   matter how long the admin-entered text is. */
.pcard__desc {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  /* stays above .pcard__img if it ever overlaps the media area */
  padding: 4px 16px 0;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-darker, #373737);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.pcard:hover .pcard__desc {
  opacity: 1;
  visibility: visible;
}