/* ============================================================
   EBKaC labs — Products pages
   Mirrors the support-home layout (hero + card grid), tuned for a
   product catalogue. Shared by:
     /products/index.html       (body.products-home)  — product grid
     /products/hometurf.html    (body.product-page)   — placeholder

   The common <ebkac-navbar> / <ebkac-footer> bring their own styles.
   ============================================================ */

:root{
  --bg:#fbfbfd;
  --surface:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --line:#e3e3e6;
  --accent:#2563d9;
  --radius:18px;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --maxw:980px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- hero (top padding clears the floating nav pill) ---- */
.hero{
  text-align:center;
  padding:120px 22px 56px;
  background:linear-gradient(180deg,#f5f7fb 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(34px,6vw,52px);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.hero p{color:var(--ink-soft);font-size:19px;max-width:46ch;margin:0 auto}

/* ---- sections ---- */
main{max-width:var(--maxw);margin:0 auto;padding:56px 22px 80px}
.section-head{
  font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;
}
.section + .section{margin-top:64px}

/* ---- product cards ---- */
.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.product-card{
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(0,0,0,.05),0 16px 36px rgba(0,0,0,.10);
  border-color:#d4d4d8;text-decoration:none;
}
.product-card .head{display:flex;align-items:center;gap:16px}
.product-icon{
  width:64px;height:64px;border-radius:15px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:22px;color:#fff;
  background:var(--app-color,#444);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
/* logo image = complete app icon: no tile, fill the space */
.product-icon:has(img){background:none;box-shadow:none}
.product-icon img{width:100%;height:100%;object-fit:contain}
.product-card .name{font-size:19px;font-weight:600;color:var(--ink)}
.product-card .status{font-size:13px;color:var(--ink-soft);margin-top:2px}
.product-card .blurb{font-size:15px;color:var(--ink-soft)}
.product-card .cta{font-size:14.5px;font-weight:600;color:var(--accent)}

/* "more coming" placeholder card */
.product-card.is-soon{
  align-items:center;justify-content:center;text-align:center;
  color:var(--ink-soft);border-style:dashed;background:transparent;box-shadow:none;
  min-height:160px;
}
.product-card.is-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ---- placeholder page (product home not finished yet) ---- */
.placeholder{
  text-align:center;
  padding:140px 22px 120px;
  background:linear-gradient(180deg,#eef6f0 0%,var(--bg) 100%);
}
.placeholder__icon{
  width:96px;height:96px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
}
.placeholder__icon img{width:100%;height:100%;object-fit:contain}
.placeholder .eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#1f7a3d;margin-bottom:14px;
}
.placeholder h1{font-size:clamp(30px,5.5vw,46px);font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.placeholder p{color:var(--ink-soft);font-size:18px;max-width:48ch;margin:0 auto 28px}
.placeholder__links{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center}
.placeholder__links a{
  font-size:15px;font-weight:600;padding:11px 22px;border-radius:12px;
}
.placeholder__links a.primary{background:#1f7a3d;color:#fff}
.placeholder__links a.primary:hover{opacity:.9;text-decoration:none}
.placeholder__links a.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.placeholder__links a.ghost:hover{border-color:#c9c9cf;text-decoration:none}

/* ---- bottom breadcrumb (shared look with support) ---- */
.breadcrumb-bottom{border-top:1px solid var(--line);background:var(--bg)}
.breadcrumb-bottom .bc-inner{max-width:var(--maxw);margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:10px;font-size:13px}
.breadcrumb-bottom .brand{font-weight:600;color:var(--ink)}
.breadcrumb-bottom .crumb{color:var(--ink-soft)}

@media (max-width:520px){
  .hero{padding:100px 18px 42px}
  .placeholder{padding:110px 18px 90px}
}