/* =========================================================================
   ProGrade — homepage. Navy/gold system; references tokens only.
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */
.pg-hero {
  background:
    linear-gradient(var(--pg-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--pg-white) 1px, transparent 1px),
    var(--pg-page);
  background-size: 34px 34px;
  border-bottom: 1px solid var(--pg-line);
}
.pg-hero-in {
  display: grid; grid-template-columns: 1fr; gap: var(--pg-space-4);
  padding-block: var(--pg-space-6) var(--pg-space-4); align-items: center;
}
@media (min-width: 900px) { .pg-hero-in { grid-template-columns: 1.05fr 0.95fr; } }
.pg-hero-h1 {
  font-family: var(--pg-font-head); font-weight: 800;
  font-size: clamp(2.75rem, 1.8rem + 4.5vw, 5rem); line-height: 0.95;
  letter-spacing: -0.04em; text-transform: none; margin: var(--pg-space-1) 0 0;
}
.pg-hero-h1 em { font-style: normal; color: var(--pg-gold); }
.pg-hero-lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--pg-ink-2); max-width: 46ch; line-height: 1.6; margin: 0 0 var(--pg-space-3); }
.pg-hero-lead strong { color: var(--pg-graphite); }
.pg-hero-media { justify-self: center; }
.pg-hero-media img { max-width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgba(17,19,21,.18)); }

/* --- Standard band ------------------------------------------------------ */
.pg-band { background: var(--pg-navy); color: #fff; }
.pg-band-in { padding-block: var(--pg-space-6); }
.pg-band-k { font-family: var(--pg-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pg-gold); margin: 0 0 var(--pg-space-2); }
.pg-band-h { font-family: var(--pg-font-head); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 24ch; margin: 0; }
.pg-band-h span { color: var(--pg-gold); }

/* --- Independent teardown ----------------------------------------------- */
.pg-teardown { background: var(--pg-graphite); color: #fff; }
.pg-teardown-in { display: grid; grid-template-columns: 1fr; gap: var(--pg-space-4); padding-block: var(--pg-space-8); align-items: start; }
@media (min-width: 820px) { .pg-teardown-in { grid-template-columns: auto 1fr; gap: var(--pg-space-6); } }
.pg-teardown-lamp { display: flex; gap: var(--pg-space-2); align-items: center; font-family: var(--pg-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pg-lamp { width: 48px; height: 48px; border: 1.5px solid #2f3336; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.pg-lamp i { width: 20px; height: 20px; border-radius: 50%; background: var(--pg-green); box-shadow: 0 0 22px 3px rgba(62,122,53,.8); }
.pg-lamp-label em { font-style: normal; color: #9aa0a6; }
.pg-teardown-body h2 { font-family: var(--pg-font-head); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem); letter-spacing: -0.02em; margin: 0 0 var(--pg-space-2); color: #fff; }
.pg-teardown-body h2 span { color: var(--pg-gold); }
.pg-teardown-body > p { color: #c3b9a5; color: #cdd2d8; font-size: 1.0625rem; max-width: 62ch; margin: 0 0 var(--pg-space-2); }
.pg-teardown-body .pg-partno { color: #fff; }
.pg-quotes { list-style: none; margin: 0 0 var(--pg-space-3); padding: 0; display: grid; gap: var(--pg-space-1); }
.pg-quotes li { border-left: 3px solid var(--pg-green); padding: 6px 0 6px var(--pg-space-2); color: #eef0f2; font-size: 1.0625rem; }
.pg-quotes li span { color: #9aa0a6; font-size: 0.8125rem; }
.pg-btn-gold { background: var(--pg-gold); color: var(--pg-graphite); }
.pg-btn-gold:hover { background: var(--pg-gold-deep); color: #fff; }

/* --- Principles trio ---------------------------------------------------- */
.pg-principles { padding-block: var(--pg-space-8) var(--pg-space-4); }
.pg-trio { display: grid; grid-template-columns: 1fr; border: 1px solid var(--pg-line-2); border-radius: var(--pg-radius); overflow: hidden; background: var(--pg-card); }
@media (min-width: 760px) { .pg-trio { grid-template-columns: repeat(3, 1fr); } }
.pg-cel { padding: var(--pg-space-4); border-bottom: 1px solid var(--pg-line); }
@media (min-width: 760px) { .pg-cel { border-bottom: 0; border-right: 1px solid var(--pg-line); } .pg-cel:last-child { border-right: 0; } }
.pg-cel-k { font-family: var(--pg-font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-gold-deep); margin: 0 0 var(--pg-space-2); display: flex; justify-content: space-between; }
.pg-cel h3 { font-family: var(--pg-font-head); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.02em; margin: 0 0 var(--pg-space-1); }
.pg-cel p { color: var(--pg-ink-2); font-size: 0.96875rem; line-height: 1.6; margin: 0; }

/* --- Grip band (bold feature) ------------------------------------------- */
.pg-gripband { background: var(--pg-navy); color: #fff; }
.pg-gripband-in { display: flex; gap: var(--pg-space-5); align-items: center; padding-block: var(--pg-space-7); }
.pg-gripband-icon { flex: 0 0 auto; color: var(--pg-gold); }
.pg-gripband-icon svg { width: 84px; height: 84px; }
.pg-gripband-k { font-family: var(--pg-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-gold); margin: 0 0 var(--pg-space-2); }
.pg-gripband-h { font-family: var(--pg-font-head); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--pg-space-3); color: #fff; }
.pg-gripband-h span { color: var(--pg-gold); }
.pg-gripband-lead { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 var(--pg-space-3); color: rgba(255,255,255,0.92); max-width: 60ch; }
.pg-gripband-lead strong { color: #fff; }
.pg-gripband-note { font-size: 0.9375rem; line-height: 1.55; margin: 0; color: rgba(255,255,255,0.7); max-width: 60ch; border-left: 3px solid var(--pg-gold); padding-left: var(--pg-space-3); }
.pg-gripband-note strong { color: #fff; }
@media (max-width: 720px) {
  .pg-gripband-in { flex-direction: column; align-items: flex-start; gap: var(--pg-space-3); padding-block: var(--pg-space-5); }
  .pg-gripband-icon svg { width: 60px; height: 60px; }
}

/* --- Lineup ------------------------------------------------------------- */
.pg-lineup { padding-block: var(--pg-space-4) var(--pg-space-4); }
.pg-product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pg-space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .pg-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pg-product-grid { grid-template-columns: repeat(6, 1fr); } }
.pg-product-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--pg-space-2); background: var(--pg-card); border: 1px solid var(--pg-line-2); border-radius: var(--pg-radius); text-decoration: none; text-align: center; }
.pg-product-grid a:hover { border-color: var(--pg-navy); }
.pg-product-img img { width: 100%; height: auto; max-width: 120px; display: block; }
.pg-product-sku { color: var(--pg-navy); font-weight: 600; }
.pg-product-name { font-size: var(--pg-fs-small); color: var(--pg-ink-3); }
.pg-product-price { font-family: var(--pg-font-mono); font-weight: 600; font-size: 0.9rem; color: var(--pg-graphite); }
.pg-product-price .woocommerce-Price-amount { color: var(--pg-graphite); }
.pg-lineup-links { display: flex; gap: var(--pg-space-4); flex-wrap: wrap; margin-top: var(--pg-space-3); }
.pg-lineup-links a { font-family: var(--pg-font-head); font-weight: 600; color: var(--pg-navy); text-decoration: none; }
.pg-lineup-links a:hover { text-decoration: underline; }