/* ==========================================================================
   Ventures showcase — one full-viewport cinematic section per venture.
   Scoped to ventures.html only; does not touch shared card/grid styles used
   by Blog/News/category pages. To add a new venture, copy a whole
   <section class="venture-banner"> block in ventures.html and give it a
   new modifier class + background image.
   ========================================================================== */

.ventures-showcase{ background:var(--paper); }

.venture-banner{
  position:relative; min-height:100vh; width:100%; overflow:hidden;
  border-bottom:1px solid var(--hairline); background:#000;
  display:flex; flex-direction:column;
}

.venture-banner__art{ position:absolute; top:0; right:0; bottom:0; width:58%; overflow:hidden; }
.venture-banner__art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Briefcase's source image only has baked text on its LEFT (the wordmark
   block) — the chat-demo UI on the right is real, unique content that
   isn't duplicated anywhere in the HTML, so show it generously. Crop
   wide and bias right to exclude just the wordmark; no mask needed here,
   the left-edge fade below handles the transition. */
.venture-banner--briefcase .venture-banner__art{ width:38%; }
.venture-banner--briefcase .venture-banner__art img{ object-position:83% 46%; }

/* Anatomica's source has baked text on BOTH sides (title on the left,
   the capability panel on the right) that IS duplicated by real HTML —
   so it still needs a window around just the middle artwork, but wider
   and softer than a tight spotlight so the figure reads clearly. */
.venture-banner--anatomica .venture-banner__art{ width:48%; }
.venture-banner--anatomica .venture-banner__art img{ object-position:60% 38%; }
.venture-banner--anatomica .venture-banner__art{
  -webkit-mask-image:radial-gradient(ellipse 48% 58% at 52% 44%, #000 46%, transparent 78%);
  mask-image:radial-gradient(ellipse 48% 58% at 52% 44%, #000 46%, transparent 78%);
}

/* fades the art's left edge into the page background so the crop reads as
   atmosphere, not a hard rectangle, and keeps text at the section's left
   legible over any bright artwork */
.venture-banner__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #000 0%, rgba(0,0,0,.65) 22%, transparent 60%);
}
/* Briefcase's crop sits close to the source art's right-hand content edge at
   some viewport ratios; a soft right fade keeps any near-edge overlap
   reading as atmosphere instead of a hard clip. */
.venture-banner--briefcase .venture-banner__art::after{
  background:linear-gradient(90deg, #000 0%, rgba(0,0,0,.65) 22%, transparent 55%, transparent 86%, rgba(0,0,0,.55) 100%);
}
.venture-banner__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 20%, transparent 78%, rgba(0,0,0,.6) 100%);
}

.venture-banner__frame{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  padding-block:clamp(20px,3.4vw,40px);
}

.venture-banner__meta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:20px; border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}
.venture-banner__brand{ color:var(--ink); font-weight:700; }
.venture-banner__tags{ display:none; }
@media (min-width:900px){ .venture-banner__tags{ display:inline; } }

.venture-banner__body{
  flex:1; display:flex; align-items:center; padding-block:clamp(28px,5vw,0px);
}
.venture-banner--anatomica .venture-banner__body{ justify-content:space-between; gap:clamp(24px,4vw,64px); }

.venture-banner__content{ max-width:640px; }
.venture-banner__title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:.9; color:var(--ink);
  font-size:clamp(3.2rem,9vw,6.4rem); margin-bottom:.28em;
}
.venture-banner__subtitle{ font-family:var(--font-body); color:var(--grey); font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.4; max-width:32ch; }

.venture-banner__cta, .venture-banner__status{
  display:inline-flex; align-items:center; gap:8px; margin-top:clamp(24px,3vw,40px);
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--ink);
}
.venture-banner__cta{ transition:opacity .15s ease; }
.venture-banner__cta:hover{ opacity:.72; }
.venture-banner__status{ color:var(--grey); border-color:var(--hairline); cursor:default; }

/* ---- Anatomica's supporting capability panel — always shown (it's real
   content, not decoration); stacks below the main content on narrow
   viewports via the .venture-banner__body column rule below. ---- */
.venture-banner__panel{ flex:none; max-width:340px; text-align:left; }

.venture-banner__eyebrow{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.venture-banner__panel-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--ink); line-height:1.35; margin-bottom:28px; }

.venture-banner__capabilities{ list-style:none; display:flex; flex-direction:column; gap:18px; }
.venture-banner__capabilities li{ padding-left:16px; border-left:1px solid var(--hairline); }
.venture-banner__capabilities strong{
  display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:3px;
}
.venture-banner__capabilities span{ display:block; color:var(--grey); font-size:.86rem; }

/* ---- tablet/mobile: stack, keep it cinematic but never overflow.
   Selectors here repeat the venture modifier classes so they match (and
   beat, by source order) the desktop per-venture art rules above, which
   have equal specificity. ---- */
@media (max-width:999px){
  .venture-banner--anatomica .venture-banner__body{ flex-direction:column; align-items:flex-start; gap:32px; }
}
@media (max-width:899px){
  .venture-banner{ min-height:100svh; }
  .venture-banner--briefcase .venture-banner__art,
  .venture-banner--anatomica .venture-banner__art{ position:absolute; inset:0; width:100%; }
  .venture-banner--briefcase .venture-banner__art{
    -webkit-mask-image:radial-gradient(ellipse 52% 24% at 50% 62%, #000 35%, transparent 62%);
    mask-image:radial-gradient(ellipse 52% 24% at 50% 62%, #000 35%, transparent 62%);
  }
  .venture-banner--briefcase .venture-banner__art img{ object-position:52% 44%; }
  .venture-banner--anatomica .venture-banner__art{
    -webkit-mask-image:radial-gradient(ellipse 55% 26% at 62% 60%, #000 30%, transparent 58%);
    mask-image:radial-gradient(ellipse 55% 26% at 62% 60%, #000 30%, transparent 58%);
  }
  .venture-banner--anatomica .venture-banner__art img{ object-position:69% 34%; }
  .venture-banner__art::after{ background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.85) 100%); }
  .venture-banner__meta{ flex-wrap:wrap; }
}