/* ==========================================================================
   images-styles.css — стили для изображений на странице USDTippHU
   Подключение: <link rel="stylesheet" href="images-styles.css">
   Использует CSS-переменные из основного <style> в index.html.
   ========================================================================== */

/* --- Article figure (5 inline-изображений в секциях data-content) --- */
.article-figure {
  margin: 2.25em auto;
  max-width: 100%;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border, #E5E7EB);
  box-shadow: var(--shadow, 0 1px 3px rgba(15, 20, 25, 0.06), 0 1px 2px rgba(15, 20, 25, 0.04));
  background: var(--surface, #FFFFFF);
}

.article-figure figcaption {
  margin-top: 0.85em;
  padding: 0 0.5em;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary, #525866);
  text-align: left;
  font-style: italic;
  border-left: 2px solid var(--accent, #1DA67A);
  padding-left: 0.85em;
}

/* --- Hero image (внутри data-content="hero") --- */
.hero figure {
  margin: 2.25em 0 0;
  width: 100%;
}

.hero .hero-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(15, 20, 25, 0.08));
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* --- Header logo --- */
.site-logo img {
  display: block;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .article-figure {
    margin: 1.75em auto;
  }
  .article-figure img {
    border-radius: 8px;
  }
  .article-figure figcaption {
    font-size: 0.82rem;
    padding-left: 0.7em;
  }
  .hero figure {
    margin-top: 1.75em;
  }
  .hero .hero-image {
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .article-figure {
    margin: 1.5em auto;
  }
  .article-figure figcaption {
    font-size: 0.8rem;
  }
}

/* --- Print friendly --- */
@media print {
  .article-figure {
    page-break-inside: avoid;
  }
  .article-figure img {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}