/* ============================================================
   *nnika Portfolio — portfolio-photo.css
   Nur für die Photography-Seite.
============================================================ */

/* Font fürs Dymo-Style Prägeetikett */
@font-face {
  font-family: 'Embosst';
  src: url('../assets/fonts/embosst.ttf') format('truetype');
  font-display: swap;
}


/* ------------------------------------------------------------
   FILTER BUTTONS
   Kamera-Tags die als Filter funktionieren.
   Hover: invertiert (dunkel auf hell → hell auf dunkel).
   Aktiver Button: dauerhaft invertiert.
------------------------------------------------------------ */
.photo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.photo-filter-btn {
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--graphite);
  background: transparent;
  border: 1.5px solid var(--graphite);
  padding: 0.5em 1.1em;
  border-radius: 100px;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease;
}

.photo-filter-btn:hover,
.photo-filter-btn.active {
  background: var(--graphite);
  color: var(--butter);
}


/* ------------------------------------------------------------
   KAMERA-BESCHREIBUNG
   1 Text pro Kamera, sitzt zwischen Filter-Buttons und Grid.
   Nur der zum aktiven Filter passende Text ist sichtbar
   (.active Klasse wird von photo-filter.js gesteuert).
------------------------------------------------------------ */
.camera-description {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  max-width: 640px;
}

.camera-description__text {
  display: none;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--graphite);
  opacity: 0.75;
}

.camera-description__text.active {
  display: block;
}


/* ------------------------------------------------------------
   PHOTO GRID (aktuell ungenutzt, da iPhone-Tab entfernt wurde —
   bewusst NICHT gelöscht, falls iPhone-Fotos später wieder
   dazukommen sollen, siehe Chat)
   3 Spalten. Jedes Bild bekommt sein eigenes Seitenverhältnis
   via Modifier-Klasse — kein erzwungenes Quadrat mehr.
   Sanftes Fade beim Ein-/Ausblenden via CSS + JS.

   .photo-item--portrait  → 3:4  (Hochformat)
   .photo-item--landscape → 4:3  (Querformat)
------------------------------------------------------------ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 4rem;
}

.photo-item {
  aspect-ratio: 4 / 3; /* Fallback, falls keine Modifier-Klasse gesetzt ist */
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.photo-item--portrait {
  aspect-ratio: 3 / 4;
}

.photo-item--landscape {
  aspect-ratio: 4 / 3;
}

/* Versteckte Items — JS fügt/entfernt diese Klasse */
.photo-item.hidden {
  display: none;
}

/* Fade-out während Wechsel */
.photo-item.fading {
  opacity: 0;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* Leichter Zoom-Effekt auf Hover */
.photo-item:hover img {
  transform: scale(1.03);
}

/* Kamera-PNG innerhalb des normalen Grids (falls später wieder
   genutzt): object-fit contain statt cover, damit das
   transparente PNG nicht zugeschnitten wird. */
.photo-item--camera img {
  object-fit: contain;
}

.photo-grid.photo-grid--portrait {
  grid-template-columns: repeat(6, 1fr);
}

.photo-grid.photo-grid--portrait .photo-item,
.photo-grid.photo-grid--portrait .photo-item--portrait,
.photo-grid.photo-grid--portrait .photo-item--landscape {
  aspect-ratio: 9 / 16;
}


/* ------------------------------------------------------------
   TRIP GRIDS (Canon, Fujifilm, Sony, Analog)
   1 Karte pro Ausflug/Kategorie statt Einzelbilder.

   Bento-Style via Flexbox: ALLE Karten bekommen die gleiche fixe
   Höhe (clamp, responsiv). Die Breite ergibt sich automatisch aus
   dem Seitenverhältnis (aspect-ratio) — Querformat-Karten (4:3)
   werden dadurch breiter, aber nie kleiner in der Höhe als
   Hochformat-Karten (3:4). Genau das "Justified Gallery"-Prinzip.
   Das ist die Standard-Variante für Kameras mit GEMISCHTEN
   Formaten (Sony, Analog) — siehe .photo-trip-grid--uniform weiter
   unten für Kameras mit durchgehend GLEICHEM Format (Canon,
   Fujifilm), die stattdessen echtes CSS-Grid nutzen.

   position:relative, damit der Mobile-Tap-Hinweis (siehe unten)
   sich daran positionieren kann.
------------------------------------------------------------ */
.photo-trip-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /* zentriert die Reihe(n), statt linksbündig zu bleiben, wenn die
     letzte Zeile nicht ganz voll ist */
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 4rem;
}

.photo-trip-grid.hidden {
  display: none;
}

.photo-trip-card {
  position: relative;
  height: clamp(180px, 20vw, 320px); /* gemeinsame Höhe für ALLE Karten */
  aspect-ratio: 3 / 4; /* Standard: Hochformat. Für Querformat-Ausflüge → .photo-trip-card--landscape zusätzlich setzen */
  overflow: hidden;
  flex: 0 0 auto; /* Breite fix nach aspect-ratio, kein Strecken/Schrumpfen */
  transition: filter 0.3s ease;
}

