/* === images-styles.css — Image styles for Pferderennen Wetten Pillar === */

/* ── Hero Image ──────────────────────────────────────────────────────────── */
.hero-figure {
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
  overflow: hidden;
}

.hero-figure .hero-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;
  object-fit: cover;
  object-position: center 40%;
}

/* ── Article Images (figures inside sections) ────────────────────────────── */
figure {
  margin: 2em 0;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

figure .article-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px 4px 0 0;
  object-fit: cover;
  aspect-ratio: 8 / 5;
}

figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--color-muted, #8C8578);
  text-align: center;
  padding: 0.6em 1em;
  background: var(--color-surface, #F2EFE7);
  border-radius: 0 0 4px 4px;
  line-height: 1.5;
}

/* ── Specific image adjustments ──────────────────────────────────────────── */

/* Image 2: History — totalisator */
[data-content="basics-history"] figure {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

/* Image 3: Bet types */
[data-content="bet-types"] figure {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

/* Image 4: Odds / totalisator pool */
[data-content="odds-tote"] figure {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

/* Image 5: Strategy / form analysis */
[data-content="strategy-form"] figure {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

/* Image 6: German Derby */
[data-content="races-germany"] figure {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  figure {
    margin: 1.5em -1.25rem;
    border-radius: 0;
  }

  figure .article-image {
    border-radius: 0;
  }

  figcaption {
    border-radius: 0;
    padding: 0.5em 1.25rem;
  }

  .hero-figure .hero-image {
    max-height: 360px;
  }
}

/* ── Dark mode adjustments ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  figure .article-image {
    filter: brightness(0.92);
  }

  figcaption {
    background: var(--color-surface, #252521);
    color: var(--color-muted, #9a958c);
  }
}