/* ═══════════════════════════════════════════════════════════
   caseStudy.css — Full-screen case study overlay
   ═══════════════════════════════════════════════════════════ */

/* OVERLAY SHELL */
.cs-overlay {
  position: fixed; inset: 0; z-index: 900;
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden; display: flex; flex-direction: column; max-width: 100vw;
}
.cs-overlay.is-open { transform: translateX(0); }

.cs-overlay.cs-theme--maxxfitness  { --cs-accent: #F5A623; --cs-bg: #0d0d0f; --cs-text: #ffffff; }
.cs-overlay.cs-theme--petmaster    { --cs-accent: #4A90D9; --cs-bg: #0d0d0f; --cs-text: #ffffff; }
.cs-overlay.cs-theme--couzllectors { --cs-accent: #FF3C38; --cs-bg: #F5F0E8; --cs-text: #0C0721; }
.cs-overlay { background: var(--cs-bg, var(--color-bg-primary)); color: var(--cs-text, var(--color-text-primary)); }

/* CLOSE BUTTON */
.cs-close {
  position: fixed; top: var(--space-6); right: var(--space-8); z-index: 910;
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full); padding: var(--space-2) var(--space-4);
  color: var(--cs-text, #fff); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wide); cursor: pointer;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease;
}
.cs-overlay.is-open .cs-close { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.cs-close:hover { background: rgba(255,255,255,0.15); }
.cs-close svg { width: 16px; height: 16px; }

/* BODY */
.cs-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; padding-bottom: var(--space-32);
  scroll-behavior: smooth; width: 100%;
}
.cs-body::-webkit-scrollbar { width: 3px; }
.cs-body::-webkit-scrollbar-track { background: transparent; }
.cs-body::-webkit-scrollbar-thumb { background: var(--cs-accent, var(--color-accent)); border-radius: 99px; }

/* HERO */
.cs-hero {
  max-width: 900px; margin-inline: auto;
  padding: clamp(70px, 12vw, 140px) clamp(1.25rem, 5vw, 4rem) var(--space-16);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  width: 100%; box-sizing: border-box;
}
.cs-overlay.is-open .cs-hero { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

.cs-hero__meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }

.cs-number { font-size: var(--text-sm); font-weight: 600; color: var(--cs-accent, var(--color-accent)); letter-spacing: var(--tracking-wider); }

.cs-type {
  font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  opacity: 0.5; border: 1px solid currentColor; padding: 3px 10px; border-radius: var(--radius-full);
}

.cs-title {
  font-family: var(--font-display); font-size: clamp(2rem, 7vw, 80px); font-weight: 700;
  line-height: 1.0; letter-spacing: var(--tracking-tight); margin-bottom: var(--space-6);
  word-break: break-word; overflow-wrap: break-word;
}
.cs-title em { font-style: normal; color: var(--cs-accent, var(--color-accent)); }
.cs-title .title--couz { color: #0C0721; }

.cs-desc {
  font-size: clamp(var(--text-sm), 2vw, var(--text-lg)); line-height: var(--leading-relaxed);
  opacity: 0.7; max-width: 65ch; margin-bottom: var(--space-8); overflow-wrap: break-word;
}

.cs-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.cs-tags li {
  font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  border: 1px solid var(--cs-accent, var(--color-accent)); color: var(--cs-accent, var(--color-accent));
  padding: 4px 12px; border-radius: var(--radius-full); opacity: 0.85;
}

/* SECTIONS */
.cs-section {
  max-width: 1100px; margin-inline: auto;
  padding: var(--space-16) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid rgba(128,128,128,0.15);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 100%; box-sizing: border-box;
}
.cs-section.is-visible { opacity: 1; transform: translateY(0); }

.cs-section__label {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--cs-accent, var(--color-accent)); margin-bottom: var(--space-8);
}

/* PROSE */
.cs-prose { max-width: 65ch; margin-bottom: var(--space-8); }
.cs-prose p { font-size: var(--text-base); line-height: var(--leading-relaxed); opacity: 0.65; }

/* IMAGE GRIDS */
.cs-grid { display: grid; gap: var(--space-4); }
.cs-grid--hero  { grid-template-columns: 1fr; }
.cs-grid--two   { grid-template-columns: repeat(2, 1fr); }
.cs-grid--three { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-4); }

/* PLACEHOLDERS */
.cs-placeholder {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  border: 1.5px dashed rgba(128,128,128,0.25); background: rgba(128,128,128,0.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); color: rgba(128,128,128,0.5); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-placeholder:hover { border-color: var(--cs-accent, rgba(243,231,217,0.4)); background: rgba(128,128,128,0.1); }
.cs-placeholder--loaded { border: none; background: none; padding: 0; }
.cs-placeholder--loaded .cs-placeholder__icon,
.cs-placeholder--loaded span:not(.cs-img) { display: none; }
.cs-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); display: block; cursor: zoom-in; }
.cs-placeholder--lg   { aspect-ratio: 21 / 9; }
.cs-placeholder--tall { aspect-ratio: 4 / 3; }
.cs-placeholder__icon { opacity: 0.4; }
.cs-placeholder__icon svg { width: 36px; height: 36px; }

.cs-placeholder--phone { aspect-ratio: 9 / 19; max-width: 220px; margin-inline: auto; }
.cs-grid--phones { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.cs-grid--phones .cs-placeholder--phone { flex: 0 0 clamp(130px, 18vw, 220px); }

/* PROJECT SLIDE-OUT */
.projects.cs-exiting {
  transform: translateX(-8%); opacity: 0.2; pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════
   MAXX FITNESS — Desktop phone layout
   ═══════════════════════════════════════════════════════════ */
.cs-maxx-research { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }
.cs-maxx-research__item { display: flex; flex-direction: column; gap: 10px; }
.cs-maxx-caption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.4; padding-left: 2px; }

.cs-maxx-img-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 8px; color: rgba(128,128,128,0.45); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; min-height: 200px; cursor: zoom-in;
  transition: border-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cs-maxx-research__item--wide .cs-maxx-img-wrap { aspect-ratio: 16 / 9; min-height: unset; }
.cs-maxx-research__item:not(.cs-maxx-research__item--wide) .cs-maxx-img-wrap { aspect-ratio: 4 / 3; min-height: unset; }
.cs-maxx-img-wrap:hover { border-color: rgba(245,166,35,0.3); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }

.cs-maxx-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 10%; border-radius: 12px;
  display: block; cursor: zoom-in; transition: transform 0.4s ease;
}
.cs-maxx-img-wrap:hover .cs-maxx-img { transform: scale(1.02); }
.cs-maxx--loaded .cs-placeholder__icon,
.cs-maxx--loaded .cs-placeholder__text { display: none; }

/* Phone row — desktop */
.cs-maxx-phones {
  display: flex; flex-direction: row; align-items: flex-end; justify-content: center;
  gap: 16px; padding: 40px 0 20px; position: relative;
}
.cs-maxx-phone { flex: 0 0 auto; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cs-maxx-phone--center { width: 200px; z-index: 3; transform: translateY(-24px); }
.cs-maxx-phone--raised { width: 170px; z-index: 2; transform: translateY(-8px); }
.cs-maxx-phone--back   { width: 155px; z-index: 1; transform: translateY(0); opacity: 0.85; }
.cs-maxx-phone:hover { z-index: 10; transform: translateY(-32px) scale(1.03) !important; opacity: 1 !important; }

.cs-maxx-phone__shell {
  background: #1a1a1a; border-radius: 32px; padding: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset, 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5);
  position: relative;
}
.cs-maxx-phone__notch { width: 60px; height: 8px; background: #111; border-radius: 99px; margin: 0 auto 8px; position: relative; z-index: 2; }

.cs-maxx-img-wrap--phone {
  border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 19.5;
  min-height: unset; border: none; background: #111; position: relative; cursor: zoom-in;
}
.cs-maxx-img-wrap--phone .cs-maxx-img {
  object-position: center center; object-fit: cover;
  width: 140%; height: 130%; top: 50%; left: 50%;
  transform: translate(-50%, -50%); inset: unset; border-radius: 0;
}
.cs-maxx-img-wrap--phone:hover .cs-maxx-img { transform: translate(-50%, -50%) scale(1.04); }

.cs-maxx-phones::before {
  content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 60px;
  background: radial-gradient(ellipse, rgba(245,166,35,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   LIGHTBOX
   ───────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 9500; display: flex;
  align-items: center; justify-content: center; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: zoom-out; }
.lightbox__close {
  position: absolute; top: var(--space-6); right: var(--space-8); z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--ease-out-back);
}
.lightbox__close:hover { background: rgba(255,255,255,0.16); transform: scale(1.1); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__content { position: relative; z-index: 1; max-width: 92vw; max-height: 90vh; transform: scale(0.92); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox.is-open .lightbox__content { transform: scale(1); }
.lightbox__img { display: block; max-width: 92vw; max-height: 90vh; width: auto; height: auto; border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,0.8); object-fit: contain; transition: opacity 0.12s ease, transform 0.12s ease; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--ease-out-back);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.lightbox__prev { left: var(--space-8); }
.lightbox__next { right: var(--space-8); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.1); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.1); }
.lightbox__nav svg { width: 20px; height: 20px; }

/* ─────────────────────────────────────────────
   LIGHT MODE
   ───────────────────────────────────────────── */
[data-theme="light"] .cs-overlay.cs-theme--maxxfitness,
[data-theme="light"] .cs-overlay.cs-theme--petmaster,
[data-theme="light"] .cs-overlay.cs-theme--couzllectors { --cs-bg: #F5F0E8; --cs-text: #1A1612; }
[data-theme="light"] .cs-overlay .cs-close { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #1A1612; }
[data-theme="light"] .cs-overlay .cs-close:hover { background: rgba(0,0,0,0.12); }
[data-theme="light"] .cs-overlay .cs-section { border-top-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cs-overlay .cs-prose p { color: #1A1612; opacity: 0.6; }
[data-theme="light"] .cs-overlay .cs-placeholder { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.35); }
[data-theme="light"] .cs-overlay .cs-placeholder:hover { background: rgba(0,0,0,0.08); border-color: var(--cs-accent); }
[data-theme="light"] .cs-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
[data-theme="light"] .cs-overlay .cs-title .title-plain { color: #1A1612; }
[data-theme="light"] .cs-overlay.cs-theme--couzllectors .cs-title .title--couz { color: #0C0721; }

/* ─────────────────────────────────────────────
   MOBILE ≤768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cs-grid--two,
  .cs-grid--three { grid-template-columns: 1fr; }
  .cs-grid--two .cs-placeholder--tall { aspect-ratio: 16 / 9; }

  .cs-close { top: var(--space-4); right: var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

  .cs-hero { padding-top: clamp(56px, 14vw, 80px); padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: var(--space-10); }

  .cs-title { font-size: clamp(1.75rem, 9vw, 3rem); line-height: 1.05; }
  .cs-desc  { font-size: var(--text-sm); max-width: 100%; }
  .cs-hero__meta { flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
  .cs-tags li { font-size: 10px; padding: 3px 10px; }

  .cs-section { padding-top: var(--space-10); padding-bottom: var(--space-10); padding-left: 1.25rem; padding-right: 1.25rem; }
  .cs-prose { max-width: 100%; }
  .cs-prose p { font-size: var(--text-sm); }

  .cs-maxx-research { grid-template-columns: 1fr; gap: var(--space-4); }

  .cs-maxx-phones {
    gap: 10px; padding: 16px 1.25rem 24px;
    overflow-x: auto; justify-content: flex-start;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; align-items: flex-end;
  }
  .cs-maxx-phones::-webkit-scrollbar { display: none; }
  .cs-maxx-phone { flex-shrink: 0; scroll-snap-align: center; }
  .cs-maxx-phone--center { width: 140px; transform: translateY(-16px); }
  .cs-maxx-phone--raised { width: 120px; transform: translateY(-6px); }
  .cs-maxx-phone--back   { width: 110px; transform: translateY(0); }

  .lightbox__prev, .lightbox__next { display: none; }
}

/* ─────────────────────────────────────────────
   SMALL MOBILE ≤480px
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .cs-title { font-size: clamp(1.5rem, 10vw, 2.5rem); }
  .cs-hero    { padding-left: 1rem; padding-right: 1rem; }
  .cs-section { padding-left: 1rem; padding-right: 1rem; }
  .cs-maxx-phone--center { width: 120px; }
  .cs-maxx-phone--raised { width: 105px; }
  .cs-maxx-phone--back   { width: 95px; }
}