/* Time to Change — global styles
   Custom CSS that complements the Tailwind config. Keep this file small. */

html { scroll-behavior: smooth; }

body {
  background-color: #F4EFE3;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols default weight */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Comfortable reading width for long-form prose */
.prose-narrow { max-width: 680px; }

/* Photo placeholder — used wherever an authentic photograph belongs.
   No stock images. The placeholder makes it visible that a real photo
   is needed. Replace with <img> referencing /assets/images/<file>. */
.photo-placeholder {
  position: relative;
  background-color: #EFE9DC;
  background-image:
    linear-gradient(135deg, #EFE9DC 0%, #E5DED1 50%, #EFE9DC 100%),
    repeating-linear-gradient(
      45deg,
      rgba(184, 106, 60, 0.05) 0 12px,
      transparent 12px 24px
    );
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5F594F;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.photo-placeholder::before {
  content: "Foto · " attr(data-caption);
  opacity: 0.7;
  max-width: 80%;
}

/* Hero-Foto-Placeholder — bis ein echtes Foto existiert, deutet ein
   dunkler Gradient die Stelle an. Sobald ein Bild da ist, einfach
   per inline-style background-image setzen, z. B.:
     <div class="hero-photo" style="background-image:url(/img/hero.jpg)"></div>
*/
.hero-photo {
  background-color: #3F4A52;
  background-image:
    linear-gradient(135deg, #56636C 0%, #3F4A52 60%, #2E363C 100%),
    repeating-linear-gradient(
      45deg,
      rgba(184, 106, 60, 0.07) 0 14px,
      transparent 14px 28px
    );
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}
.hero-photo::before {
  content: "Foto · " attr(data-caption);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.45);
  z-index: 1;
  pointer-events: none;
}
/* Hero-Foto-Varianten — Bilder aus img/. Wenn Caption sichtbar bleiben
   soll, einfach die Klasse weglassen; das ::before zeigt dann den
   Hinweis weiter. Bei gesetztem Bild blendet das Bild den Gradient. */
.hero-photo--coiffeursalon {
  background-image: url("../img/Coiffeursalon%20Havanna%202026.jpg");
  background-color: transparent;
  background-blend-mode: normal;
}
.hero-photo--coiffeursalon::before { display: none; }
.hero-photo--jugendliche {
  background-image: url("../img/Spielende%20Jugendliche%20Santiago%20de%20Cuba%202025_2.jpg");
  background-color: #2E363C;
  background-blend-mode: normal;
}
.hero-photo--jugendliche::before { display: none; }

/* Subtle fade-in on scroll. Triggered by IntersectionObserver in main.js.
   Intentionally minimal — no parallax, no animated counters. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Honor users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Focus styles — visible, but quiet */
:focus-visible {
  outline: 2px solid #B86A3C;
  outline-offset: 3px;
}

/* Responsive headline sizes — Tailwind text-h1 is 64px; that overflows on
   small screens. Scale down progressively. h1 element + class keeps
   specificity above Tailwind's utility class. */
@media (max-width: 640px) {
  h1.text-h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
  h2.text-h2 { font-size: 32px; line-height: 1.15; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  h1.text-h1 { font-size: 52px; line-height: 1.08; }
}

/* Status badge for project pages */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid currentColor;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}