/* STUDENT STORIES PAGE — page-specific tweaks on top of index.css's
   shared chrome (util-bar, header, canvas frame, buttons, footer, wa-btn). */

#stories-hero { min-height: 52vh; padding: 160px 6% 50px; justify-content: center; }

@media (max-width: 768px) {
  #stories-hero { padding: 100px 5% 36px; min-height: 50vh; }
}
#stories-hero .hero-sub { margin: 14px auto 0; text-align: center; }

#vlog-feature, #voices { min-height: auto; }
#cta { justify-content: center; }
.hero-ctas a.glow-btn { text-decoration: none; }

/* --- STORY CARDS --- */
.story-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.story-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 18px; overflow: hidden; transition: var(--ease);
  display: flex; flex-direction: column;
}
.story-card:hover { border-color: rgba(var(--teal-rgb),0.4); transform: translateY(-4px); }
.story-photo { height: 200px; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.story-cert {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--btn-text); background: linear-gradient(135deg, var(--teal), var(--aqua));
  padding: 4px 10px; border-radius: 6px;
}
.story-body h3 { font-size: 1.05rem; color: var(--text); margin-top: 4px; }
.story-loc { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.story-body p { font-size: 0.88rem; margin-top: 6px; }

@media (max-width: 1100px) {
  .story-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .story-grid { grid-template-columns: 1fr; }
}