/* ==========================================================================
   Taq Ventures — case studies page-only styles
   Loaded after assets/styles.css on case-studies.html
   ========================================================================== */

/* ---- intro ---- */
.intro{
  padding: 84px 0 60px;
  border-bottom: 1px solid var(--line);
}
.intro .eyebrow{
  display:flex; align-items:center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.intro .eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }
.intro h1{
  font-size: clamp(32px, 4.5vw, 46px);
  letter-spacing: -0.01em;
}
.intro p{
  color: var(--muted);
  font-size: 18px;
}

/* ---- the approach shared by every case study ---- */
.moves{
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.moves h2{
  font-size: clamp(24px, 3.2vw, 32px);
  margin-bottom: 28px;
}
.moves-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 32px;
}
.moves-list li{
  font-size: 18px;
  line-height: 1.45;
  padding-top: 18px;
  border-top: 2px solid var(--accent-bright);
}
.moves-num{
  display: block;
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ---- case study block ---- */
.case{
  padding: 68px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 24px; /* keeps anchored jumps clear of the sticky-feeling header */
}
.case-num{
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}
.case h2{
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 8px;
}
.case .dek{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  color: var(--accent);
  font-size: 19px;
  margin-bottom: 30px;
}
.case .facts{
  display:flex;
  gap: 32px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.case .facts div span{
  display:block;
  color: var(--accent-bright);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  margin-top: 2px;
}
/* Use on a .facts <span> to flag an in-progress engagement, e.g. "Ongoing".
   This used to be the only coloured value in the row, which is all the flag
   needed to be. Now that every value carries the accent blue it needs a mark of
   its own, so it takes a small filled dot as well. */
.facts .status-live{
  display: flex;
  align-items: center;
  gap: 7px;
}
.facts .status-live::before{
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
}

.case p.body{
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 20px;
  font-size: 16px;
}
.case p.body strong{ color: var(--text); font-weight: 500; }

.scope-label{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  color: var(--text);
  margin: 30px 0 14px;
}
/* Highlighted note for an ongoing-engagement — a slim rule marks it,
   no filled background box. */
.ongoing{
  margin-top: 30px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 15px;
}
.ongoing strong{ color: var(--text); font-weight: 500; }

/* Scope: plain text separated by middots, not bordered pills. */
.tags{
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}
.tag{ color: var(--text); }
.tag:not(:last-child)::after{
  content: "\00a0\00b7\00a0";
  color: var(--muted);
}

/* ---- website portfolio: browser-frame screenshots (click to expand) ---- */
/* The link to the client's live site. It used to be a 13px text link in the
   top-right corner of the section header, opposite the "click any image to
   expand" label — the only place on a case study where a visitor can go and see
   the work actually running, set in the far corner at caption size. It sits
   under the gallery now, as a button, on the reading edge rather than the
   opposite one.

   Outlined rather than filled, and it fills with the navy on hover rather than
   the accent blue: the filled navy belongs to the page's own CTA at the bottom,
   and white on --accent-bright is only 4:1. See the token comment in
   assets/styles.css. */
.portfolio-visit{
  display: inline-block;
  margin-top: 20px;
  padding: 11px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-bright);
  text-decoration: none;
  background: none;
  border: 1px solid var(--accent-bright);
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.portfolio-visit:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.portfolio-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.browser-frame{
  display: block;
  width: 100%;
  background: none;
  overflow: hidden;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.browser-frame-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.browser-frame:hover .browser-frame-bar{ border-color: var(--accent-bright); }
.browser-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  display: inline-block;
}
.browser-frame-url{
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-frame-media{
  position: relative;
}
.browser-frame img{
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top;
}
.play-badge{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16,19,23,0.72);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  pointer-events: none;
}
@media (max-width: 640px){
  .portfolio-strip{ grid-template-columns: 1fr; }
  .browser-frame img{ height: 200px; }
}

/* ---- a case study with no screenshot gallery ---- */
/* Set by assets/render-case-studies.js on a case study whose portfolio is
   empty. Two of the three engagements on this page were website builds and end
   on a full-width strip of framed screenshots; the third was sales and business
   development, so there is nothing of ours to screenshot — and it ended on a
   single full-width line of scope text sitting hard against the section rule,
   which reads as a gallery somebody forgot to add rather than an engagement
   that never had one. No placeholder imagery: the block is rebalanced around
   the copy it does have.

   The scope list comes in to roughly the measure of the paragraphs above it, so
   the section closes as a column of text rather than one line spanning the full
   wrap, and the live-site button — which now renders here at all, see the note
   in the renderer — becomes the closing action under a label of its own. */
.case-no-gallery .tags{ max-width: 62ch; }
/* The .scope-label above it already supplies the 14px of clearance that
   .portfolio-strip gets; the 20px on .portfolio-visit is for sitting directly
   under the strip, with no label in between. */
.case-no-gallery .portfolio-visit{ margin-top: 0; }

/* ---- lightbox: click-to-expand overlay for portfolio media ---- */
.lightbox{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,12,14,0.92);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.lightbox.open{ display: flex; }
.lightbox-inner{
  max-width: 1100px;
  max-height: 85vh;
  width: 100%;
}
.lightbox-inner img,
.lightbox-inner video{
  display: block;
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox-close{
  position: absolute;
  top: 24px;
  right: 28px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}
.lightbox-close:hover{ color: var(--accent); }

/* ---- closing CTA (page-specific copy sits in the markup) ---- */
.cta-block{ padding: 76px 0; }
.cta-block h2{
  font-size: 34px;
}
.cta-block p{
  color: var(--muted);
  margin-bottom: 24px;
}

/* ---- mobile vertical rhythm: see the matching block in styles.css ---- */
@media (max-width: 640px){
  .intro{ padding: 40px 0 32px; }
  .intro .eyebrow{ margin-bottom: 18px; }
  .intro p{ font-size: 17px; }
  .case{ padding: 40px 0; }
  .case-num{ margin-bottom: 12px; }
  .case .dek{ margin-bottom: 20px; }
  .case .facts{ margin-bottom: 24px; padding-bottom: 24px; gap: 18px 32px; }
  .cta-block{ padding: 44px 0; }
  .cta-block h2{ font-size: 28px; }
}