/* ==========================================================================
   phase2-html-alignment.css — Clase specifice pagini publice + configurator
   Conține DOAR clase care nu există în layout.css / components.css.
   Ultima curățare: 10.03.2026 (consolidare Opțiunea A)
   ========================================================================== */

/* ==========================================================================
   PUBLIC CATALOG — P1 home/catalog
   ========================================================================== */

.hero-eyebrow {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--brand); margin-bottom: 12px;
}

.hero-stats { display: flex; gap: 48px; margin-top: 32px; flex-wrap: wrap; }
.hero-stat  { text-align: center; }
.hero-stat-n   { font-size: 2.5rem; font-weight: 700; color: var(--brand); line-height: 1; }
.hero-stat-lbl { font-size: .82rem; color: var(--text-3); margin-top: 8px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px; margin-top: 32px;
}
.product-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
  transition: border-color var(--t-md), box-shadow var(--t-md), transform var(--t-md);
  cursor: pointer;
}
.product-card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.product-card-img  { width: 100%; height: 200px; object-fit: cover; background: var(--bg); display: block; }
.product-card-body { padding: 16px; }
.product-card-name { font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.product-card-desc { font-size: .82rem; color: var(--text-3); margin-bottom: 12px; line-height: 1.5; }
.product-card-price { font-size: .9rem; font-weight: 700; color: var(--brand); font-family: var(--font-mono); }

/* ==========================================================================
   CONFIGURATOR OPTION CARDS — P2 configurator
   NOTĂ: .opt-pt-card și .opt-img-card există mai complet în configurator.css.
   Clasele de mai jos sunt variante simplificate pentru public catalog (P1).
   ========================================================================== */

.opt-pt-card {
  border: 2px solid var(--border); border-radius: var(--r);
  padding: 14px; cursor: pointer; transition: border-color var(--t), box-shadow var(--t);
  background: var(--surface);
}
.opt-pt-card:hover  { border-color: var(--brand); box-shadow: 0 2px 8px rgba(175,129,92,.15); }
.opt-pt-card.sel    { border-color: var(--brand); background: var(--brand-light); }
.opt-pt-card-name   { font-size: .9rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.opt-pt-card-desc   { font-size: .78rem; color: var(--text-3); margin-bottom: 8px; }
.opt-pt-card-price  { font-size: .85rem; font-weight: 700; color: var(--brand); font-family: var(--font-mono); }

/* ==========================================================================
   FORM ROW 2 — grid 2 coloane (refolosit în mai multe pagini)
   ========================================================================== */

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .form-row-2    { grid-template-columns: 1fr; }
  .hero-stats    { gap: 20px; }
  .product-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-stat-n { font-size: 2rem; }
}