/* ============================================================================
   sections/cta.css — The conversion band, in Royal Bengal
   ----------------------------------------------------------------------------
   This is the moment we actually ask for the conversation, so it is the one
   place the ROYAL BENGAL damask appears at full strength: a medallion whose
   petals are tiger-stripe brush blades, set in terracotta-temple geometry.
   Used once, on the ask. Used everywhere, it would be wallpaper.
   ========================================================================== */

.cta-band {
  position: relative;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(201,162,75,.14), transparent 60%),
    linear-gradient(180deg, var(--indigo-800), var(--indigo-950));
  border-block: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* The damask ground. Pooled in the centre and dissolved well before the edges
   so the band has a lit heart rather than a tiled surface. */
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: url("../../img/patterns/royal-bengal-gold.svg") center / 140px repeat;
  /* quieted so the rickshaw engraving is the band's single artifact */
  opacity: .08;
  -webkit-mask-image: radial-gradient(75% 90% at 50% 50%, #000 10%, rgba(0,0,0,.45) 55%, transparent 85%);
          mask-image: radial-gradient(75% 90% at 50% 50%, #000 10%, rgba(0,0,0,.45) 55%, transparent 85%);
  /* The ground drifts, very slowly. Nothing in this house is quite still. */
  animation: damask-drift 90s linear infinite;
  will-change: background-position;
}
/* Exactly one tile (140px) on each axis — the loop cannot be seen. */
@keyframes damask-drift {
  from { background-position: 0 0; }
  to   { background-position: 140px 140px; }
}
@media (prefers-reduced-motion: reduce) { .cta-band::after { animation: none; } }

.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { max-width: 20ch; margin: 0 auto var(--space-5); }
.cta-band .cta-actions {
  display: flex; gap: var(--space-3); justify-content: center;
  flex-wrap: wrap; margin-bottom: var(--space-5);
}
.cta-band .market-row { justify-content: center; }

/* Faint filigree frame inside the band. */
.cta-band::before {
  content: ""; position: absolute; inset: clamp(1rem, 3vw, 2rem);
  border: 1.35px solid var(--line); border-radius: var(--radius-lg); pointer-events: none;
  -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%);
}


/* ===== Trade facts ledger ==============================================
   The five answers a Gulf buyer checks before writing, set as a hairline
   ledger under the CTAs. Rendered by main.js; hidden until facts exist. */
.trade-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; margin: 1.9rem auto 1.4rem; max-width: 980px;
}
.trade-facts .fact {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .35rem clamp(1rem, 2.6vw, 2.2rem);
  text-align: center;
}
.trade-facts .fact + .fact { border-left: 1px solid rgba(200,162,74,.25); }
.trade-facts .fact-t {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 600;
}
.trade-facts .fact-v { font-family: var(--font-serif); font-size: .98rem; color: var(--gold-100); }
@media (max-width: 700px) {
  .trade-facts { flex-direction: column; gap: .7rem; }
  .trade-facts .fact + .fact { border-left: 0; border-top: 1px solid rgba(200,162,74,.18); padding-top: .9rem; }
}

/* ===== The rickshaw's cleared stage =====================================
   The last mile gets its own ground beneath the conversation - the band's
   extra bottom padding is the rickshaw's street. Do not fill it. */
#cta { padding-bottom: clamp(10rem, 18vw, 15rem); }
@media (max-width: 760px) { #cta { padding-bottom: var(--section-pad); } }

/* ===== The rickshaw lamp (ART-VISION #9, adapted for raster art) ========
   Hovering the gold CTA warms the rickshaw's presence - the lamp lights
   for a boarding passenger. Opacity only, driven through --acc-op so the
   accent's own transition carries it. */
.cta-band:has(.cta-actions .btn--gold:hover) .side-accent.is-in {
  opacity: calc(var(--acc-op, .3) * 1.35);
}