/* ═══════════════════════════════════════════
   CERTIFICATES.CSS — Shatabdi Pavers (certificates.html ONLY)
   Styles for: the trust strip and the certificate card grid.

   ✏️ Certificate TEXT/data is in js/shared.js, not here.
      This file only controls how the page LOOKS.
   ═══════════════════════════════════════════ */

/* the reassurance strip just under the hero, explaining plainly
   why this page matters to a non-technical buyer */
.cert-trust-strip{display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-left:4px solid var(--terra);border-radius:10px;padding:22px 26px}
.cert-trust-icon{font-size:28px;flex-shrink:0;margin-top:2px}
.cert-trust-title{font-weight:700;font-size:14.5px;margin-bottom:6px;color:var(--dark)}
.cert-trust-text{font-size:13.5px;color:var(--taupe);line-height:1.7}

/* the certificate cards */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.cert-card{border:1px solid var(--border);border-radius:12px;background:var(--white);overflow:hidden;transition:all var(--t)}
.cert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.cert-img{height:220px;background:var(--cream);cursor:pointer;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.cert-img img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;transition:transform var(--t)}
.cert-img:hover img{transform:scale(1.04)}
.cert-img-hint{position:absolute;bottom:10px;right:10px;background:rgba(27,23,19,.75);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;opacity:0;transition:opacity var(--t)}
.cert-img:hover .cert-img-hint{opacity:1}

.cert-body{padding:22px}
.cert-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;margin-bottom:8px;line-height:1.3}
.cert-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.cert-issuer{font-size:12.5px;color:var(--terra);font-weight:600}
.cert-valid{font-size:11.5px;color:var(--concrete)}
.cert-summary{font-size:13px;color:var(--taupe);line-height:1.7;padding-top:14px;border-top:1px solid var(--border)}