/* ============================================================
   Craft Boys — homepage group B sections (Figma design):
   1) .cb-ba      — Before / After comparison   (cb-before-after)
   2) .cb-about   — About + audio story player  (cb-about-audio)
   3) .cb-gallery — Works mosaic + stat tile    (cb-gallery)
   Shared primitives live in _base.css; tokens in craftboys.css.
   ============================================================ */

/* ── 1) Before / After (cb-before-after) ───────────────────── */

.cb-ba__head { text-align: center; }
.cb-ba__head .cb-h2 { max-width: 920px; margin-inline: auto; }
.cb-ba__head .cb-sub { margin-inline: auto; }

/* Full-bleed comparison viewport. ONE pair; --pos (set by the range input)
   drives BOTH the before-layer clip and the handle — pure paint/composite
   work, no layout, so the drag follows the pointer 1:1 with no jitter. */
.cb-ba__viewport {
  --pos: 50%;
  position: relative;
  margin-top: clamp(32px, 4.5vw, 64px);
  height: clamp(380px, 51vw, 740px);
  overflow: hidden;
  background: var(--cb-dark);
}

/* AFTER is the base layer, BEFORE is clipped on top. Both photos fill the
   viewport identically (inset:0 + cover), so the scene never shifts —
   only the reveal edge moves. */
.cb-ba__after,
.cb-ba__before {
  position: absolute;
  inset: 0;
}
.cb-ba__before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}
.cb-ba__after img,
.cb-ba__before img,
.cb-ba__after .cb-imgph,
.cb-ba__before .cb-imgph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Handle: vertical divider line + round grip with ⟷ arrows */
.cb-ba__handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  pointer-events: none;
  will-change: left;
}
.cb-ba__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: var(--cb-white);
  box-shadow: 0 0 10px rgba(0, 0, 0, .22);
}
.cb-ba__grip {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cb-white);
  color: var(--cb-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* The invisible range input IS the drag surface (mouse/touch/keyboard).
   pan-y keeps vertical page scrolling alive on touch; horizontal drags
   go to the slider. */
.cb-ba__range {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.cb-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; }
.cb-ba__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; background: transparent; }
.cb-ba__viewport:has(.cb-ba__range:focus-visible) .cb-ba__grip {
  outline: 3px solid var(--cb-yellow);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .cb-ba__viewport { height: clamp(320px, 54vw, 560px); }
}
@media (max-width: 760px) {
  .cb-ba__viewport { height: clamp(240px, 77vw, 420px); }
  .cb-ba__grip { width: 46px; height: 46px; }
  .cb-ba__handle::before { left: -1.5px; width: 3px; }
}

/* ── 2) About + audio story (cb-about-audio) ───────────────── */

.cb-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 45fr);
  gap: clamp(32px, 5.5vw, 90px);
  align-items: center;
}

/* Left: team photo + floating yellow badge */
.cb-about__media { position: relative; }
.cb-about__photo {
  display: block;
  width: 100%;
  height: clamp(360px, 46vw, 660px);
  object-fit: cover;
  border-radius: var(--cb-radius);
}
/* placeholder variant keeps _base.css flex centering */
.cb-about__photo.cb-imgph { display: flex; }
.cb-about__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(100% - 36px);
  padding: 22px 30px;
  background: var(--cb-yellow);
  /* Figma (Frame 90272): light plaque border + soft drop shadow */
  border: 3px solid #EBEBEB;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .25);
}
.cb-about__badge-logo {
  display: block;
  height: 104px;
  width: auto;
}
.cb-about__badge-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--cb-ink);
}
.cb-about__badge-label {
  display: block;
  margin-top: 7px;
  max-width: 120px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.35;
  color: var(--cb-ink);
}

/* Right: copy */
.cb-about__body p {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cb-body);
}
.cb-about__body { margin: 6px 0 30px; }
.cb-about__body p:last-child { margin-bottom: 0; }

/* Dark audio player bar */
.cb-about__player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 22px 15px 15px;
  background: var(--cb-dark);
  border-radius: 8px;
}
.cb-about__play {
  width: 44px;
  height: 44px;
  color: var(--cb-dark);
}
.cb-about__play svg { margin-left: 2px; }
.cb-about__play .cb-about__ico--pause { display: none; margin-left: 0; }
.cb-about.is-playing .cb-about__ico--play { display: none; }
.cb-about.is-playing .cb-about__ico--pause { display: block; }
.cb-about__play[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.cb-about__play[disabled]:hover {
  transform: none;
  background: var(--cb-yellow);
}
.cb-about__player.is-disabled .cb-about__ptrack { cursor: default; }

.cb-about__pbody { flex: 1; min-width: 0; }
.cb-about__plabel {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--cb-white);
}
.cb-about__prow {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Waveform-style progress: thin vertical bars via repeating gradients
   (two layers — tall + short bars — centered vertically). */
.cb-about__ptrack {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 8px) 0 50% / 100% 20px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 8px) 4px 50% / 100% 10px no-repeat;
}
.cb-about__pplayed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--cb-yellow) 0 2px, transparent 2px 8px) 0 50% / 100% 20px no-repeat,
    repeating-linear-gradient(90deg, var(--cb-yellow) 0 2px, transparent 2px 8px) 4px 50% / 100% 10px no-repeat;
}
.cb-about__ptime {
  min-width: 36px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .75);
}

/* "— THE CRAFT BOYS FAMILY" caption row */
.cb-about__caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5A6A72;
}
.cb-about__caption::before {
  content: '';
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: currentColor;
}

