/* =========================================================
   Smith Visuals — Portfolio Grid
   Figma node 76:165 · 8 Portfolio-Items (Figma-Maß 400x500),
   jetzt dunkler Abschnitt inkl. Headline (vormals portfolio-intro),
   liegt zwischen den dunklen Sections. Mobile-first: 1 -> 2 -> 4
   Spalten via auto-fit/minmax, keine festen Breakpoints noetig.
   ========================================================= */

.portfolio {
  --portfolio-radius: 4px;

  background-color: var(--c-bg);
  background-image: radial-gradient(circle at 0% 100%, rgba(161, 25, 25, 0.4) 0%, transparent 70%);
  padding-block: var(--space-8);
}

.portfolio .section-title {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.portfolio > .portfolio-intro__inner {
  margin-bottom: var(--space-6);
}

.portfolio__carousel {
  position: relative;
}

.portfolio__grid {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.25rem; /* Platz fuer sichtbaren Fokus-Outline-Ring */
  scrollbar-width: none; /* Firefox: eigene Pfeile statt System-Scrollbar */
}

.portfolio__grid::-webkit-scrollbar {
  display: none;
}

.portfolio__item {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 300px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border-radius: var(--portfolio-radius);
  overflow: hidden;
  /* Figma-Hintergrund hinter dem Bild (78:90 u.a.) — sichtbar als
     Platzhalter-Ton, solange das Bild laedt */
  background: var(--c-bg-elevated);
}

@media (min-width: 40rem) {
  .portfolio__item { width: 280px; }
}

@media (min-width: 60rem) {
  .portfolio__item { width: 290px; }
}

/* Eigener Breakpoint ab --container-max (1600px): die Container-Breite
   deckelt hier, Grid wird dadurch spuerbar breiter als knapp unter 1600px
   (~1328px bei 1440px Viewport vs. ~1469px ab 1600px). Ohne diesen
   zusaetzlichen Schritt faellt der "Peek" des naechsten Cards je nach
   Fensterbreite mal komplett weg, mal ist die naechste Karte fast
   komplett sichtbar — hier eigener Wert, der bei sehr breiten
   Viewports (getestet 1920px) wieder einen sauberen Peek ergibt. */
@media (min-width: 100rem) {
  .portfolio__item { width: 320px; }
}

.portfolio__link {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio__link::after {
  /* Sanftes Abdunkeln beim Hover/Fokus, ersetzt fehlenden Text-Overlay
     (Figma-Instanzen enthalten keinen Titel/Kategorie-Text) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 9, 0) 45%, rgba(6, 7, 9, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.portfolio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio__link:hover .portfolio__img,
  .portfolio__link:focus-visible .portfolio__img {
    transform: scale(1.06);
  }
}

.portfolio__link:hover::after,
.portfolio__link:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__img,
  .portfolio__link::after {
    transition: none;
  }
  .portfolio__grid {
    scroll-behavior: auto;
  }
}

.portfolio__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-border-light);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  color: var(--c-text-dark);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}

.portfolio__nav:hover,
.portfolio__nav:focus-visible {
  background: var(--c-border-light);
}

.portfolio__nav--prev { left: var(--space-2); }
.portfolio__nav--next { right: var(--space-2); }

@media (max-width: 39.99rem) {
  .portfolio__nav {
    display: none;
  }
}

.portfolio__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}