/* ==========================================================================
   Calendly v2 (draft) — sections unique to this page's redesign.

   Reuses tokens.css/base.css/chrome.css/case-study.css/lightbox.css as-is:
   header, hero, at-a-glance/editorial row, context-single and
   made-this-work/principles are all shared markup+classes from case-study.css.
   This file only covers the new "work-section" narrative stream, which has
   no equivalent on the other 4 case studies, plus the v2 hero illustration.
   ========================================================================== */

/* ---- Hero illustration ---- */
/* Same 651x789 frame ratio as the v1 Calendly hero asset -- see
   .calendly-hero-image in case-study.css. New artwork, same shape. */
.calendly2-hero-image {
  background: var(--bg) url("../assets/calendly2-hero-canvas.webp") center / cover no-repeat;
  --hero-ratio: 1302 / 1578;
  aspect-ratio: var(--hero-ratio);
}

/* ---- Work section ---- */
.work-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 60px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* Rhythm requested for this page: 120px between every section from
   "Product Inception" (the work-section's first stream) down to Results. */
.work-section + .admin-center-section,
.admin-center-section + .results { margin-top: 120px; }

.work-stream-head h3,
.admin-center-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  margin: 10px 0 12px;
}

.work-stream-head p,
.admin-center-head p {
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 0 12px;
}

.work-shots {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.work-shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.work-shots--3 img { flex: 1; min-width: 0; }

.work-shots--wide { max-width: 900px; margin-inline: auto; }

/* Mapping stream ships as a carousel in Figma (2 chevrons under the 3
   screenshots), not a static row -- reuses carousel.css's shipped-image/
   carousel-arrow/pager machinery from js/main.js, just scoped to this
   section's width instead of carousel-full's full-bleed. */
.work-carousel { margin-top: 24px; }
.work-carousel .shipped-image { margin-top: 0; padding: 32px 16px; }

/* Side-by-side stream: copy and one screenshot in a row, alternating which
   side the image sits on. --reverse flips the row so the image leads. */
.work-stream--side {
  display: flex;
  align-items: center;
  gap: 48px;
}

.work-stream--side .work-stream-head { flex: 1; }
.work-stream--side .work-shots { flex: 1; margin-top: 0; }

.work-stream--reverse { flex-direction: row-reverse; }

@media (max-width: 900px) {
  .work-section { gap: 48px; padding: 40px var(--gutter) 0; }
  .work-shots--3 { flex-direction: column; }
  .work-stream--side,
  .work-stream--reverse { flex-direction: column; }
}

/* ---- Impact band ----
   Figma node 507:93904: a light 3-row list (not the other pages' dark
   3-column .impact-grid), bookended by a thin tile of the same iso-grid
   pattern context-single paints behind its card. */
.impact-band {
  max-width: var(--content-width);
  margin: 0 auto;
  margin-top: 80px;
  border: 1px solid var(--border);
}
.impact-band-head {
  padding: 32px;
  border-bottom: 1px solid var(--border);
}
.impact-band-head .section-label { color: var(--accent); }
.impact-band-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  color: var(--text-body);
  margin: 8px 0 12px;
}
.impact-band-head p {
  color: var(--text-body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 509px;
  margin: 0;
}
.impact-band-hatch {
  background: var(--paper) url("../assets/iso-grid.webp") repeat;
  background-size: 312px 180px;
}
.impact-band-hatch--top { height: 32px; border-bottom: 1px solid var(--border); }
.impact-band-hatch--bottom { height: 127px; border-top: 1px solid var(--border); }
.impact-band-row {
  display: flex;
  gap: 32px;
  padding: 32px;
  border-bottom: 1px solid var(--stage-border);
}
.impact-band-title {
  flex: 0 0 300px;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--text-body);
}
.impact-band-title .num { margin-right: 8px; }
.impact-band-row p {
  flex: 1;
  max-width: 509px;
  margin: 0 auto;
  color: var(--text-body);
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .impact-band-row { flex-direction: column; gap: 12px; padding: 24px; }
  .impact-band-title { flex: none; }
  .impact-band-row p { max-width: none; margin: 0; }
  .impact-band-head { padding: 24px; }
}

/* ---- Admin Management Center ----
   Figma node 507:91990: unlike the other work streams, this one sits outside
   .work-section as its own centered section, with the MacBook mockup
   floating over a full-bleed dot grid (node 515:139959) instead of a plain
   background. The dot grid is reproduced as a CSS radial-gradient tile
   (18px pitch, matching the SVG export's circle spacing) rather than a
   shipped asset.

   Sampled the Figma export directly: each dot is a solid #3185FC 1px point
   with nothing but transparent between them, not a soft/heavy fill. A
   radial-gradient with a soft falloff (the first attempt) averages into a
   visible tinted panel at this tile size even though no single pixel is
   solid; a hard-edged 1px dot carries negligible ink and disappears into
   the page the way the design does. The dots also bleed full-bleed (the
   calc(50% - 50vw) pair) rather than stopping at the content width, so
   there's no rectangle edge for that averaging to show up against. */
.admin-center-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px var(--gutter);
}
.admin-center-head {
  padding: 32px;
  max-width: 760px;
}
.admin-center-dots {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
  background-size: 18px 18px;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.admin-center-dots img {
  display: block;
  max-width: 1150px;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .admin-center-section { padding: 40px var(--gutter); }
  .admin-center-head { padding: 0 0 24px; }
  .admin-center-dots { padding: 24px 0; }
}