/* 
   Bollington Training Institute - Media Page Styles
*/

.blog-section { padding: 60px 0 80px; background: #fdfdfd; }
.post-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
  gap: 30px; 
}

.post-row { 
  display: flex; 
  flex-direction: column; 
  background: white; 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  overflow: hidden; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.post-row:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 12px 25px rgba(0,0,0,0.08); 
  border-color: transparent;
}

.post-thumb { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--navy-dark); flex-shrink: 0; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: transform .4s, opacity .3s; }
.post-row:hover .post-thumb img { transform: scale(1.04); opacity: 0.95; }

.thumb-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 20px; background: linear-gradient(to top, rgba(10, 10, 50, 0.72) 45%, rgba(10, 10, 50, 0.22) 100%); }
.thumb-title { font-family: 'Montserrat', sans-serif; font-weight: 800; color: white; font-size: 14px; line-height: 1.25; text-transform: uppercase; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.thumb-banner { display: inline-table; background: #f0c030; color: var(--navy-dark); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; padding: 4px 8px; line-height: 1.35; max-width: max-content; }

.post-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.post-category { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 12px; display: block; }
.post-category.courses { color: var(--navy); }
.post-category.selection { color: #c0392b; }

.post-title { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: 16px; line-height: 1.35; margin-bottom: 14px; transition: color .2s; }
.post-row:hover .post-title { color: var(--gold); }
.post-excerpt { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 24px; flex-grow: 1; }

.post-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f0f0; padding-top: 16px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.post-comments { display: flex; align-items: center; gap: 6px; }

@media (max-width: 600px) {
    .post-list { grid-template-columns: 1fr; }
}