/* ===== Showcase / closing CTA =====
   Editorial composition: rotating badge top left, a hairline index rule
   below it, two offset image panels through the middle, a right-aligned
   display CTA, and cacti bleeding off the bottom edge in front of it all.

   Everything is absolutely positioned in percentages of the section box, so
   the composition holds its proportions as the viewport changes rather than
   drifting apart. */

.showcase {
  position: relative;
  /* Tall enough to hold the cacti at their natural aspect (roughly 1.96:1,
     so ~51vw of height at full width) without cropping them. */
  min-height: max(100vh, 56vw);
  background: var(--cream);
  border-bottom: 1px solid #646241;
 border-top: 1px solid #646241;
  overflow: hidden;
}

/* --- Rotating badge --- */

.showcase__badge {
  position: absolute;
  top: 13%;
  left: 4.5%;
  width: clamp(96px, 9vw, 160px);
  aspect-ratio: 1;
  z-index: 5;
}

.showcase__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: showcase-spin 26s linear infinite;
}

.showcase__ring text {
  font-family: var(--font-body);
  font-size: 8.2px;
  letter-spacing: 2.15px;
  text-transform: uppercase;
  fill: var(--brown-dark);
}

@keyframes showcase-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__ring { animation: none; }
}

/* The letter sits still while the words turn around it. */
.showcase__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1;
  color: var(--brown-dark);
}

/* --- Index rule and number --- */

.showcase__index {
  position: absolute;
  top: 34%;
  left: 8.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  z-index: 5;
}

.showcase__index::before {
  content: '';
  width: 1px;
  height: clamp(70px, 12vh, 130px);
  background: rgba(18, 46, 51, 0.45);
}

.showcase__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--brown-text);
}

/* --- Image panels ---
   Two portrait panels of equal height, the right one raised, so the pair
   reads as one stepped block rather than a row. */

.showcase__panel {
  position: absolute;
  overflow: hidden;
  margin: 0;
  z-index: 1;
}

.showcase__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase__panel--a {
  left: 22.4%;
  top: 21%;
  width: 28%;
  height: 63%;
}

.showcase__panel--b {
  left: 51.5%;
  top: 15%;
  width: 27%;
  height: 63%;
}

/* --- Cacti ---
   One transparent PNG carrying both corner clusters, pinned to the bottom
   and allowed to run past the edge so it crops rather than floats. */

.showcase__foliage {
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Natural aspect, uncropped, sitting on the bottom edge. The section's
     min-height above reserves the room this needs. */
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

/* ===== Small screens ===== */

@media (max-width: 860px) {
  .showcase {
    min-height: 0;
    padding: 14vh 0 30vh;
  }

  .showcase__badge {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 6vh calc(var(--gap) * 3);
  }

  .showcase__index { display: none; }

  .showcase__panel {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - var(--gap) * 6);
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0 auto 3vh;
  }

  .showcase__foliage { width: 150%; left: 50%; transform: translateX(-50%); }
}