/* Big Idea — Text & Images / Images & Text */

.cb-bigidea {
  box-sizing: border-box;
  background: var(--bigidea-bg, #fff);
  color: var(--bigidea-body, #374151);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
  overflow: visible;
}

.cb-bigidea *,
.cb-bigidea *::before,
.cb-bigidea *::after {
  box-sizing: inherit;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.cb-bigidea__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 90rem;
  margin: 0 auto;
}

.cb-bigidea--reversed .cb-bigidea__inner {
  grid-template-columns: 1.5fr 1fr;
  direction: rtl;
}

.cb-bigidea--reversed .cb-bigidea__inner > * {
  direction: ltr;
}

/* ==========================================================================
   Text column
   ========================================================================== */

.cb-bigidea__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cb-bigidea__headline {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--bigidea-headline, #111);
  margin: 0;
}

.cb-bigidea__body {
  font-size: var(--bigidea-body-size, 16px);
  line-height: 1.65;
  color: var(--bigidea-body, #374151);
  margin: 0;
}

.cb-bigidea__footnote {
  font-size: 0.8rem;
  color: var(--bigidea-footnote, #6B7280);
  margin: 0.5rem 0 0;
}

.cb-bigidea__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bigidea-cta, #c1272d);
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin-top: 0.25rem;
}

.cb-bigidea__cta:hover {
  opacity: 0.75;
}

/* ==========================================================================
   Image composition column — two-card overlap
   ========================================================================== */

.cb-bigidea__composition {
  position: relative;
  height: min(520px, 48vh);
  overflow: visible;
}

.cb-bigidea__card {
  position: absolute;
  border-radius: var(--bigidea-card-radius, 16px);
  overflow: hidden;
  will-change: transform, opacity;
}

/* Shadow variants */
.cb-bigidea--shadow-none .cb-bigidea__card   { box-shadow: none; }
.cb-bigidea--shadow-small .cb-bigidea__card  { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.cb-bigidea--shadow-medium .cb-bigidea__card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
.cb-bigidea--shadow-large .cb-bigidea__card  { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22); }

/*
  Two-card composition: the larger background card on the left, slightly
  smaller foreground card on the right, offset down so their outlines
  reveal each other instead of stacking flush. Authors are capped at two
  cards in the CP — the card--3 rules that used to live here were removed
  because three-card overlaps composed poorly.
*/
.cb-bigidea__card--1 {
  width: 72%;
  top: 0;
  left: 0;
  z-index: 2;
}

.cb-bigidea__card--2 {
  width: 60%;
  top: 5%;
  right: 0;
  z-index: 3;
}

/* Card inner */
.cb-bigidea__card-inner {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.5rem;
  position: relative;
}

.cb-bigidea__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/*
  Dark-blue preset used for mock-UI cards (no image / skeleton selected).
  Real-media cards override padding + background inline in the template so
  the image or skeleton fills the card edge-to-edge.
*/
.cb-bigidea__card--dark-blue .cb-bigidea__card-inner {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5986 100%);
  color: #fff;
}

/* Card label — block-level `cardLabelColor` override via CSS var */
.cb-bigidea__card-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: auto;
  position: relative;
  z-index: 1;
  color: var(--bigidea-card-label, inherit);
}

/* ==========================================================================
   Mock UI elements (shown when no image is provided)
   ========================================================================== */

.cb-bigidea__mock-bar {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.cb-bigidea__mock-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  opacity: 0.6;
  background: currentColor;
}

.cb-bigidea__card--dark-blue .cb-bigidea__mock-dot:nth-child(1) { background: #ef4444; }
.cb-bigidea__card--dark-blue .cb-bigidea__mock-dot:nth-child(2) { background: #f59e0b; }
.cb-bigidea__card--dark-blue .cb-bigidea__mock-dot:nth-child(3) { background: #22c55e; }

.cb-bigidea__mock-line {
  height: 0.5rem;
  border-radius: 0.25rem;
  opacity: 0.2;
  background: currentColor;
  margin-bottom: 0.35rem;
}

.cb-bigidea__mock-block {
  flex: 1;
  border-radius: 0.5rem;
  opacity: 0.12;
  background: currentColor;
}

/* ==========================================================================
   Text entrance — hidden initial states (CSS-driven, for fly-in mode)
   ========================================================================== */

.cb-bigidea:not(.cb-bigidea--visible):not(.cb-bigidea--scrub) .cb-bigidea__headline,
.cb-bigidea:not(.cb-bigidea--visible):not(.cb-bigidea--scrub) .cb-bigidea__body,
.cb-bigidea:not(.cb-bigidea--visible):not(.cb-bigidea--scrub) .cb-bigidea__footnote,
.cb-bigidea:not(.cb-bigidea--visible):not(.cb-bigidea--scrub) .cb-bigidea__cta {
  opacity: 0;
  transform: translateY(1.5rem);
}

/* ==========================================================================
   Text entrance — visible states (CSS-driven, for fly-in mode)
   ========================================================================== */

.cb-bigidea.cb-bigidea--visible:not(.cb-bigidea--scrub) .cb-bigidea__headline {
  transition:
    opacity   0.7s ease                             0.15s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  opacity: 1;
  transform: none;
}

.cb-bigidea.cb-bigidea--visible:not(.cb-bigidea--scrub) .cb-bigidea__body {
  transition:
    opacity   0.7s ease                             0.3s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  opacity: 1;
  transform: none;
}

.cb-bigidea.cb-bigidea--visible:not(.cb-bigidea--scrub) .cb-bigidea__footnote {
  transition:
    opacity   0.7s ease                             0.45s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  opacity: 1;
  transform: none;
}

.cb-bigidea.cb-bigidea--visible:not(.cb-bigidea--scrub) .cb-bigidea__cta {
  transition:
    opacity   0.7s ease                             0.55s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cb-bigidea .cb-bigidea__headline,
  .cb-bigidea .cb-bigidea__body,
  .cb-bigidea .cb-bigidea__footnote,
  .cb-bigidea .cb-bigidea__cta,
  .cb-bigidea .cb-bigidea__card {
    transition: none !important;
    opacity:    1    !important;
    transform:  none !important;
  }
}

/* ==========================================================================
   Responsive — stacked on narrow screens
   ========================================================================== */

@media (max-width: 52rem) {
  .cb-bigidea__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cb-bigidea--reversed .cb-bigidea__inner {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .cb-bigidea__composition {
    height: min(400px, 44vh);
  }
}

@media (max-width: 30rem) {
  .cb-bigidea__composition {
    height: min(300px, 40vh);
  }
}