/* ============================================================
   BADBAN — blog.css
   Extra styles for the dynamic project pages (/fa/work/<slug>)
   and the photo gallery. Loaded only on pages the CMS renders.
============================================================ */

/* breadcrumb above the case title */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.4rem;
  font-size: 0.85rem; color: var(--color-muted); }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--color-primary); border-bottom-color: currentColor; }
.page-hero .crumbs { color: rgba(244, 241, 233, 0.7); }
.page-hero .crumbs a:hover { color: var(--color-accent); }

/* photo gallery: natural proportions, masonry-style columns */
.case-gallery--photos { display: block; column-count: 3; column-gap: clamp(0.8rem, 1.6vw, 1.5rem); }
.case-gallery__item { display: block; margin: 0 0 clamp(0.8rem, 1.6vw, 1.5rem); break-inside: avoid;
  overflow: hidden; background: var(--color-tint); cursor: zoom-in; }
.case-gallery__item img { display: block; width: 100%; height: auto; transition: transform 0.8s var(--ease-out, ease), filter 0.4s; }
.case-gallery__item:hover img { transform: scale(1.04); filter: saturate(1.08); }
@media (max-width: 900px) { .case-gallery--photos { column-count: 2; } }
@media (max-width: 520px) { .case-gallery--photos { column-count: 1; } }

/* long-form project story (written in the admin panel) */
.case-prose p { margin: 0 0 1.2em; }
.case-prose h3 { margin: 1.8em 0 0.6em; color: var(--color-text); font-size: 1.25em; }
.case-prose ul { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
.case-prose li { margin-bottom: 0.4em; }
.case-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.case-prose strong { color: var(--color-text); }

/* draft badge (only visible to the logged-in admin previewing) */
.work-tile__draft { position: absolute; inset-block-start: 0.8rem; inset-inline-end: 0.8rem; z-index: 3;
  background: var(--color-accent); color: var(--color-ink); font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.6rem; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
  background: rgba(4, 38, 45, 0.94); padding: 3vh 3vw; }
.lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: 92vh; object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.lb button { position: absolute; background: rgba(244,241,233,.12); color: #f4f1e9; border: 0; width: 3rem; height: 3rem;
  font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.lb button:hover { background: var(--color-accent); color: var(--color-ink); }
.lb__close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lb__prev { inset-inline-start: 1rem; top: 50%; }
.lb__next { inset-inline-end: 1rem; top: 50%; }

/* blog */
.blog-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; opacity: .7; }
.case-fig { margin: 1.6rem 0; }
.case-fig img { width: 100%; height: auto; border-radius: 12px; display: block; }