/* ============================================================
   Craft Boys — homepage sections, group D
   cb-blog · cb-financing · cb-academy · cb-guide
   Shared primitives: assets/css/sections/_base.css
   Tokens: assets/css/craftboys.css (:root --cb-*)
   Desktop-first; multi-column layouts stack under 1024px.
   ============================================================ */

/* ── 1. From our blog (cb-blog) ────────────────────────────── */

.cb-blog__heading {
  max-width: 680px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.cb-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.cb-blog__card {
  display: flex;
  flex-direction: column;
  background: var(--cb-white);
  border-radius: 16px;
  padding: 0; /* full-bleed photo, no inset frame */
  overflow: hidden; /* clip the edge-to-edge photo to the 16px card corners */
  box-shadow: 0 12px 28px rgba(20, 20, 20, .06);
}
.cb-blog__media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0; /* full-bleed; the card's overflow:hidden rounds the top corners to 16px */
  overflow: hidden;
  background: #E3E7E8;
}
.cb-blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.cb-blog__card:hover .cb-blog__media img { transform: scale(1.03); }
.cb-blog__media .cb-imgph { height: 100%; min-height: 0; border-radius: 0; }
.cb-blog__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 20px 24px 26px; /* restore ~24px side inset lost when the 10px card frame was removed */
}
.cb-blog__date {
  font: 400 14px/1 var(--font-ui);
  color: #5A6A72;
}
.cb-blog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400; /* regular per Figma */
  font-size: 21px;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cb-ink);
}
.cb-blog__title a { color: inherit; text-decoration: none; }
.cb-blog__title a:hover { color: var(--cb-yellow-2); }
.cb-blog__excerpt {
  margin: 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--cb-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb-blog__read { margin-top: auto; padding-top: 8px; font-size: 18px; }

/* ── 2. Financing / GreenSky (cb-financing) ────────────────── */

.cb-financing { --cb-fin-green: #207D22; } /* GreenSky brand green (sampled from the design) */
.cb-financing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 552px);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.cb-financing__intro .cb-h2 { max-width: 600px; }
.cb-financing__para { margin-bottom: 16px; }
.cb-financing__cta { margin-top: 18px; }

.cb-financing__card {
  background: var(--cb-white);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(20, 20, 20, .10);
  padding: clamp(24px, 2.8vw, 40px);
}
.cb-financing__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cb-financing__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cb-ink);
}
.cb-financing__logo {
  max-height: 34px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.cb-financing__logo-text {
  font: 800 22px/1 var(--font-ui);
  color: var(--cb-fin-green);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.cb-financing__card-sub {
  margin: 8px 0 6px;
  font: 400 14px/1.5 var(--font-ui);
  color: #5A6A72;
}
.cb-financing__list { list-style: none; margin: 0; padding: 0; }
.cb-financing__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 20, 20, .08);
  font: 400 15px/1.55 var(--font-body);
  color: var(--cb-body);
}
.cb-financing__list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.cb-financing__check { color: var(--cb-fin-green); flex: 0 0 auto; margin-top: 2px; }
.cb-financing__check svg { display: block; }

/* ── 3. Deck Academy (cb-academy) ──────────────────────────── */

/* Academy sits on the LIGHTER panel tone (#23343D) so it reads as a separate
   block next to the darker guide/footer band (#1C272E) — per the design. */
