/* =========================================================
   Smith Visuals — AAT Flugschule Showcase (Portfolio-Bereich)
   Helle Section zwischen "Ein Herzensprojekt" und "Weitere Arbeiten":
   links die Foto-Mappe (gleiche .mw-folder-Optik wie more-work.css,
   hier rein dekorativ ohne Klickziel), rechts ein grosses Einzelfoto
   mit kurzer Bildunterschrift.
   ========================================================= */

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

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

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

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

.aat-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;
}

/* Groesser als die Grid-Mappen in more-work.css (--mw-item--lg), da hier
   die einzige, freistehende Mappe im Fokus steht. Gleiches Skalierungs-
   prinzip: .mw-stage bleibt nativ 808x682, --mw-scale skaliert unitless. */
.aat-showcase__stagewrap {
  overflow: visible;
  width: 13rem;
}

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

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

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

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

.aat-showcase__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.aat-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) {
  .aat-showcase__caption {
    text-align: left;
  }
}

.aat-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);
}

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

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

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