/* Быстрые блоки страниц из конструктора админки:
   title_background, text_block, image_full, images_4_rows
   (resources/views/romania/article/segments).
   Все значения — из шкал tokens.css. Отдельной шкалы вертикальных отступов
   в системе нет, поэтому ритм между блоками держат поля экрана --inset-*. */

.article-blk {
  padding: var(--inset-sheet) 0;
}

@media (min-width: 992px) {
  .article-blk {
    padding: var(--inset-desk) 0;
  }
}

/* ── заголовок ──────────────────────────────────────────────────────────── */

.article-blk-title {
  margin: 0;
  color: var(--ink);
  font-weight: var(--fw-accent);
  font-size: var(--fs-display);
  letter-spacing: -.01em;
}

.article-blk-subtitle {
  margin: var(--inset-screen) 0 0;
  color: var(--muted);
  font-weight: var(--fw-body);
  font-size: var(--fs-field);
  line-height: var(--lh-field);
}

.article-blk-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--inset-desk) * 2) var(--inset-desk);
  border-radius: var(--r-card);
  background-color: var(--ink);        /* пока фото грузится, белый текст читается */
  background-position: center;
  background-size: cover;
  text-align: center;
}

@media (min-width: 992px) {
  .article-blk-hero {
    padding: calc(var(--inset-desk) * 4) calc(var(--inset-desk) * 2);
  }
}

.article-blk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim);            /* притемнение: светлое фото не съест текст */
}

.article-blk-hero .article-blk-title,
.article-blk-hero .article-blk-subtitle {
  position: relative;
  color: #fff;                         /* текст на фото — белый при любой теме */
}

/* ── текст из редактора ─────────────────────────────────────────────────── */

.article-blk-text {
  color: var(--ink);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-field);
}

.article-blk-text > :first-child { margin-top: 0; }
.article-blk-text > :last-child { margin-bottom: 0; }

.article-blk-text p,
.article-blk-text ul,
.article-blk-text ol,
.article-blk-text blockquote {
  margin: 0 0 var(--inset-screen);
}

.article-blk-text h2,
.article-blk-text h3,
.article-blk-text h4 {
  margin: var(--inset-desk) 0 var(--inset-screen);
  color: var(--ink);
  font-weight: var(--fw-accent);
  letter-spacing: -.01em;
}

.article-blk-text h2 { font-size: var(--fs-total); }
.article-blk-text h3 { font-size: var(--fs-title); }
.article-blk-text h4 { font-size: var(--fs-field); }

.article-blk-text a {
  color: var(--brand);
}

.article-blk-text ul,
.article-blk-text ol {
  padding-left: var(--inset-desk);
}

.article-blk-text blockquote {
  padding-left: var(--inset-sheet);
  border-left: 2px solid var(--line);
  color: var(--muted);
}

.article-blk-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-photo);
}

.article-blk-text .ql-align-center { text-align: center; }
.article-blk-text .ql-align-right { text-align: right; }
.article-blk-text .ql-align-justify { text-align: justify; }

/* ── изображения ────────────────────────────────────────────────────────── */

.article-blk-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.article-blk-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--inset-screen);
}

@media (min-width: 768px) {
  .article-blk-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--inset-sheet);
  }
}

.article-blk-gallery-item {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-photo);
  background: var(--fill);
}