.cb-academy.cb-section--dark { background: #23343D; }

.cb-academy__grid {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
}
.cb-academy__content {
  /* Left edge lines up with .cb-container's inner edge:
     50vw − (1344px/2) + 24px padding = 50vw − 648px. */
  padding: clamp(56px, 7vw, 104px) clamp(32px, 4.5vw, 80px)
           clamp(56px, 7vw, 104px) max(24px, calc(50vw - 648px));
}
.cb-academy__content .cb-h2 { max-width: 520px; }
.cb-academy__cta { margin-top: 22px; }
.cb-academy__divider {
  border: 0;
  border-top: 1px solid var(--cb-line);
  margin: clamp(30px, 3.4vw, 48px) 0;
}
.cb-academy__stats {
  display: flex;
  flex-wrap: nowrap; /* both stats stay on ONE line; only their text wraps */
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.cb-academy__stat { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cb-academy__stat-side { min-width: 0; }
.cb-academy__stat-note,
.cb-academy__stat-line1,
.cb-academy__stat-line2 { max-width: 260px; }
.cb-academy__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 3.6vw, 54px);
  line-height: 1;
  color: var(--cb-white);
}
.cb-academy__stat-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cb-academy__stars { display: flex; gap: 4px; color: var(--cb-yellow); }
.cb-academy__stars svg { display: block; width: 20px; height: 20px; }
.cb-academy__stat-note,
.cb-academy__stat-line1 { font: 600 15px/1.4 var(--font-ui); color: var(--cb-white); }
.cb-academy__stat-line2 {
  font: 700 15px/1.4 var(--font-ui);
  color: var(--cb-white);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cb-academy__media { position: relative; min-height: 520px; overflow: hidden; }
.cb-academy__media img,
.cb-academy__media .cb-imgph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  min-height: 0;
}
/* Enlarge the desktop photo, biased left, so the banner on the right edge of
   the source image is cropped out of view (the ::before gradient is a separate
   layer and is not scaled). */
.cb-academy__media img { transform: scale(1.3); transform-origin: 4% center; }
/* Figma: the photo melts into the section background on its left edge */
.cb-academy__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #23343D 0%, rgba(35, 52, 61, .35) 18%, rgba(35, 52, 61, 0) 42%);
  pointer-events: none;
}
/* Stats separated by a thin vertical divider, like the mock */
.cb-academy__stat + .cb-academy__stat {
  border-left: 1px solid var(--cb-line);
  padding-left: clamp(28px, 4vw, 64px);
}

/* ── About-page academy variant: muted #E1E4E6 band, video card LEFT, content
   RIGHT, horizontal stats row + Visit Deck Academy CTA (Figma). Shares the band
   with the "backed in writing" reasons grid below it (bg=cream = #E1E4E6). ── */
.cb-academy--split { background: #E1E4E6; }
.cb-academy--split .cb-academy__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.cb-academy--split .cb-academy__vid {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;              /* Figma video card 600×800 */
  background: var(--cb-dark-2);
}
.cb-academy--split .cb-academy__vid-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Inline player swapped in on play (self-hosted <video> or YouTube/Vimeo iframe) */
.cb-academy--split .cb-academy__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}
.cb-academy--split .cb-academy__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;          /* keeps .cb-play's hover scale intact */
}
/* content lives in the container grid — drop the bleed layout's edge padding */
.cb-academy--split .cb-academy__content { padding: 0; }
.cb-academy--split .cb-h2 { color: var(--cb-ink); }
.cb-academy--split .cb-academy__divider {
  border-top-color: rgba(20, 20, 20, .14);
  margin: clamp(28px, 3.4vw, 40px) 0;
}
.cb-academy--split .cb-academy__stats { gap: clamp(24px, 3vw, 40px); }
.cb-academy--split .cb-academy__stat + .cb-academy__stat { border-left: 0; padding-left: 0; }
.cb-academy--split .cb-academy__stat-value { font-size: 48px; font-weight: 400; color: var(--cb-ink); }
.cb-academy--split .cb-academy__stat-note,
.cb-academy--split .cb-academy__stat-line1,
.cb-academy--split .cb-academy__stat-line2 { font-size: 18px; color: var(--cb-ink); max-width: none; }
.cb-academy--split .cb-academy__cta { margin-top: clamp(28px, 3.4vw, 40px); }

@media (max-width: 900px) {
  .cb-academy--split .cb-academy__split { grid-template-columns: 1fr; gap: 32px; }
  .cb-academy--split .cb-academy__vid { aspect-ratio: 4 / 3; }
}

/* ── 4. Free guide / lead magnet (cb-guide) ────────────────── */

