/*
Theme Name: МЕТАФОРА Фотозоны
Description: Тема сайта аренды фотозон. Дизайн-система один в один со
  статической версией: assets/original.css — тот же файл, что и на исходном
  сайте. Здесь только правила, стыкующие его с разметкой блоков Гутенберга.
Author: Oleg
Version: 2.0
Requires at least: 6.5
Tested up to: 7.0
Text Domain: metaphora
*/

/* ==========================================================================
   Мост между блоками Гутенберга и исходной вёрсткой.

   Блоки приносят свои обёртки (.wp-block-cover, .wp-block-group и прочие),
   поэтому оригинальные классы вешаются на них, а здесь снимается лишнее:
   отступы, min-height и раскладка, которые блок задаёт сам.
   ========================================================================== */

/* Контент страницы не должен ограничивать ширину — секции делают это сами */
.wp-block-post-content > * { max-width: none; }

/* --- секции --- */
.wp-block-group.sec { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.wp-block-group.sec--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wp-block-group.wrap { padding-left: var(--pad); padding-right: var(--pad); }

/* --- hero --- */
.wp-block-cover.hero {
  min-height: 100svh;
  padding: 140px 0 clamp(48px, 7vw, 90px);
  align-items: flex-end;
  justify-content: flex-start;
}
.wp-block-cover.hero .wp-block-cover__inner-container { width: 100%; }
/* затемнение рисует сам оригинальный CSS через ::after */
.wp-block-cover.hero > img.wp-block-cover__image-background {
  z-index: 0;
}

.wp-block-cover.srv-hero {
  min-height: min(74svh, 620px);
  padding: clamp(130px, 16vw, 190px) 0 clamp(50px, 7vw, 80px);
  align-items: flex-end;
  justify-content: flex-start;
}
.wp-block-cover.srv-hero .wp-block-cover__inner-container { width: 100%; }

/* --- карточки-флагманы и плитки каталога построены на блоке «Обложка» --- */
.wp-block-cover.flag,
.wp-block-cover.tile {
  min-height: 0;
  padding: 0;
  justify-content: flex-start;
}
.wp-block-cover.flag { aspect-ratio: 4 / 3; }
.wp-block-cover.tile { aspect-ratio: 1 / 1; }
.wp-block-cover.flag > .wp-block-cover__background,
.wp-block-cover.tile > .wp-block-cover__background { display: none; }
.wp-block-cover.flag .wp-block-cover__inner-container,
.wp-block-cover.tile .wp-block-cover__inner-container { width: 100%; }
.flag .flag__body h3 { margin-bottom: 6px; }
.flag .flag__body p { margin: 0; }
.tile .tile__t { margin: 0; }

/* Ссылка растягивается на всю карточку — кликается любая её точка */
.flag__body h3 a::after,
.tile__t a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}
.flag__body h3 a, .tile__t a { color: inherit; }

/* --- сетки --- */
.wp-block-group.flags,
.wp-block-group.tiles,
.wp-block-group.incl,
.wp-block-group.gallery,
.wp-block-group.cols2 { }

/* блоки внутри сеток не должны получать вертикальные отступы от темы */
.flags > *, .tiles > *, .incl > *, .gallery > *, .cols2 > * { margin-block: 0; }

/* --- галерея --- */
.gallery .wp-block-image {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* --- таблицы и списки из блоков --- */
.wp-block-table.tbl-wrap { margin: 0; }
.wp-block-table.tbl-wrap table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 16px; }
.wp-block-table.tbl-wrap th,
.wp-block-table.tbl-wrap td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.wp-block-table.tbl-wrap th {
  font-family: 'Prosto One', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
  background: var(--bg-2);
}
.wp-block-table.tbl-wrap tr:last-child td { border-bottom: 0; }

ul.checklist { list-style: none; }
ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--txt-dim); font-size: 16px; }

/* --- кнопки --- */
.wp-block-buttons.hero__cta,
.wp-block-buttons.srv-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button__link.btn { text-decoration: none; }

/* --- форма --- */
.form__ok { display: block; }

/* --- служебное --- */
.wp-block-spacer { flex-basis: auto; }

/* --- слои фото-героя ---
   Затемнение героев рисует сам блок «Обложка» (градиентный слой перед
   контентом), поэтому псевдоэлемент из исходного CSS здесь лишний. */
.wp-block-cover.hero::after,
.wp-block-cover.srv-hero::after { display: none; }
.wp-block-cover.hero > img.wp-block-cover__image-background,
.wp-block-cover.srv-hero > img.wp-block-cover__image-background {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

/* --- слои карточек ---
   Повторяем схему исходной вёрстки: фото и затемнение уходят под контент
   отрицательными z-index, изоляция не даёт им провалиться ниже карточки. */
.wp-block-cover.flag, .wp-block-cover.tile { isolation: isolate; }
.wp-block-cover.flag > img.wp-block-cover__image-background,
.wp-block-cover.tile > img.wp-block-cover__image-background {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.wp-block-cover.flag::after, .wp-block-cover.tile::after { z-index: -1; }

/* Блок «Обложка» задаёт свой цвет текста — возвращаем фирменный */
.wp-block-cover.hero, .wp-block-cover.srv-hero,
.wp-block-cover.flag, .wp-block-cover.tile { color: var(--txt); }

/* --- текст внутри составных элементов ---
   Абзацы блоков приносят нижний отступ, из-за которого цифры и подписи
   разъезжаются по вертикали. Внутри плотных элементов он не нужен. */
.mark p, .flag__body p, .tile__t, .incl__i p, .pill { margin: 0; }
.mark p + p { margin-top: 8px; }
.incl__i p:first-child { margin-bottom: 14px; }
.incl__i h4 { margin: 0 0 10px; }
.flag__body h3 { margin: 0 0 6px; }

/* Надзаголовок — блочный абзац, а не строчный элемент */
p.eyebrow { display: inline-flex; }

/* --- появление секций ---
   По умолчанию всё видно. Скрытие включается только когда скрипт
   отработал и поставил html.js-anim — иначе страница без JS была бы
   пустой, что недопустимо и для посетителей, и для поисковых роботов. */
.rv { opacity: 1; transform: none; }
html.js-anim .rv { opacity: 0; transform: translateY(26px); }
html.js-anim .rv.is-in { opacity: 1; transform: none; }

/* Затемняющий слой блока «Обложка» должен лежать между фото и текстом.
   Без явного порядка картинка идёт позже в разметке и перекрывает его. */
.wp-block-cover.hero > .wp-block-cover__background,
.wp-block-cover.srv-hero > .wp-block-cover__background {
  z-index: 1;
  opacity: 1;
}
.wp-block-cover.hero > img.wp-block-cover__image-background,
.wp-block-cover.srv-hero > img.wp-block-cover__image-background { z-index: 0; }
.wp-block-cover.hero .wp-block-cover__inner-container,
.wp-block-cover.srv-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}