/* =========================================================
   Smith Visuals — NOROO Reels Showcase (Portfolio-Bereich)
   Gleiches Layout wie aat-showcase.css (Ordner-Spalte + grosses
   Medium mit Bildunterschrift), hier rechts ein Video statt Foto,
   da NOROO ein reines Reels-Projekt ist.
   ========================================================= */

.noroo-showcase {
  background: var(--c-white);
  padding-block: var(--space-8);
}

.noroo-showcase__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

@media (min-width: 60rem) {
  .noroo-showcase__inner {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--space-9);
  }
}

/* ---------- Ordner-Spalte ---------- */
.noroo-showcase__folder-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.noroo-showcase__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label-btn);
  letter-spacing: 0.03em;
  color: var(--c-accent);
  margin: 0;
}

.noroo-showcase__stagewrap {
  overflow: visible;
  width: 13rem;
}

.noroo-showcase__stagewrap .mw-stage {
  --mw-scale: 0.2575;
}

@media (min-width: 40rem) {
  .noroo-showcase__stagewrap { width: 17rem; }
  .noroo-showcase__stagewrap .mw-stage { --mw-scale: 0.3366; }
}

@media (min-width: 60rem) {
  .noroo-showcase__stagewrap { width: 22rem; }
  .noroo-showcase__stagewrap .mw-stage { --mw-scale: 0.4356; }
}

/* ---------- Medien-Spalte ---------- */
.noroo-showcase__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
}

/* Wrapper für YouTube-iframes — hält das 9:16 Seitenverhältnis */
.noroo-showcase__yt-wrap {
  position: relative;
  width: 100%;
  /* 9:16 = 177.77% padding-bottom */
  padding-bottom: 177.78%;
  max-width: 22rem;
  align-self: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--c-bg);
}

.noroo-showcase__yt-wrap iframe.noroo-showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  border: none;
}

/* Fallback falls noch ein <video> verwendet wird */
video.noroo-showcase__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--c-bg);
}

.noroo-showcase__caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--c-text-dim-on-light);
  text-align: center;
}

@media (min-width: 60rem) {
  .noroo-showcase__caption {
    text-align: left;
  }
}

.noroo-showcase__instagram {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  color: var(--c-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

.noroo-showcase__instagram:hover,
.noroo-showcase__instagram:focus-visible {
  color: var(--c-accent-hover);
}

.noroo-showcase__instagram svg {
  flex-shrink: 0;
}

@media (min-width: 60rem) {
  .noroo-showcase__instagram {
    align-self: flex-start;
  }
}