.photo-trip-card--landscape {
  aspect-ratio: 4 / 3; /* gleiche Höhe wie oben, nur breiter */
}

.photo-trip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* Kamera-Karte in der Flexbox-Variante (Sony/Analog): Höhe fix wie
   die Trip-Karten, Breite kommt vom natürlichen PNG-Seitenverhältnis
   (kein erzwungenes aspect-ratio nötig, da object-fit:contain +
   width:auto das PNG einfach in seiner echten Form darstellt) */
.photo-trip-grid:not(.photo-trip-grid--uniform) .photo-camera-card {
  height: clamp(180px, 20vw, 320px);
  flex: 0 0 auto;
}

.photo-trip-grid:not(.photo-trip-grid--uniform) .photo-camera-card img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}


/* ------------------------------------------------------------
   DYMO-STYLE PRÄGEETIKETT
   Titel pro Bild-Stapel, unsichtbar in der Übersicht. Erscheint
   nur bei Hover (= während des Shuffle-Loops) oben links im
   Bild, im Look eines geprägten Dymo-Etiketten-Streifens.

   🟡 FIX (Mobile-Shuffle-Bug): die :hover-Regel steckt jetzt in
   @media (hover: hover) — vorher lief sie ungeschützt, wodurch
   iOS Safari beim ersten Tap nur den :hover-Zustand simuliert hat
   (Etikett erscheint), OHNE das eigentliche click-Event auszulösen
   — erst ein ZWEITER Tap auf dasselbe Element hätte den Klick
   gefeuert. Das war die eigentliche Ursache, warum auf Mobile nur
   der Titel erschien, aber kein Shuffle startete. Ohne anwendbare
   :hover-Regel überspringt iOS diese "Simulations-Runde" komplett,
   der erste Tap feuert jetzt direkt den click-Handler in
   photo-filter.js.
------------------------------------------------------------ */
.photo-trip-card__tag {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  padding: 0.25em 0.55em;
  background: var(--graphite);
  border-radius: 2px;
  font-family: 'Embosst', var(--font-main);
  font-weight: 400;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.85); /* linen, sanft statt reinweiss */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow:
    1px 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .photo-trip-card:hover .photo-trip-card__tag {
    opacity: 1;
  }
}


/* ------------------------------------------------------------
   UNIFORM GRID VARIANTE
   Für Kameras mit durchgehend gleichem Seitenverhältnis (Canon,
   Fujifilm: alles 3:4). Echtes CSS-Grid statt Flexbox, damit die
   Kamera-Karte sauber in die Reihe passt.
------------------------------------------------------------ */
.photo-trip-grid--uniform {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.photo-trip-grid--uniform .photo-trip-card,
.photo-trip-grid--uniform .photo-camera-card {
  height: auto;
  flex: unset;
}

.photo-trip-grid--uniform .photo-trip-card {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.photo-trip-grid--uniform .photo-trip-card--landscape {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

.photo-trip-grid--uniform .photo-camera-card {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* Letztes Element zentrieren, falls es allein in der letzten Zeile
   steht (sonst klebt es linksbündig, rechts bleibt Leerraum) —
   :nth-child(odd) trifft nur zu, wenn es an ungerader Position UND
   gleichzeitig das letzte Kind ist = alleine in seiner 2er-Zeile */
@media (max-width: 768px) {
  .photo-trip-grid--uniform > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50%;
  }
}


/* ------------------------------------------------------------
   GRID-FADE-IN — beim ersten Laden UND beim Tab-Wechsel
   Klasse wird von photo-filter.js gesetzt (gleiche Logik für
   Seitenaufruf und Kamera-Wechsel, da applyFilter() in beiden
   Fällen läuft).
------------------------------------------------------------ */
@keyframes photoGridIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.photo-trip-grid.is-entering,
.photo-grid.is-entering {
  animation: photoGridIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .photo-trip-grid.is-entering,
  .photo-grid.is-entering {
    animation: none;
  }
}


/* ------------------------------------------------------------
   KAMERA-KARTE (allgemein)
   1 PNG (Vorder- + Rückseite kombiniert, transparenter
   Hintergrund).
------------------------------------------------------------ */
.photo-camera-card {
  position: relative;
}

.photo-trip-grid--uniform .photo-camera-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .photo-trip-card:hover img {
    transform: scale(1.03);
  }
}


/* ------------------------------------------------------------
   MOBILE — Grid-Layout-Anpassung
   Auf Touch-Geräten gibt's kein Hover, jede Karte zeigt einfach
   statisch ihr erstes Bild (Cover) — keine Interaktion nötig.
   Hier nur noch die Spalten-/Grössen-Anpassung fürs schmalere
   Layout.
------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Canon/Fujifilm (Grid): 2 statt 4 Spalten */
  .photo-trip-grid--uniform {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sony/Analog (Flexbox): kleinere feste Höhe, damit ca. 2
     Hochformat-Karten pro Reihe passen */
  .photo-trip-grid:not(.photo-trip-grid--uniform) .photo-trip-card,
  .photo-trip-grid:not(.photo-trip-grid--uniform) .photo-camera-card {
    height: clamp(140px, 42vw, 220px);
  }
}