/* ==========================================================
   YOGERA — RESOURCES PAGES SHARED STYLES
   Used by: docs.html, tutorials.html, blog.html
   Depends on shared.css. A lighter-weight template than
   modes.css/solutions.css since these are utility/reference
   pages, not conversion surfaces.
   ========================================================== */

.res-hero{ padding:170px 24px 30px; text-align:center; }
.res-hero .eyebrow-sm{ display:inline-block; }
.res-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing:-0.01em; margin-top:14px; }
.res-hero p{ margin-top:14px; color:var(--text-muted); font-size:15.5px; max-width:560px; margin-left:auto; margin-right:auto; }

/* ---- category / catalog cards ---- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; perspective:1200px; }
.res-card{
  display:flex; flex-direction:column; gap:12px; padding:26px 22px; border-radius:var(--radius-lg);
  border:1px solid var(--line); background:var(--surface); transition:all var(--dur-comp) var(--ease);
}
.res-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-3px) var(--card-tilt); }
.res-card .resource-card-icon{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
}
.res-card h4{ font-family:var(--font-display); font-size:15px; font-weight:700; }
.res-card p{ font-size:13px; color:var(--text-muted); line-height:1.6; flex-grow:1; }
.res-card .resource-card-go{ font-size:12.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.res-card .resource-card-go i{ font-size:11px; transition:transform var(--dur-micro) var(--ease); }
.res-card:hover .resource-card-go i{ transform:translateX(3px); }
@media (max-width:860px){ .res-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .res-grid{ grid-template-columns:1fr; } }

/* ---- coming-soon badge (tutorials / blog teasers, honest about status) ---- */
.soon-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em;
  padding:3px 9px; border-radius:var(--radius-pill); background:var(--surface-hover); color:var(--text-muted); text-transform:uppercase;
  align-self:flex-start;
}

/* ---- FAQ section (docs.html) ---- */
.res-faq-wrap{ padding:20px 24px 90px; }
.res-faq-wrap .section-head{ text-align:center; }

/* ---- tutorial / blog post cards (richer than res-card, includes meta row) ---- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:1200px; }
.post-card{
  display:flex; flex-direction:column; gap:10px; padding:24px 22px; border-radius:var(--radius-lg);
  border:1px solid var(--line); background:var(--surface); transition:all var(--dur-comp) var(--ease);
}
.post-card:hover{ border-color:var(--blue-glow); background:var(--surface-raised); transform:translateY(-3px) var(--card-tilt); }
.post-card .post-card-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue); }
.post-card h4{ font-family:var(--font-display); font-size:15.5px; font-weight:700; line-height:1.35; }
.post-card p{ font-size:13px; color:var(--text-muted); line-height:1.65; flex-grow:1; }
.post-card .post-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.post-card .post-card-go{ font-size:12.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.post-card .post-card-go i{ font-size:11px; transition:transform var(--dur-micro) var(--ease); }
.post-card:hover .post-card-go i{ transform:translateX(3px); }
@media (max-width:860px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

.res-note{ max-width:640px; margin:34px auto 0; text-align:center; font-size:13.5px; color:var(--text-muted); line-height:1.7; }

.res-cta-wrap{ text-align:center; padding:20px 24px 90px; }