/* ==========================================================================
   WEB360 — Products Module (Product Manager Phase A)
   Universal catalog grid. --mt-* tokens (with safe fallbacks); dark-safe;
   no template branding here (templates skin via body.tpl-{name} .prd-* hooks).
   Emitted once per page via the renderer's <link> guard.
   ========================================================================== */

.prd-section { padding: var(--mt-section-py, 64px) 0; }

.prd-head { max-width: 720px; margin-left: auto; margin-right: auto; }
.prd-eyebrow { display: inline-block; }
.prd-title { margin-top: .25rem; }
.prd-subtitle { color: var(--mt-text-muted, #64748b); }

.prd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* desktop max 3; tablet/mobile in media queries */
  gap: var(--mt-space-4, 24px);
}

/* Software-solution card (P4). Product-first hierarchy:
   Type → Name → Value → "View Solution". Contained mark (no crop),
   unified frame, equal-height cards, structured footer. */
.prd-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mt-surface-1, #ffffff);
  border: 1px solid var(--mt-border, #e2e8f0);
  border-radius: var(--mt-radius-lg, 14px);
  overflow: hidden;
  transition: transform var(--mt-duration-fast, .15s) ease,
              border-color var(--mt-duration-fast, .15s) ease,
              box-shadow var(--mt-duration-fast, .15s) ease;
}
.prd-card:hover {
  transform: translateY(-3px);
  border-color: var(--mt-brand-primary, #3b4bd8);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .10);
}

.prd-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }

/* Contained product mark — neutral framed field; logos/screenshots never crop */
.prd-card-thumb {
  position: relative;             /* badge anchor */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 200px;                /* FORCED uniform image size — every product identical, */
  height: 200px;                  /* regardless of uploaded dimensions, on every placement */
  padding: 18px;
  background: var(--mt-surface-2, #f1f5f9);
  border-bottom: 1px solid var(--mt-border, #e2e8f0);
}
.prd-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.prd-card-thumb-empty { color: #94a3b8; font-size: 1.8rem; }

.prd-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--mt-space-4, 20px);
}

/* Type tag — structured product classifier (category) */
.prd-card-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mt-brand-primary, #3b4bd8);
  background: var(--mt-surface-2, #f1f5f9);
  padding: 4px 10px;
  border-radius: var(--mt-radius-full, 999px);
  margin-bottom: .7rem;
}
.prd-card-type::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f02b"; font-size: .6rem; }

.prd-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .45rem;
  color: var(--mt-text, #0f172a);
}

.prd-card-summary {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--mt-text-muted, #64748b);
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer — value + action, anchored to the bottom (equal-height cards) */
.prd-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: .85rem;
  border-top: 1px solid var(--mt-border, #e2e8f0);
}
.prd-card-price { font-size: 1.05rem; font-weight: 700; color: var(--mt-text, #0f172a); }
/* Deliberate action — outline/ghost button (default outline accent →
   hover: accent fill + dark text). Stays a <span> (no nested anchor). */
.prd-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 18px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--mt-brand-primary, #3b4bd8);
  background: transparent;
  border: 1.5px solid var(--mt-brand-primary, #3b4bd8);
  border-radius: var(--mt-radius-full, 999px);
  transition: background var(--mt-duration-fast, .15s) ease,
              color var(--mt-duration-fast, .15s) ease,
              border-color var(--mt-duration-fast, .15s) ease;
}
.prd-card:hover .prd-card-cta {
  background: var(--mt-brand-primary, #3b4bd8);
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .prd-grid { grid-template-columns: repeat(2, 1fr); } /* tablet = 2 */
  .prd-card-thumb { height: 184px; flex-basis: 184px; }
}
@media (max-width: 575.98px) {
  .prd-grid { grid-template-columns: 1fr; }            /* mobile = 1 */
  .prd-card-thumb { height: 176px; flex-basis: 176px; }
}

/* ==========================================================================
   MODULE ELEVATION (P4 → premium) — presentation only.
   Forced image size (above) · per-card badges (existing row data) · per-mode
   identity. All colours are --mt-* tokens so template skins (e.g. fable5 amber)
   continue to apply. No renderer logic / retrieval / slot change.
   ========================================================================== */

/* Per-card corner badges — real data only (is_featured / created_at) */
.prd-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--mt-radius-full, 999px); color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.prd-badge i { font-size: .62rem; }
.prd-badge--feat { background: var(--mt-accent, #f59e0b); }
.prd-badge--new  { background: var(--mt-brand-primary, #3b4bd8); }

/* CTA micro-feedback — template still owns the colours (these are safe additions) */
.prd-card-cta i { transition: transform var(--mt-duration-fast, .15s) ease; }
.prd-card:hover .prd-card-cta { box-shadow: 0 6px 16px rgba(15, 23, 42, .14); }
.prd-card:hover .prd-card-cta i { transform: translateX(3px); }

/* ===== Module identity by display mode (prd-section--{mode}) ===== */
/* Featured — premium emphasis (accent top edge) */
.prd-section--featured .prd-card .prd-card-thumb { border-top: 3px solid var(--mt-accent, #f59e0b); }
.prd-section--featured .prd-card:hover { border-color: var(--mt-accent, #f59e0b); }
/* Per-mode header icon — featured/latest/category get a cue; 'all' stays clean */
.prd-section--featured .prd-eyebrow::before,
.prd-section--latest   .prd-eyebrow::before,
.prd-section--category .prd-eyebrow::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 7px; font-size: .85em;
}
.prd-section--featured .prd-eyebrow::before { content: "\f005"; } /* star */
.prd-section--latest   .prd-eyebrow::before { content: "\f0e7"; } /* bolt */
.prd-section--category .prd-eyebrow::before { content: "\f00a"; } /* grid */