@media (max-width: 1024px) {
  .cb-about__grid { grid-template-columns: 1fr; }
  .cb-about__photo { height: auto; aspect-ratio: 1 / 1; }
  .cb-about__photo.cb-imgph { height: clamp(300px, 70vw, 480px); aspect-ratio: auto; }
  .cb-about__badge { gap: 14px; padding: 14px 20px 14px 16px; }
  .cb-about__badge-logo { height: 72px; }
  .cb-about__badge-num { font-size: 36px; }
  .cb-about__badge-label { font-size: 13px; max-width: 104px; }
}

@media (max-width: 640px) {
  /* Mobile design: taller portrait photo, compact badge */
  .cb-about__photo { aspect-ratio: 4 / 5; }
  .cb-about__badge { top: 14px; left: 14px; gap: 12px; padding: 12px 18px 12px 14px; }
  .cb-about__badge-logo { height: 60px; }
  .cb-about__badge-num { font-size: 30px; }
  .cb-about__badge-label { font-size: 12.5px; max-width: 96px; }
}

/* ── 3) Works mosaic gallery (cb-gallery) ──────────────────── */

.cb-gallery__head { text-align: center; }
.cb-gallery__head .cb-h2 { max-width: 920px; margin-inline: auto; }
.cb-gallery__head .cb-sub { margin-inline: auto; }

.cb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 15.5vw, 208px);
  grid-auto-flow: row dense;
  gap: 24px;
  margin-top: clamp(32px, 4.5vw, 64px);
}
.cb-gallery__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}
.cb-gallery__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-gallery__tile .cb-imgph {
  height: 100%;
  min-height: 0;
}

/* Tile-size cycle (like the design): with 6 photos + the stat card the
   pattern fills a 4×4 block with no holes and the stat lands bottom-right:
   [ s ][ s ][   tall  ]
   [  big   ][   tall  ]
   [  big   ][  wide   ]
   [  big   ][ s ][stat]                                        */
.cb-gallery__grid > :nth-child(6n+3) { grid-column: span 2; grid-row: span 2; } /* tall  */
.cb-gallery__grid > :nth-child(6n+4) { grid-column: span 2; grid-row: span 3; } /* big   */
.cb-gallery__grid > :nth-child(6n+5) { grid-column: span 2; }                   /* wide  */

/* Dark stat tile — always small, wherever it lands (after the pattern
   rules on purpose: same specificity, later wins). */
.cb-gallery__grid > .cb-gallery__stat { grid-column: span 1; grid-row: span 1; }
.cb-gallery__stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 16px;
  background: var(--cb-dark);
  text-decoration: none;
  transition: background .18s ease;
}
/* Figma: a background project photo under a flat 80% dark overlay. */
.cb-gallery__stat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cb-gallery__stat--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 39, 46, .8), rgba(28, 39, 46, .8));
  z-index: 1;
}
a.cb-gallery__stat:hover { background: var(--cb-dark-2); }
.cb-gallery__stat-value {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300; /* Oswald Light per Figma */
  font-size: 80px;
  line-height: 96px;
  color: var(--cb-white);
}
.cb-gallery__stat-label {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-family: 'Roboto Condensed', var(--font-ui);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--cb-white);
}
.cb-gallery__stat-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  color: var(--cb-yellow);
  transition: transform .18s ease;
}
a.cb-gallery__stat:hover .cb-gallery__stat-arrow { transform: translate(3px, -3px); }

@media (max-width: 1024px) {
  /* Simple 2-column stacking: pattern tiles just go full width, 1 row */
  .cb-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, 36vw);
    gap: 16px;
  }
  .cb-gallery__grid > :nth-child(6n+3),
  .cb-gallery__grid > :nth-child(6n+4),
  .cb-gallery__grid > :nth-child(6n+5) { grid-column: span 2; grid-row: span 1; }
  .cb-gallery__grid > .cb-gallery__stat { grid-column: span 1; grid-row: span 1; }
  /* 80px desktop value would overflow the half-width tablet tile */
  .cb-gallery__stat-value { font-size: 56px; line-height: 1.1; }
}

@media (max-width: 640px) {
  /* Mobile design pattern: photo1 wide, photo2 wide, [photo3 | 240+ tile],
     then the rest continues as [4|5], 6 wide (all 6 photos stay visible).
     `order` pulls the stat tile up next to photo 3. */
  .cb-gallery__grid {
    grid-auto-rows: 41vw;
    gap: 14px;
  }
  /* Same specificity as the ≤1024 pattern rules, later in the file → wins.
     DOM order is kept (photos 1-6, stat tile last): wide, wide, [3|4],
     [5|stat] (dense pulls the tile next to photo 5), 6 wide. */
  .cb-gallery__grid > :nth-child(3),
  .cb-gallery__grid > :nth-child(4),
  .cb-gallery__grid > :nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .cb-gallery__grid > :nth-child(1),
  .cb-gallery__grid > :nth-child(2),
  .cb-gallery__grid > :nth-child(6) { grid-column: span 2; grid-row: span 2; }
  .cb-gallery__grid > .cb-gallery__stat { grid-column: span 1; grid-row: span 1; }
  .cb-gallery__stat-value { font-size: 34px; line-height: 1.1; }
  .cb-gallery__stat-label { font-size: 13.5px; line-height: 1.3; }
  .cb-gallery__stat { padding: 16px 18px; }
  .cb-gallery__stat-arrow { top: 14px; right: 14px; }
}