/* ============================================================
   SUCCESS STORIES — Tile Grid Page
   Reuses .testi-video / .testi-badge / .video-modal-* classes
   from success-stories.css — load that file first, then this one.
   ============================================================ */

.stories-page-header{text-align:center;max-width:720px;margin:0 auto 40px;}

.stories-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:24px;}

.story-tile{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease, border-color .2s ease;}
.story-tile:hover{border-color:var(--blue-mid);box-shadow:0 8px 24px rgba(0,0,0,.08);}

.story-tile-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;}

.story-tile-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;}

.story-tile-quote{font-family:'DM Sans',sans-serif;font-style:normal;font-size:13.5px;color:var(--text-muted);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.story-tile-footer{padding-top:10px;margin-top:auto;border-top:1px solid var(--border);}
.story-tile-role{font-size:12.5px;color:var(--text-muted);margin:0;}

@media(max-width:480px){
  .stories-grid{grid-template-columns:1fr;}
}