/* =============================================================
   Bookstacks and Stories — Events + Partners call-to-action
   -------------------------------------------------------------
   A single composite band, built to the supplied reference:

     ┌──────────────────────────────────────────────┐
     │ intro │ card │ card │ card │  [figure] │ CTA │  burgundy, 66%
     ├──────────────────────────────────────────────┤
     │ handshake · partner copy · button            │  cream,    34%
     └──────────────────────────────────────────────┘

   The figure (woman.png) is absolutely placed so it overlaps both
   bands. Reference proportion is 950:305 — held with aspect-ratio
   on desktop and released to natural height below 1100px.
   ============================================================= */

.ecta {
  --ecta-burgundy: #8D2634;
  --ecta-teal:     #173D3B;
  --ecta-cream:    #F5EBDD;
  --ecta-pad:      3.5%;

  padding-inline: var(--gutter);
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  background: var(--cream);
  overflow: hidden;              /* no horizontal page overflow */
}

.ecta__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  border-radius: var(--r-panel);
  overflow: hidden;
}

/* --- Top band: events ---------------------------------------- */
.ecta__events {
  position: relative;
  z-index: 1;
  background: var(--ecta-burgundy);
  padding: var(--ecta-pad);
  display: grid;
  grid-template-columns: 20.5fr repeat(3, 15fr) 18fr;
  gap: 16px;
  align-items: stretch;
}

/* Intro ------------------------------------------------------- */
.ecta__intro { align-self: center; padding-right: .5rem; }

.ecta__eyebrow {
  margin: 0 0 .6rem;
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ecta__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
}
.ecta__title .script {
  display: inline-block;
  font-size: .92em;
  color: var(--gold);
}
.ecta__copy {
  margin-top: .8rem;
  max-width: 26ch;
  font-size: clamp(14px, 1vw, 16px);
  color: rgba(255, 255, 255, .82);
}
.ecta__intro .btn { margin-top: 1.1rem; }

/* Event cards ------------------------------------------------- */
/* On desktop the wrapper dissolves so the three cards sit directly in
   the parent grid; on tablet it becomes the scrollable row. */
.ecta__cards { display: contents; }

.ecta__card {
  position: relative;
  align-self: center;
  height: 87%;
  min-height: 190px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.ecta__card:hover { transform: translateY(-4px); }

.ecta__card-link { display: block; height: 100%; }

.ecta__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.ecta__card:hover img { transform: scale(1.06); }

/* Dark bottom gradient keeps the white text readable. */
.ecta__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 10, 10, .10) 0%,
    rgba(20, 10, 10, .55) 52%,
    rgba(20, 10, 10, .90) 100%);
}

.ecta__date {
  position: absolute; z-index: 2;
  top: 10px; left: 10px;
  min-width: 46px;
  padding: .35rem .45rem;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ecta-burgundy);
  text-align: center;
  line-height: 1.05;
}
.ecta__date-label {
  display: block;
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.ecta__date-value {
  display: block;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 900;
}

.ecta__card-body {
  position: absolute; z-index: 2;
  inset: auto 0 0 0;
  padding: .9rem .85rem 1rem;
}
.ecta__card-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
}
.ecta__card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .5rem;
  font-size: 11px;
  color: rgba(255, 255, 255, .78);
}
.ecta__card-meta span { display: inline-flex; align-items: center; gap: .28rem; }
.ecta__card-meta svg { width: 12px; height: 12px; color: var(--gold); }

/* Community CTA ----------------------------------------------- */
.ecta__join {
  align-self: center;
  height: 88%;
  min-height: 190px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  padding: 1.2rem 1rem;
  border-radius: 12px;
  background: var(--ecta-teal);
  text-align: center;
}
.ecta__join-text {
  font-family: var(--font-script);
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.1;
  color: #fff;
}

/* --- The overlapping figure ---------------------------------- */
.ecta__figure {
  position: absolute;
  left: 70%;
  bottom: 0;
  z-index: 4;
  height: 460px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  transform: translateX(-50%);
}

/* --- Bottom band: partners ----------------------------------- */
.ecta__partners {
  position: relative;
  z-index: 2;
  background: var(--ecta-cream);
  padding: clamp(1.1rem, .8rem + 1vw, 1.8rem) var(--ecta-pad);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, .7rem + 1.4vw, 2.2rem);
}

.ecta__partner-icon {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--ecta-burgundy);
  color: #fff;
}
.ecta__partner-icon svg { width: 32px; height: 32px; }

.ecta__partner-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  color: var(--ink);
}
.ecta__partner-copy {
  margin-top: .35rem;
  max-width: 52ch;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--text-muted);
}

/* Room for the figure so it never lands on the partner button. */
.ecta__partner-action { padding-right: clamp(0px, 14vw, 210px); }

/* --- Decorative stars ---------------------------------------- */
.ecta .star {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: .75;
}
.ecta .star svg { width: 100%; height: 100%; }
.ecta__star--1 { top: 6%;  left: 17.5%; width: 16px; height: 16px; color: var(--gold); }
.ecta__star--2 { top: 20%; left: 21.5%; width: 11px; height: 11px; color: #fff; }
.ecta__star--3 { top: 60%; left: 19%;   width: 13px; height: 13px; color: var(--ecta-teal); }
.ecta__star--4 { bottom: 22%; left: 46%; width: 12px; height: 12px; color: var(--ecta-burgundy); }
.ecta__star--5 { bottom: 8%;  left: 33%; width: 15px; height: 15px; color: var(--gold); }
.ecta__star--6 { bottom: 26%; right: 6%; width: 13px; height: 13px; color: var(--ecta-burgundy); }

/* Buttons in this band sit at the reference's 46–50px height. */
.ecta .btn { min-height: 46px; }

/* --- Desktop proportion -------------------------------------- */
@media (min-width: 1100px) {
  .ecta__inner { aspect-ratio: 950 / 305; display: grid; grid-template-rows: 66% 34%; }
  .ecta__events,
  .ecta__partners { min-height: 0; }
}

/* --- Tablet --------------------------------------------------- */
@media (max-width: 1099px) {
  .ecta__events {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
  }

  /* Cards become a horizontally scrollable row. */
  .ecta__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 34%);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
  }
  .ecta__card { height: auto; min-height: 210px; scroll-snap-align: center; }

  .ecta__join {
    height: auto;
    max-width: 380px;
    /* Keep clear of the figure on the right. */
    margin-right: auto;
  }

  .ecta__figure { height: 370px; left: auto; right: 2%; transform: none; }
  .ecta__partner-action { padding-right: clamp(0px, 20vw, 200px); }
}

/* --- Mobile --------------------------------------------------- */
@media (max-width: 720px) {
  .ecta { padding-inline: var(--gutter); }
  .ecta__inner { border-radius: var(--r-lg); }

  .ecta__events { padding: 1.5rem 1.25rem; }
  .ecta__cards  { grid-auto-columns: 78%; }

  /* The figure joins the flow instead of overlapping anything. */
  .ecta__figure {
    position: static;
    display: block;
    height: auto;
    width: 250px;
    max-width: 70%;
    margin: .5rem auto -1px;
    transform: none;
  }

  .ecta__join { max-width: none; }

  .ecta__partners {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    gap: 1rem;
  }
  .ecta__partner-action { padding-right: 0; width: 100%; }
  .ecta__partner-action .btn,
  .ecta__intro .btn,
  .ecta__join .btn { width: 100%; justify-content: center; }

  /* Stars would collide with the stacked copy. */
  .ecta .star { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecta__card,
  .ecta__card img { transition: none; }
}