/* =============================================================================
   Journal — Layout Module
   Konzept: Editorial-Grid. Bild-zuerst Karten. Filter ohne UI-Kitsch.
   REGEL: NUR Layout + Spacing via CSS Variables. Keine Typografie. Keine Farben direkt.
   ============================================================================= */


/* =============================================================================
   PAGE WRAPPER
   ============================================================================= */

.journal-page {
  width:      100%;
  overflow-x: hidden;
  padding-top: calc(3rem + var(--space-md));
}


/* =============================================================================
   HERO
   ============================================================================= */

.journal-hero {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height:     40vh;
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.journal-hero__eyebrow {
  display:      block;
  margin-bottom: var(--space-md);
  color:        var(--color-fg-muted);
}

.journal-hero__head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-md);
}

.journal-hero__count {
  color: var(--color-fg-muted);
}


/* =============================================================================
   FILTER BAR
   ============================================================================= */

.journal-filters-wrap {
  padding-inline:  var(--page-margin);
  padding-block:   var(--space-md);
  border-bottom:   var(--border-hairline) solid var(--color-border);
}

.journal-filters {
  display:    flex;
  gap:        var(--space-sm);
  flex-wrap:  wrap;
  list-style: none;
}

.journal-filter {
  background:  none;
  border:      var(--border-hairline) solid var(--color-border);
  padding:     0.4em 0.9em;
  cursor:      pointer;
  color:       var(--color-fg-muted);
  transition:  color var(--dur-quick) var(--ease-material),
               border-color var(--dur-quick) var(--ease-material);
}

.journal-filter:hover,
.journal-filter--active {
  color:        var(--color-fg);
  border-color: var(--color-fg);
}


/* =============================================================================
   GRID
   3 Spalten Desktop, 2 Tablet, 1 Mobile
   ============================================================================= */

.journal-grid-wrap {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
}

.journal-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-md);
}


/* =============================================================================
   CARD
   ============================================================================= */

.journal-card {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  gap:             var(--space-sm);
}

.journal-card:hover .journal-card__title {
  opacity: 0.6;
}

.journal-card__img-wrap {
  aspect-ratio: 3 / 2;
  overflow:     hidden;
  background:   var(--color-bg-elevated);
}

.journal-card__img-placeholder {
  width:      100%;
  height:     100%;
  background: var(--color-bg-elevated);
}

.journal-card__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--dur-deliberate) var(--ease-out-expo);
}

.journal-card:hover .journal-card__img {
  transform: scale(1.03);
}

.journal-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.journal-card__meta {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-sm);
}

.journal-card__cat {
  color: var(--color-fg);
}

.journal-card__date {
  color:    var(--color-fg-muted);
  max-width: none;
}

.journal-card__title {
  transition: opacity var(--dur-quick) var(--ease-material);
}

.journal-card__excerpt {
  color:     var(--color-fg-muted);
  max-width: 40ch;
}


/* =============================================================================
   SKELETON LOADING
   ============================================================================= */

.journal-card--skeleton {
  pointer-events: none;
}

.journal-skeleton__img {
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-border) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: journal-shimmer 1.4s ease-in-out infinite;
}

.journal-skeleton__line {
  height:     1em;
  background: var(--color-bg-elevated);
  animation:  journal-shimmer 1.4s ease-in-out infinite;
  border-radius: 2px;
}

.journal-skeleton__line--short { width: 40%; }
.journal-skeleton__line--mid   { width: 70%; }

@keyframes journal-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.journal-empty {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  color:          var(--color-fg-muted);
}


/* =============================================================================
   FOOTER (shared pattern)
   ============================================================================= */

.journal-footer {
  padding-inline:  var(--page-margin);
  padding-block:   var(--space-lg);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  border-top:      var(--border-hairline) solid var(--color-border);
}

.journal-footer__copy {
  color: var(--color-fg-muted);
}

.journal-footer__nav {
  display:    flex;
  gap:        var(--space-md);
  list-style: none;
}

.journal-footer__nav-link {
  color:      var(--color-fg-muted);
  transition: color var(--dur-quick) var(--ease-material);
}

.journal-footer__nav-link:hover {
  color: var(--color-fg);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }
}