/* ============================================================
   solutions/business.html: three two-box chapters after "Your materials
   become your team's app" (user, 2026-10-06; planned and checked first in
   _preview/business-ko.html): role-play, sentences, role-based roadmaps.

   The boxes are the Universities page's two-box chapters as they stood when
   the user approved the preview (css/uni-student.css, 2026-10-06 early), copied
   here under a bc- prefix so later changes to that page don't move these:
   - Speechify's "Create any Podcast" pair, ≈58 / 42, swapped left/right
     chapter by chapter;
   - the Individuals #daily ground: two system 100 rungs, each 35% with white;
   - the CSS phone (grey-1000 bezel, 9:41 bar in the screenshot's top colour);
   - phones and screens run off the box's foot; the box clips them.
   Every picture is an unaltered crop or recording (assets/business/chapters,
   assets/business/ui).
   ============================================================ */

.bz-chapters { padding-block: var(--sp-40) var(--section-gap); }
.bc-chapter { padding-block: var(--sp-40); }

/* ---- Chapter opener (§5.4): pill → heading → one line ---- */
.bc-head { max-width: 46rem; }
.bc-head__title { color: var(--color--grey-1000); }
.bc-head__line {
  margin-top: var(--sp-20);
  max-width: 40rem;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

/* ---- Boxes ---- */
.bc-box {
  --_from: var(--color--yellow-100);
  --_to: var(--color--blue-100);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius--2xl);
  background-color: var(--color--white);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--_from) 35%, var(--color--white)),
    color-mix(in oklab, var(--_to) 35%, var(--color--white)));
}
.bc-box[data-tint='yellow-blue']  { --_from: var(--color--yellow-100); --_to: var(--color--blue-100); }
.bc-box[data-tint='blue-green']   { --_from: var(--color--blue-100);   --_to: var(--color--green-100); }
.bc-box[data-tint='pink-purple']  { --_from: var(--color--pink-100);   --_to: var(--color--purple-100); }
.bc-box[data-tint='yellow-pink']  { --_from: var(--color--yellow-100); --_to: var(--color--pink-100); }
.bc-box__body { position: relative; z-index: 3; padding: 11% 11% 0; }
.bc-box__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--kern-heading);
  color: var(--color--grey-1000);
}
.bc-box__text {
  margin-top: var(--sp-8);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

/* ---- The phone (CSS mockup) ---- */
.bc-phone {
  --screen-r: calc(var(--radius--2xl) - var(--sp-4));
  position: relative;
  z-index: 1;
  padding: var(--sp-4);
  border-radius: var(--radius--2xl);
  background: var(--color--grey-1000);
  box-shadow: 0 0 0 0.12rem var(--color--grey-200), var(--shadow--card-large);
}
.bc-phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.2rem;
  padding-inline: 1.5rem 1.3rem;
  border-radius: var(--screen-r) var(--screen-r) 0 0;
  background: var(--color--white);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--color--grey-1000);
}
.bc-phone__bar svg { width: 2.6rem; height: auto; }
/* The bar takes the screenshot's own top colour: white, or the app's #f7f7f7. */
.bc-phone--grey .bc-phone__bar { background: #f7f7f7; }
.bc-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--screen-r) var(--screen-r);
  background: var(--color--white);
}
.bc-phone__screen video,
.bc-phone__screen img { display: block; width: 100%; height: auto; }
.bc-box .bc-phone { position: absolute; }

/* A real UI crop shown whole, as a card. */
.bc-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3.6% / calc(3.6% * var(--ar, 1));
  background: var(--color--white);
  box-shadow: var(--shadow--card);
}

/* ---- Two boxes, ≈58 / 42 ---- */
.bc-duo {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--sp-20);
  margin-top: var(--sp-40);
}
.bc-duo--flip { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.bc-duo--flip .bc-duo__wide { order: 2; }
/* Matched to the Universities page's current pair (user, 2026-10-06: "전공
   수업에서 쓰는 영어와 같이 목업 사이즈랑 박스 크기 맞춰줘"): a landscape wide box
   (700 / 512, ≈ 490px tall at 1440), text left, a 13.6rem phone on the right
   showing only its upper part (--cut = share of the screen in view). */
.bc-duo__wide { aspect-ratio: 700 / 512; }
.bc-duo__narrow { display: flex; flex-direction: column; contain: size; }
/* One inset for the pair: 11% of the narrower box = 7.97% of the wider; the
   text keeps clear of the phone. */
.bc-duo__wide .bc-box__body { padding: 7.97% calc(7.97% + 13.6rem + var(--sp-16)) 0 7.97%; }
.bc-duo__phone {
  --cut: 0.59;
  width: 13.6rem;
  right: 7.97%;
  bottom: calc(-1 * ((1 - var(--cut)) * (13.6rem - 0.8rem) * 2.1668 + 0.4rem));
}
.bc-duo__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11%;
}
.bc-duo__stage .bc-card { width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; }

