/*
 * components.css — Komponenten der AGM Scrollpage
 * Pills, Karten, chromatische Akzentfläche, Navy-Block, Marquee, Footer, Reveal.
 * Abhängig von tokens.css. Layout → styles.css.
 */

/* ============ Pill-Buttons ============ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease-editorial),
    background-color 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial);
}

.pill--solid {
  background: var(--color-ink-black);
  color: var(--color-bone-white);
}

.pill--ghost {
  background: transparent;
  color: var(--color-ink-black);
  border-color: var(--color-ash);
}

.pill:hover {
  transform: translateY(-2px);
}

.pill--ghost:hover {
  border-color: var(--color-ink-black);
}

.pill:active {
  transform: translateY(0);
}

/* ============ Karten-Raster ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-charcoal);
  border-radius: var(--radius-image);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-editorial);
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card--accent-magenta .card__media {
  border: 1px solid var(--color-magenta-bloom);
}

.card--accent-teal .card__media {
  border: 1px solid var(--color-forest-teal);
}

.card__title {
  font-size: var(--text-subheading);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-body);
}

.card__text {
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chromatische Akzentkarte: Tint-Fläche statt Canvas (eine pro Reihe) */
.card--tint {
  background: var(--color-mint-wash);
  padding: var(--card-padding);
}

.card--tint.is-pink {
  background: var(--color-candy-pink);
}

.card--tint.is-blue {
  background: var(--color-powder-blue);
}

.card--tint .card__title,
.card--tint .card__text {
  color: var(--color-ink-black);
}

/* ============ Navy Inverted Featured Block ============ */
.feature-block {
  background: var(--color-navy-ink);
  color: var(--color-bone-white);
  padding: clamp(2rem, 6vw, 5rem);
  display: grid;
  gap: var(--space-32);
}

.feature-block .eyebrow {
  color: var(--color-ash);
}

.feature-block .heading {
  color: var(--color-bone-white);
  max-width: 18ch;
}

.feature-block .pill--solid {
  background: var(--color-bone-white);
  color: var(--color-navy-ink);
}

.feature-block .pill--ghost {
  color: var(--color-bone-white);
  border-color: rgba(255, 254, 247, 0.35);
}

.feature-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* ============ Kinetic Marquee ============ */
.marquee {
  border-block: 1px solid var(--color-ash);
  overflow: hidden;
  padding-block: var(--space-24);
}

.marquee__track {
  display: flex;
  gap: var(--space-48);
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee__track span {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-heading-sm);
  white-space: nowrap;
  color: var(--color-ink-black);
}

.marquee__track span::after {
  content: "·";
  margin-inline-start: var(--space-48);
  color: var(--color-ash);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--color-ash);
  padding-block: var(--space-64) var(--space-48);
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-48);
}

.footer-brand .display {
  font-size: var(--text-heading-sm);
}

.footer-col h3 {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-graphite);
  margin-bottom: var(--space-16);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer-col a {
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

.footer-col a:hover {
  color: var(--color-graphite);
}

/* ============ Scroll-Reveal ============ */
/* Progressive Enhancement: nur verstecken, wenn JS aktiv ist (.js auf <html>).
   Ohne JS bleibt der Inhalt sichtbar — gut für Robustheit, SEO und Thumbnails. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--reveal-duration) var(--ease-editorial),
    transform var(--reveal-duration) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee__track {
    animation: none;
  }
  .card:hover .card__media img {
    transform: none;
  }
}

/* ============ Responsiv ============ */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .site-footer {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}