/* Gallery Detail - Modular styles aligned with other detail pages */

.detail-section { padding: 40px 0 80px; }

.detail-container.modern-card { background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.06); padding:28px; }

.detail-header { margin-bottom:18px; }

/* Reuse badge style for consistency */
.article-category-badge { display:inline-flex; align-items:center; gap:8px; background:#eaf2ff; color:#1b5fbf; font-weight:600; padding:6px 12px; border-radius:999px; font-size:13px; }

.detail-title { margin:14px 0 10px; font-size:1.875rem; line-height:1.25; color:#0f172a; }

.detail-meta { display:flex; gap:16px; flex-wrap:wrap; color:#64748b; font-size:14px; }
.detail-meta .meta-item { display:inline-flex; align-items:center; gap:8px; }

.detail-image { margin:16px 0 20px; border-radius:14px; overflow:hidden; }
.detail-image img { width:100%; height:auto; display:block; object-fit:cover; max-height:520px; }

.detail-content { color:#2b2f3a; line-height:1.8; font-size:1.0625rem; }
.detail-content h2, .detail-content h3 { color:#0f172a; margin-top:1.4em; margin-bottom:.6em; }
.detail-content img { max-width:100%; height:auto; border-radius:10px; }
.detail-content blockquote { border-left:4px solid #2563eb; padding:12px 16px; background:#f8fafc; border-radius:8px; }

.article-footer { margin-top:26px; display:flex; justify-content:flex-start; align-items:center; gap:16px; flex-wrap:wrap; background:transparent; padding:0; }
.article-footer .back-button { display:inline-flex; align-items:center; gap:10px; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:10px 16px; font-weight:600; transition:all .2s ease; width:auto; max-width:max-content; margin:0; }
.article-footer .back-button:hover { background:#dbeafe; transform: translateX(-2px); text-decoration:none; }

/* Thumbnails section */
.gallery-thumbs-section { margin-top:28px; }
.thumbs-card.modern-card { background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.06); padding:20px; }
.thumbs-title { font-size:1.125rem; font-weight:700; margin:0 0 16px; color:#0f172a; }
.gallery-thumbs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:16px; }
.gallery-thumb-item { position:relative; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(16,24,40,.04); }
.gallery-thumb-item img { width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; display:block; transition: transform .25s ease; }
.gallery-thumb-item .thumb-link { display:block; width:100%; height:100%; position:relative; }
.thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55)); opacity:0; transition: .2s ease; color:#fff; font-size:1.5rem; }
.gallery-thumb-item:hover img { transform: scale(1.04); }
.gallery-thumb-item:hover .thumb-overlay { opacity:1; }

/* Photo modal */
.photo-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10000; }
.photo-modal.open { display: flex; }
.photo-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.85); backdrop-filter: blur(2px); }
.photo-modal img { position: relative; max-width: 92vw; max-height: 92vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.photo-modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.9); border: none; border-radius: 999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.photo-modal-close i { color:#111; }

/* Page header spacing override if needed */
.page-header-modern { padding:36px 0; }

@media (max-width: 768px) {
  .detail-container.modern-card { padding:18px; border-radius:12px; }
  .detail-title { font-size:1.5rem; }
  .detail-image img { max-height:360px; }
}