/* The roadmap chapter's wide box holds a desktop screen, not a phone: full
   text width, the screen under it running off the right and the foot.
   Responsive fix (user, 2026-10-06, at ~1000px the line ran into the screen):
   the screen and the narrow box's phone sit in the flow, a fixed gap under
   the text, never at a % of the box, so longer wrapped text pushes them down
   instead of under them; the box clips what runs past its edges. */
.bc-duo__wide--shot { display: flex; flex-direction: column; }
.bc-duo__wide--shot .bc-box__body { padding-right: 7.97%; }
.bz-shot { position: relative; flex: none; width: 135%; margin: var(--sp-24) 0 0 7.97%; z-index: 1; }
.bz-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius--l) 0 0 0;
  box-shadow: 0 0 0 1px var(--color--grey-100), var(--shadow--card-large);
}

/* The staff-app phone in the narrow box: the same 13.6rem mockup, centred
   under the text, its upper part in view. */
.bz-stage--phone { display: block; padding: 0; overflow: hidden; }
.bc-box .bz-narrow-phone {
  --cut: 0.5;
  position: relative;
  width: 13.6rem;
  margin: var(--sp-24) auto 0;
}

/* Between the stacked layout and a full desktop row (961–1366px) the 700 / 512
   row was too short: the narrow box's card shrank to a thumbnail and the
   roadmap phone and screen showed only a sliver (user, 2026-10-06). Here the
   row grows taller, the phones start beside the title (top, not cut from the
   foot) and the card stage gives up some of its inset. */
@media (min-width: 961px) and (max-width: 1180px) {
  /* 700 / 640 with a phone 40% of the box wide: the phone (≈ 0.87 of the box
     width tall) always runs past the foot from 9% down. */
  .bc-duo__wide { aspect-ratio: 700 / 640; }
  .bc-duo__phone { width: 40%; top: 9%; bottom: auto; }
  .bc-duo__wide .bc-box__body { padding-right: calc(7.97% + 40% + var(--sp-16)); }
  .bc-duo__wide--shot .bc-box__body { padding-right: 7.97%; }
  .bc-box .bz-narrow-phone { width: 12rem; }
  .bc-duo__stage { padding: var(--sp-24) 8% 8%; }
}
@media (min-width: 1181px) and (max-width: 1366px) {
  .bc-duo__wide { aspect-ratio: 700 / 600; }
  .bc-duo__phone { top: 11%; bottom: auto; }
  .bc-duo__stage { padding: var(--sp-24) 9% 9%; }
}

/* ---- Tablet / phone: one column of 30rem boxes ---- */
@media (max-width: 960px) {
  .bc-head { max-width: 30rem; margin-inline: auto; }
  .bc-duo,
  .bc-duo--flip { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .bc-duo__wide,
  .bc-duo__narrow { width: 100%; max-width: 30rem; margin-inline: auto; aspect-ratio: auto; }
  .bc-duo--flip .bc-duo__wide { order: 0; }
  .bc-duo__wide { display: flex; flex-direction: column; }
  .bc-duo__narrow { contain: none; }
  .bc-duo__wide .bc-box__body { order: 0; padding: 11% 11% 0; }
  /* Stacked: the phone under the text, its upper part only, cut at the same
     screen share as on desktop (the Universities page's stacked pair). */
  .bc-box .bc-phone,
  .bc-box .bz-narrow-phone {
    position: relative;
    left: auto; top: auto; right: auto; bottom: auto;
    transform: none;
    width: 12.6rem;
    order: 2;
    margin: var(--sp-16) auto calc(-1 * ((1 - var(--cut)) * (12.6rem - 0.8rem) * 2.1668 + 0.4rem));
  }
  .bc-duo__stage .bc-card { width: 88%; max-width: none; max-height: none; }
  .bz-shot { width: 150%; height: 17rem; overflow: hidden; margin: var(--sp-24) 0 0 11%; order: 2; }
}

/* §4.1.2 Hangul */
:lang(ko) .bc-head__title,
:lang(ko) .bc-box__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .bc-head__line,
:lang(ko) .bc-box__text { line-height: var(--lh-ko-body); word-break: keep-all; }