/* ==========================================
   GALLERY PAGE STYLES
   Theme: Blue & White Modern (aligned with articles.css)
   ========================================== */

.gallery-section { padding: var(--spacing-4xl) 0; background: var(--white); }

.gallery-grid { display:grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: stretch; }

.gallery-card { background: var(--white); border-radius: var(--radius-xl); overflow:hidden; border:1px solid var(--gray-200); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); display:flex; flex-direction:column; height:100%; }
.gallery-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--primary-light); }

.gallery-image { position:relative; overflow:hidden; aspect-ratio: 16 / 10; background: var(--gray-100); flex:0 0 auto; min-height: 180px; height: clamp(180px, 24vw, 220px); }
.gallery-image a { display:block; width:100%; height:100%; }
.gallery-image img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.gallery-card:hover .gallery-image img { transform: scale(1.08); }

.gallery-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.65)); opacity:0; transition: var(--transition-normal); }
.gallery-card:hover .gallery-overlay { opacity:1; }
.gallery-overlay i { font-size:2rem; color: var(--white); }

/* Badge overlay removed in favor of meta below */

.gallery-content { padding: var(--spacing-lg) var(--spacing-xl); display:flex; flex-direction:column; gap: var(--spacing-sm); position:relative; flex:1; }
.gallery-meta { display:flex; gap: var(--spacing-lg); flex-wrap:wrap; margin-bottom: var(--spacing-xxs); }
.gallery-meta .meta-item { display:inline-flex; align-items:center; gap: var(--spacing-xs); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.gallery-meta .meta-item i { color: var(--primary-color); }
.gallery-title { font-size: var(--font-size-lg); font-weight:700; margin: var(--spacing-xs) 0 var(--spacing-xs); line-height:1.35; }
.gallery-title a { color: var(--text-primary); text-decoration:none; transition: var(--transition-normal); display:block; }
.gallery-title a:hover { color: var(--primary-color); }

/* Gallery Excerpt */
.gallery-excerpt { color: var(--text-secondary); line-height:1.6; margin: 0 0 var(--spacing-sm); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }

/* Meta + Actions row */
.gallery-meta { display:flex; gap: var(--spacing-lg); flex-wrap:wrap; margin-top: var(--spacing-sm); }
.gallery-meta .meta-item { display:inline-flex; align-items:center; gap: var(--spacing-xs); color: var(--text-tertiary); font-size: var(--font-size-sm); }
.gallery-meta .meta-item i { color: var(--primary-color); }

/* Read More button (match articles) */
.btn-read-more { display:inline-flex; align-items:center; color: var(--primary-color); font-weight:600; text-decoration:none; transition: var(--transition-normal); gap: var(--spacing-xs); font-size: var(--font-size-sm); }
.btn-read-more:hover { color: var(--primary-dark); gap: var(--spacing-sm); text-decoration: underline; }
.btn-read-more i { transition: transform var(--transition-normal); }
.btn-read-more:hover i { transform: translateX(4px); }

@media (min-width: 576px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .gallery-section { padding: var(--spacing-2xl) 0; } .gallery-grid { gap: var(--spacing-xl); } }