/* images-styles.css — BetCota */

/* ===== Hero image ===== */
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  border-radius: 12px;
  object-fit: cover;
}

figure {
  margin: 0;
  padding: 0;
}

/* ===== Hero figure wrapper ===== */
[data-content="hero"] figure {
  margin-top: 2rem;
  width: 100%;
}

/* ===== Content figures ===== */
[data-content] figure:not([data-content="hero"] figure) {
  margin: 2rem 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-muted-bg, #f1f3f5);
  border: 1px solid var(--color-border, #e5e7eb);
}

[data-content] figure:not([data-content="hero"] figure) img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

figcaption {
  padding: 0.6rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.5;
  background: var(--color-muted-bg, #f1f3f5);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  [data-content="hero"] figure {
    margin-top: 1.25rem;
  }

  [data-content] figure:not([data-content="hero"] figure) {
    margin: 1.5rem 0;
    border-radius: 8px;
  }

  [data-content] figure:not([data-content="hero"] figure) img {
    border-radius: 8px 8px 0 0;
  }

  figcaption {
    font-size: 12px;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 375px) {
  [data-content] figure:not([data-content="hero"] figure) {
    margin: 1.25rem 0;
    border-radius: 6px;
  }
}