/**
 * Section: Showcase ("Fresh from Graphique")
 *
 * Rose band with torn edges. Copy beside one feature photo that already
 * carries its own tape and logo; flowers and sparkles sit around it.
 * Mobile first: copy centred above the photo; side by side from 48rem.
 */

.showcase {
  background: var(--surface-rose);
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  clip-path: var(--torn-edge-mobile);
  overflow-x: clip;
}

.showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
}

.showcase-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
}

.showcase-copy p {
  max-width: 38ch;
  font-size: var(--text-lead);
}

.showcase-media {
  position: relative;
  width: min(100%, 32rem);
  justify-self: center;
}

.showcase-photo {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-flower-one {
  bottom: 6%;
  left: 28%;
  width: 13%;
  transform: rotate(-18deg);
}

.showcase-flower-two {
  top: 4%;
  right: 0;
  width: 12%;
  transform: rotate(15deg);
}

.showcase-sparkle-one {
  top: 38%;
  right: -2%;
  width: 5%;
  transform: rotate(12deg);
}

.showcase-sparkle-two {
  top: 16%;
  left: 4%;
  width: 3.5%;
  transform: rotate(-12deg);
}

@media (min-width: 48rem) {
  .showcase {
    clip-path: var(--torn);
  }

  .showcase-layout.has-image {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-l);
  }

  .showcase-layout.has-image .showcase-copy {
    align-items: flex-start;
    text-align: start;
  }
}