/* ==========================================================================
   you-vs-we.css — autonomy framing as a 2-row equal-cell grid.
   Markup: <div class="cw-bento">
            <article class="cw-card is-yours">
              <span class="cw-tag">Yours</span>
              <svg class="cw-icon">…</svg>
              <h3>Clients</h3>
              <p>…</p>
            </article>  × 3 (yours)
            <article class="cw-card is-ours" style="--cw-bg:url(...)">
              … × 2 (ours)
   Layout (desktop, 6-col grid):
     Yours each span 2 cols (3 × 2 = 6); Ours each span 3 cols (2 × 3 = 6).
   Yours: white card with brand-soft icon tile, top-left.
   Ours:  fitness photo bg + dark overlay, brand icon on translucent tile.
   ========================================================================== */

.cw-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-12);
}

.cw-card {
  position: relative;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-height: 220px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.cw-card:hover { transform: translateY(-2px); }

.cw-card.is-yours { grid-column: span 2; }
.cw-card.is-ours  { grid-column: span 3; }

/* ─── Icon tile (top-left, in-flow) ────────────────────────────────── */
.cw-icon {
  width: 56px;
  height: 56px;
  padding: var(--space-12);
  border-radius: var(--radius);
  flex-shrink: 0;
  pointer-events: none;
}
.cw-card.is-yours .cw-icon {
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.cw-card.is-ours .cw-icon {
  background: rgba(var(--white-rgb), .14);
  color: var(--brand);
  backdrop-filter: blur(8px);
}

/* ─── Card surfaces ────────────────────────────────────────────────── */
.cw-card.is-yours {
  background: var(--bg);
  border: 1px solid var(--line);
}
.cw-card.is-ours {
  background-color: var(--bg-dark);
  background-size: cover;
  background-position: center;
}
/* Dark overlay over the photo so text + brand-cyan icon stay legible */
.cw-card.is-ours::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-darker-rgb), .45) 0%, rgba(var(--bg-darker-rgb), .78) 100%);
  pointer-events: none;
  z-index: 0;
}
.cw-card.is-ours > * { position: relative; z-index: 1; }
/* Bottom row a bit taller than the top row, with scaled-up typography */
.cw-card.is-ours {
  min-height: 290px;
  padding: var(--space-28);
}
.cw-card.is-ours .cw-icon {
  width: 64px;
  height: 64px;
  padding: var(--space-14);
  border-radius: var(--radius-md);
}
.cw-card.is-ours h3 { font-size: var(--fs-metric-cta); line-height: var(--lh-display); }
.cw-card.is-ours p  { font-size: var(--fs-md); max-width: 44ch; }

/* ─── Card content ────────────────────────────────────────────────── */
/* Title is pushed to the bottom of the card; body sits below it */
.cw-card h3 {
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  margin: auto 0 0;
  color: var(--ink);
}
.cw-card p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin: 0;
  max-width: 36ch;
  /* Pin every body to exactly two visual lines, regardless of copy length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--lh-body) * 2em);
}
.cw-card.is-ours h3 { color: white; }
.cw-card.is-ours p  { color: rgba(var(--white-rgb), .78); }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cw-bento { grid-template-columns: repeat(2, 1fr); }
  .cw-card.is-yours,
  .cw-card.is-ours { grid-column: span 1; }
}

@media (max-width: 720px) {
  .cw-bento {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .cw-card.is-yours,
  .cw-card.is-ours { grid-column: auto; }
  .cw-card { min-height: 180px; padding: var(--space-20); }
  .cw-icon { width: 48px; height: 48px; padding: var(--space-10); border-radius: var(--radius-pill-sm); }
  .cw-card h3 { font-size: var(--fs-h4); }
  .cw-card p { font-size: var(--fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .cw-card { transition: none; }
  .cw-card:hover { transform: none; }
}