/* ============================================================
   BILOOSH CASE STUDY
   ============================================================ */

:root {
  --bl-cream:      #EDF0D5;
  --bl-green:      #4B6740;
  --bl-dark-green: #2E4028;
  --bl-text:       #1E2218;
}

/* ── ANIMATIONS ─────────────────────────────────────────── */
.bl-anim-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.bl-anim-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.bl-anim-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.bl-anim-up.in,
.bl-anim-left.in,
.bl-anim-right.in {
  opacity: 1;
  transform: none;
}

/* ── HERO ────────────────────────────────────────────────── */
.bl-hero {
  width: 100%;
  line-height: 0;
  margin-top: 0;
}

.bl-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── OVERVIEW ────────────────────────────────────────────── */
.bl-overview {
  background: #fff;
  padding: 100px;
}

.bl-overview-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.bl-project-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--bl-dark-green);
  line-height: 1.15;
  margin-bottom: 16px;
}

.bl-tagline {
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--bl-green);
  margin-bottom: 40px;
}

.bl-sub-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bl-green);
  opacity: .6;
  margin: 0 0 24px;
}

.bl-sub-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--bl-dark-green);
  margin: 32px 0 12px;
}

.bl-body {
  font-size: 15px;
  line-height: 1.85;
  color: #1e2218;
  opacity: .72;
  margin-bottom: 18px;
  max-width: 620px;
}

.bl-body-list {
  margin: 0 0 24px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl-body-list li {
  font-size: 15px;
  line-height: 1.8;
  color: #1e2218;
  opacity: .68;
  max-width: 620px;
}

.bl-meta-table {
  border-top: 1px solid rgba(75,103,64,.18);
}

.bl-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(75,103,64,.18);
  gap: 16px;
}

.bl-meta-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bl-green);
  opacity: .5;
  flex-shrink: 0;
}

.bl-meta-val {
  font-size: 14px;
  color: var(--bl-dark-green);
  text-align: right;
}

a.bl-meta-val {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

a.bl-meta-val:hover {
  opacity: 0.6;
}

.bl-live-link {
  display: inline-block;
  margin-top: 8px;
  background: var(--bl-dark-green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 15px 34px;
  border-radius: 40px;
  text-decoration: none;
  transition: background .25s, transform .2s;
}

.bl-live-link:hover {
  background: var(--bl-green);
  transform: translateY(-2px);
}

/* ── FULL-WIDTH IMAGE ────────────────────────────────────── */
.bl-full-img {
  line-height: 0;
}

.bl-full-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── CENTRED PRODUCT SHOT ─────────────────────────────────
   For near-square product images that would tower over the
   page full-bleed — capped and centred on the cream ground.
   ──────────────────────────────────────────────────────────── */
.bl-product-shot {
  background: var(--bl-cream);
  padding: 90px 48px;
  line-height: 0;
}

.bl-product-shot img {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ── SIDE-BY-SIDE DUO ─────────────────────────────────────
   Two assets shown as an equal-width row, used wherever the
   layout calls for a "2-column / side by side" pairing.
   ──────────────────────────────────────────────────────────── */
.bl-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bl-dark-green);
}

.bl-duo img,
.bl-duo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .bl-duo { grid-template-columns: 1fr; }
}

/* ── SIDE-SCROLL GALLERY ─────────────────────────────────────
   Drag or swipe horizontally through the product scenes. Each frame
   is ~2268x1236, so they're sized by width and the row scroll-snaps
   from one to the next. js/main.js adds click-drag on desktop; touch
   devices get native swipe scrolling for free via overflow-x.
   ──────────────────────────────────────────────────────────── */
.bl-scroller {
  padding: 90px 0 100px;
  background: var(--bl-cream);
}

.bl-scroller--alt {
  background: #fff;
}

.bl-scroller-head {
  max-width: 1120px;
  margin: 0 auto 34px;
  padding: 0 48px;
}

.bl-scroller-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 46px);
  color: var(--bl-dark-green);
}

.bl-scroller-hint {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl-green);
  opacity: 0.7;
}

.bl-scroll-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 0 48px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.bl-scroll-track::-webkit-scrollbar {
  display: none;
}

.bl-scroll-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.bl-scroll-track img {
  flex: 0 0 auto;
  width: min(72vw, 880px);
  height: auto;
  display: block;
  border-radius: 8px;
  scroll-snap-align: center;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .bl-scroller      { padding: 60px 0 70px; }
  .bl-scroller-head { padding: 0 24px; }
  .bl-scroll-track  { padding: 0 24px; gap: 14px; }
  .bl-scroll-track img { width: 86vw; }
}

/* ── VIDEO ───────────────────────────────────────────────── */
.bl-video-wrap {
  background: var(--bl-dark-green);
  line-height: 0;
}

.bl-video-wrap video {
  width: 100%;
  max-height: 80vh;
  object-fit: cover;
  display: block;
}

.bl-video-full video {
  max-height: none;
  object-fit: unset;
  height: auto;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bl-overview-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .bl-overview { padding: 60px 24px; }
  .bl-video-wrap video { max-height: 60vh; }
  .bl-product-shot { padding: 56px 24px; }
}


/* The nav is fixed, so on a phone it sits on top of the opening image.
   Reserve its height here — clears the fixed nav. */
@media (max-width: 900px) {
  .bl-hero {
    padding-top: 70px;
  }
}