/* ============================================================
   Шапка-баннер разделов.

   Размер и место одинаковые во всех трёх разделах — это здесь и задаётся,
   одним блоком. Содержимое приходит своё, но геометрия общая, чтобы переход
   между вкладками не выглядел переездом на другой сайт.

   Правится на месте. Подсветка редактируемого — мягкий фон, а не линия:
   подчёркивание под блоком, растянутым во всю ширину, тянулось через весь
   экран и читалось как разделитель, а не как «сюда можно писать».
   ============================================================ */

.shb {
  position: relative;
  /* Полоса во всю ширину окна: обложка, обрезанная полями, выглядит
     случайной картинкой, а не шапкой раздела. */
  margin-inline: calc(50% - 50vw); width: 100vw;
  height: clamp(220px, 34vh, 380px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--paper-sink);
  isolation: isolate;
}
.shb__media { position: absolute; inset: 0; z-index: 0; }
.shb__media.is-blank {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, oklch(var(--shadow) / 0.05) 22px 23px),
    var(--paper-sink);
}
.shb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Затемнение снизу: текст обязан читаться на любой обложке, включая
   светлую, и не зависеть от того, что Сид загрузил. */
.shb__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, oklch(var(--scrim) / 0.05) 30%, oklch(var(--scrim) / 0.72));
  pointer-events: none;
}
.shb__text {
  position: relative; z-index: 2;
  padding: var(--bleed); padding-block: 0 clamp(1.2rem, 3vh, 2rem);
  width: 100%; max-width: 62ch;
  display: flex; flex-direction: column; gap: 0.35rem;
  color: oklch(var(--n0));
}
.shb__line {
  margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  text-shadow: 0 1px 14px oklch(var(--scrim) / 0.55);
}
.shb__note {
  margin: 0; font-size: var(--t-small); color: oklch(var(--n2));
  text-shadow: 0 1px 10px oklch(var(--scrim) / 0.5);
}

/* Правка на месте */
.shb-ed { outline: none; border-radius: 3px; padding: 0.05em 0.25em; margin-inline: -0.25em; }
.shb-ed:hover { background: oklch(var(--n0) / 0.12); }
.shb-ed:focus { background: oklch(var(--n0) / 0.18); }
.shb-ed:empty::before { content: attr(data-ph); color: oklch(var(--n2) / 0.75); }

.shb__tools {
  position: absolute; z-index: 3; right: var(--bleed); bottom: clamp(1.2rem, 3vh, 2rem);
  display: flex; gap: 0.4rem; opacity: 0.5;
  transition: opacity 0.18s var(--ease);
}
.shb:hover .shb__tools, .shb__tools:focus-within { opacity: 1; }
.shb__tool {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0;
  border: var(--rule) solid oklch(var(--n0) / 0.35); border-radius: 50%;
  background: oklch(var(--scrim) / 0.5); color: oklch(var(--n0)); cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.shb__tool svg { width: 1rem; height: 1rem; }
.shb__tool:hover { border-color: oklch(var(--n0)); }
.shb__tool:disabled { opacity: 0.5; cursor: default; }