/* ==========================================================================
   MHL Oldtimer Vintage – reports.css
   Theme-Stile für Veranstaltungsberichte (mhl_event_report CPT).
   Design: Racing Green · Leder · Messing · Creme — Archiv-/Kaminzimmer-Optik.
   ========================================================================== */

/* ── 1. Bericht-Hero ─────────────────────────────────────────────────────── */

.mhlv-report-hero {
  position:        relative;
  padding:         4rem 0 3rem;
  background:
    linear-gradient(160deg, var(--mhl-green-dark, #162b21) 0%, var(--mhl-bg-dark, #17120d) 60%, #110e09 100%);
  border-bottom:   1px solid var(--mhl-border, rgba(184,138,68,.35));
  overflow:        hidden;
}

.mhlv-report-hero__bg-img {
  position:          absolute;
  inset:             0;
  background-size:   cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:           0.15;
  z-index:           0;
}

.mhlv-report-hero__overlay {
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse at center, rgba(23,18,13,.45) 0%, rgba(23,18,13,.90) 100%);
  z-index:  1;
}

.mhlv-report-hero__inner {
  position: relative;
  z-index:  2;
}

.mhlv-report-hero .mhlv-label {
  color:         var(--mhl-brass, #b88a44);
  margin-bottom: 0.6rem;
}

.mhlv-report-hero__title {
  font-family: var(--font-serif, Georgia, serif);
  font-size:   clamp(1.8rem, 4vw, 3rem);
  color:       var(--mhl-cream, #f4ead8);
  margin:      0 0 1.25rem;
  line-height: 1.15;
}

.mhlv-report-hero__count {
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
  margin-top:  0.75rem;
  color:       var(--mhl-brass-light, #d6b06a);
  font-size:   0.9rem;
  font-weight: 600;
}

/* ── 2. Meta-Leiste ──────────────────────────────────────────────────────── */

.mhlv-report-meta {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.35rem 1.5rem;
  font-size:   0.9rem;
  color:       rgba(244,234,216,.78);
}

.mhlv-report-meta__item {
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
}

.mhlv-report-meta__item svg {
  color:       var(--mhl-brass, #b88a44);
  flex-shrink: 0;
}

.mhlv-report-meta__item--year {
  color:       var(--mhl-brass-light, #d6b06a);
  font-weight: 600;
}

/* ── 3. Einzel-Layout ────────────────────────────────────────────────────── */

.mhlv-report-layout {
  max-width: var(--wide-width, 1200px);
  margin:    0 auto;
}

.mhlv-report-content {
  margin-top:  2.5rem;
  padding-top: 2rem;
  border-top:  1px solid var(--mhl-border, rgba(184,138,68,.35));
  max-width:   var(--content-width, 740px);
  color:       var(--mhl-text, #2a2119);
}

.mhlv-report-navigation {
  margin-top:  2.5rem;
  padding-top: 2rem;
  border-top:  1px solid var(--mhl-border, rgba(184,138,68,.35));
  display:     flex;
  gap:         1rem;
  flex-wrap:   wrap;
}

/* ── 4. Galerie (Einzelbericht) ──────────────────────────────────────────── */

.mhlv-report-gallery {
  margin-top: 2rem;
}

/* Plugin-Grid im Bericht: 3 Spalten */
.mhlv-report-gallery .mhlpg-gallery-grid.mhlpg-cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* Fallback-Grid (kein Plugin) */
.mhlv-report-gallery__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.75rem;
}

.mhlv-report-gallery__figure {
  margin: 0;
}

.mhlv-report-gallery__img {
  width:         100%;
  height:        200px;
  object-fit:    cover;
  object-position: center;
  display:       block;
  border-radius: var(--radius-sm, 3px);
}

.mhlv-report-gallery__figure figcaption {
  font-size:   0.78rem;
  color:       var(--mhl-text-muted, #7a6a58);
  margin-top:  0.25rem;
  font-style:  italic;
}

.mhlv-report-gallery__count {
  margin-top:  0.75rem;
  font-size:   0.82rem;
  color:       var(--mhl-text-muted, #7a6a58);
  text-align:  right;
}

/* ── 5. Archiv: Jahres-Filter ────────────────────────────────────────────── */

.mhlv-report-year-filter {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--mhl-border, rgba(184,138,68,.35));
}

.mhlv-year-btn {
  display:        inline-flex;
  align-items:    center;
  padding:        0.3em 0.9em;
  border:         1px solid var(--mhl-border, rgba(184,138,68,.35));
  border-radius:  3px;
  color:          var(--mhl-text, #2a2119);
  text-decoration: none;
  font-size:      0.85rem;
  font-weight:    600;
  transition:     background 0.2s, color 0.2s, border-color 0.2s;
}

.mhlv-year-btn:hover {
  background:    var(--mhl-green, #1f3a2e);
  border-color:  var(--mhl-green, #1f3a2e);
  color:         var(--mhl-cream, #f4ead8);
}

.mhlv-year-btn--active {
  background:    var(--mhl-bg-dark, #17120d);
  border-color:  var(--mhl-bg-dark, #17120d);
  color:         var(--mhl-brass-light, #d6b06a);
}

/* ── 6. Jahresgruppe ─────────────────────────────────────────────────────── */

.mhlv-report-year-group {
  margin-bottom: 3.5rem;
}

.mhlv-report-year-heading {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  font-family:   var(--font-serif, Georgia, serif);
  font-size:     1.6rem;
  color:         var(--mhl-green, #1f3a2e);
  margin:        0 0 1.5rem;
}

.mhlv-report-year-heading__line {
  flex:          1;
  height:        1px;
  background:    var(--mhl-border, rgba(184,138,68,.35));
}

.mhlv-report-year-heading__count {
  font-size:   0.75rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 400;
  color:       var(--mhl-text-muted, #7a6a58);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── 7. Berichtskarten-Grid ──────────────────────────────────────────────── */

.mhlv-report-archive-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
}

/* ── 8. Berichtskarte ────────────────────────────────────────────────────── */

.mhlv-report-card {
  background:   var(--mhl-paper, #fbf5ea);
  border:       1px solid var(--mhl-border, rgba(184,138,68,.35));
  border-radius: 6px;
  overflow:     hidden;
  display:      flex;
  flex-direction: column;
  transition:   box-shadow 0.25s ease, transform 0.2s ease;
  position:     relative;
}

.mhlv-report-card:hover {
  box-shadow: 0 6px 28px rgba(42,33,25,.16), 0 1px 4px rgba(42,33,25,.08);
  transform:  translateY(-3px);
}

.mhlv-report-card__thumb-link {
  display:        block;
  text-decoration: none;
}

.mhlv-report-card__thumb {
  position:    relative;
  aspect-ratio: 4 / 3;
  overflow:    hidden;
  background:  var(--mhl-bg-dark, #17120d);
}

.mhlv-report-card__thumb img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 0.4s ease, filter 0.3s ease;
}

.mhlv-report-card:hover .mhlv-report-card__thumb img {
  transform: scale(1.05);
  filter:    brightness(0.85);
}

.mhlv-report-card__placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(184,138,68,.35);
}

.mhlv-report-card__count {
  position:    absolute;
  bottom:      0.5rem;
  right:       0.5rem;
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  background:  rgba(23,18,13,.78);
  color:       var(--mhl-brass, #b88a44);
  padding:     0.2em 0.55em;
  border-radius: 3px;
  font-size:   0.78rem;
  font-weight: 600;
  z-index:     2;
}

.mhlv-report-card__body {
  padding:        1rem 1.15rem 1.25rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.mhlv-report-card__type {
  display:        block;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--mhl-brass, #b88a44);
  margin-bottom:  0.3rem;
}

.mhlv-report-card__title {
  font-family:  var(--font-serif, Georgia, serif);
  font-size:    1.05rem;
  margin:       0 0 0.6rem;
  line-height:  1.3;
}

.mhlv-report-card__title a {
  color:           var(--mhl-text, #2a2119);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.mhlv-report-card__title a:hover {
  color: var(--mhl-green, #1f3a2e);
}

.mhlv-report-card__meta {
  list-style: none;
  margin:     0 0 1rem;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        0.25rem;
  font-size:  0.82rem;
  color:      var(--mhl-text-muted, #7a6a58);
  flex:       1;
}

.mhlv-report-card__meta li {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
}

.mhlv-report-card__meta svg {
  color:       var(--mhl-brass, #b88a44);
  flex-shrink: 0;
}

.mhlv-report-card__cta {
  align-self:   flex-start;
  color:        var(--mhl-text, #2a2119) !important;
  border-color: var(--mhl-bg-dark, #17120d) !important;
}

.mhlv-report-card__cta:hover {
  background: var(--mhl-bg-dark, #17120d) !important;
  color:      var(--mhl-cream, #f4ead8) !important;
}

/* ── 9. Leere/Fehler-Zustände ────────────────────────────────────────────── */

.mhlv-report-empty {
  padding:      2rem;
  text-align:   center;
  color:        var(--mhl-text-muted, #7a6a58);
  background:   var(--mhl-paper, #fbf5ea);
  border:       1px dashed var(--mhl-border, rgba(184,138,68,.35));
  border-radius: 6px;
  font-style:   italic;
}

/* ── 10. Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .mhlv-report-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .mhlv-report-gallery .mhlpg-gallery-grid.mhlpg-cols-3,
  .mhlv-report-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mhlv-report-hero { padding: 2.5rem 0 2rem; }
  .mhlv-report-hero__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .mhlv-report-meta { gap: 0.35rem 1rem; font-size: 0.85rem; }
}

@media (max-width: 600px) {
  .mhlv-report-archive-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .mhlv-report-gallery .mhlpg-gallery-grid.mhlpg-cols-3,
  .mhlv-report-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mhlv-report-gallery .mhlpg-gallery-grid.mhlpg-cols-3,
  .mhlv-report-gallery__grid {
    grid-template-columns: 1fr;
  }
  .mhlv-report-card__body { padding: 0.875rem 1rem 1rem; }
}

/* ── 11. prefers-reduced-motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mhlv-report-card,
  .mhlv-report-card__thumb img {
    transition: none;
  }
}