/* Darker band than the academy panel above it — per the design. */
.cb-guide.cb-section--dark { background: #1C272E; }

.cb-guide__card {
  background: var(--cb-white);
  border-radius: 16px; /* per design: the guide card keeps a soft 16px radius on all screens */
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 4.8vw, 88px);
  align-items: center;
}
.cb-guide__media { display: flex; justify-content: center; }
.cb-guide__media img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}
.cb-guide__media .cb-imgph {
  width: 100%;
  max-width: 340px;
  min-height: 380px;
  border-radius: var(--cb-radius);
}
.cb-guide__content .cb-h2 { max-width: 560px; }
.cb-guide__body {
  margin: 0 0 30px;
  font: 400 16px/1.65 var(--font-body);
  color: var(--cb-body);
  max-width: 62ch;
}
.cb-guide__form { position: relative; }
.cb-guide__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.cb-guide__input {
  width: 100%;
  background: #F0F0EE;
  color: var(--cb-ink);
  border: 1px solid rgba(20, 20, 20, .14);
  border-radius: var(--cb-radius);
  padding: 18px;
  font: 400 15px/1.2 var(--font-ui);
  transition: border-color .18s ease, background .18s ease;
}
.cb-guide__input::placeholder { color: #3A444A; opacity: 1; }
.cb-guide__input:focus {
  outline: none;
  border-color: var(--cb-yellow);
  background: var(--cb-white);
}
.cb-guide__submit { width: 100%; }
.cb-guide__msg { margin: 0 0 16px; font: 500 15px/1.5 var(--font-ui); }
.cb-guide__msg--ok { color: #207D22; }
.cb-guide__msg--err { color: #C43D2B; }

/* ── Stack under 1024px ────────────────────────────────────── */

@media (max-width: 1024px) {
  .cb-blog__grid { grid-template-columns: 1fr; }

  .cb-financing__grid { grid-template-columns: 1fr; gap: 36px; }
  .cb-financing__card { max-width: 640px; }

  .cb-academy__grid { grid-template-columns: 1fr; }
  .cb-academy__content { padding: clamp(40px, 6vw, 72px) 18px clamp(48px, 7vw, 72px); }
  /* Mobile design: photo FIRST, melting into the dark section at its BOTTOM
     edge (the desktop left-edge gradient flips direction). */
  .cb-academy__media { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  /* Mobile crops via the 4/5 box already — no desktop zoom needed. */
  .cb-academy__media img { transform: none; }
  .cb-academy__media::before {
    background: linear-gradient(0deg, #23343D 0%, rgba(35, 52, 61, .3) 22%, rgba(35, 52, 61, 0) 48%);
  }

  .cb-guide__card { grid-template-columns: 1fr; }
  .cb-guide__media { order: -1; }
  .cb-guide__media img,
  .cb-guide__media .cb-imgph { max-width: 300px; }
}

@media (max-width: 640px) {
  /* Blog — horizontal swipe carousel per the mobile design. */
  .cb-blog__grid {
    display: flex;
    gap: 14px;
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cb-blog__grid::-webkit-scrollbar { display: none; }
  .cb-blog__card { flex: 0 0 86%; scroll-snap-align: start; }
  .cb-blog__excerpt { -webkit-line-clamp: 2; }

  /* Financing per the mobile design: lender logo ABOVE the card title,
     full-width CTA (kept on mobile by the owner's call). */
  .cb-financing__card-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .cb-financing__cta { width: 100%; }

  /* Academy per the mobile Figma specs: 28px/500 heading, 18px body,
     40px light stat values bottom-aligned with 14px captions,
     rgba(255,255,255,.2) dividers, CTA full width. */
  .cb-academy .cb-h2 { font-weight: 500; }
  .cb-academy__content .cb-sub { font-size: 18px; }
  .cb-academy__cta { width: 100%; }
  .cb-academy__divider { border-top-color: rgba(255, 255, 255, .2); }
  .cb-academy__stats { flex-direction: column; align-items: stretch; gap: 24px; }
  .cb-academy__stat { align-items: flex-end; gap: 16px; }
  .cb-academy__stat-value { font-size: 40px; font-weight: 400; line-height: 1.05; }
  .cb-academy__stat-side { padding-bottom: 4px; gap: 4px; }
  .cb-academy__stars svg { width: 16px; height: 16px; }
  .cb-academy__stat-note,
  .cb-academy__stat-line1,
  .cb-academy__stat-line2 { max-width: none; font-size: 14px; }
  .cb-academy__stat + .cb-academy__stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 24px;
  }

  .cb-guide__row { grid-template-columns: 1fr; }
}