/*
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__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; }

/* Ссылка растягивается на всю карточку — кликается любая её точка.
   Отсчёт идёт от текстового блока, а он занимает лишь низ карточки,
   поэтому зону намеренно выводим далеко за его границы: лишнее срежет
   overflow: hidden самой карточки. */
.flag__body h3 a::after,
.tile__t a::after {
  content: '';
  position: absolute;
  inset: -1000px;
  z-index: 3;
}
.wp-block-cover.flag, .wp-block-cover.tile { overflow: hidden; }
.flag__body, .tile__t { position: relative; }
.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.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;
}

/* --- кнопки ---
   Ядро задаёт блоку кнопки свои отступы и размер шрифта. Возвращаем
   размеры исходной вёрстки, иначе кнопка вырастает вдвое. */
.wp-block-button__link.btn {
  padding: 17px 32px;
  font-family: 'Prosto One', sans-serif;
  font-size: 15px;
  line-height: 1.2;
  border-radius: 100px;
}
.wp-block-button__link.btn--sm { padding: 12px 22px; font-size: 14px; }
.wp-block-button { margin: 0; }

/* --- форма заявки ---
   Разметка повторяет исходную вёрстку, поэтому оформление приходит из
   original.css. Здесь только то, чего в нём нет. */
.form__trap { position: absolute; left: -9999px; width: 1px; overflow: hidden; }
.form__ok.is-visible { display: block; }
.form button.btn { justify-self: start; border: 0; cursor: pointer; }

/* WordPress ставит вертикальный отступ каждому блоку кроме первого.
   Внутри строчных раскладок это сбивает выравнивание — цифры и плашки
   съезжают вниз относительно первой. */
.hero__marks > *, .pills > *, .filters > *,
.flags > *, .tiles > *, .incl > *, .gallery > *, .cols2 > *,
.flag__body > *, .contact__in > * { margin-block-start: 0; margin-block-end: 0; }

/* --- подложка под подписью карточки ---
   Затемнение рисует слой самого блока: он лежит между фотографией и
   текстом, поэтому подпись читается на любом снимке. Псевдоэлемент из
   исходного CSS выключаем, иначе затемнение удвоится. */
.wp-block-cover.flag::after, .wp-block-cover.tile::after { content: none; }
.wp-block-cover.flag > .wp-block-cover__background,
.wp-block-cover.tile > .wp-block-cover__background {
  z-index: 1;
  opacity: 1;
  transition: background .35s var(--ease);
}
.wp-block-cover.flag > img.wp-block-cover__image-background,
.wp-block-cover.tile > img.wp-block-cover__image-background { z-index: 0; }
.wp-block-cover.flag .wp-block-cover__inner-container,
.wp-block-cover.tile .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* При наведении подложка уходит в фиолетовый — как в исходной вёрстке */
.wp-block-cover.flag:hover > .wp-block-cover__background {
  background: linear-gradient(to top, rgba(23,8,45,.95) 8%,
              rgba(167,113,254,.32) 60%, transparent 90%) !important;
}
.wp-block-cover.tile:hover > .wp-block-cover__background {
  background: linear-gradient(to top, rgba(23,8,45,.94) 6%,
              rgba(167,113,254,.34) 65%, transparent 92%) !important;
}

/* Первый блок страницы не должен отступать от верха — иначе над фото-героем
   остаётся полоса фона. */
.wp-site-blocks > *,
.wp-block-post-content > :first-child { margin-block-start: 0; }
.wp-site-blocks { padding-top: 0; }
body { margin: 0; }

/* --- таблицы на телефоне ---
   В исходной вёрстке таблицы держат минимальную ширину и уезжают
   в горизонтальную прокрутку. На узких экранах отпускаем ширину и
   ужимаем текст, чтобы всё помещалось в экран без скролла вбок. */
@media (max-width: 620px) {
  .wp-block-table.tbl-wrap { overflow-x: visible; }
  .wp-block-table.tbl-wrap table {
    min-width: 0;
    width: 100%;
    font-size: 13px;
    table-layout: fixed;
  }
  .wp-block-table.tbl-wrap th,
  .wp-block-table.tbl-wrap td {
    padding: 10px 10px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .wp-block-table.tbl-wrap th { font-size: 11px; letter-spacing: .06em; }

  /* первая колонка — подпись параметра, ей хватает трети ширины */
  .wp-block-table.tbl-wrap td:first-child,
  .wp-block-table.tbl-wrap th:first-child { width: 38%; }
}

@media (max-width: 400px) {
  .wp-block-table.tbl-wrap table { font-size: 12px; }
  .wp-block-table.tbl-wrap th,
  .wp-block-table.tbl-wrap td { padding: 8px 7px; }
}

/* --- телефон: ничего не должно вылезать за экран ---
   Блочные обёртки не наследуют мобильные правила исходной вёрстки, поэтому
   сетки и медиа явно ужимаются по ширине окна. */
html, body { max-width: 100%; overflow-x: hidden; }
.wp-block-group.wrap { max-width: 100%; }
.wp-block-image img, .wp-block-table, .wp-block-list { max-width: 100%; }

@media (max-width: 860px) {
  .wp-block-group.gallery { grid-template-columns: 1fr 1fr; }
  .wp-block-group.cols2 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .wp-block-group.gallery { grid-template-columns: 1fr; }
  .wp-block-group.gallery .wp-block-image:last-child { display: block; }
  .wp-block-group.flags { grid-template-columns: 1fr; }
  .wp-block-group.tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wp-block-group.incl { grid-template-columns: 1fr; }
  .wp-block-group.contact__in { grid-template-columns: 1fr; }
  .wp-block-group.wrap { padding-left: 18px; padding-right: 18px; }
  .hero__marks { gap: 18px 28px; }
}

/* На узких экранах ни один блок не имеет права быть шире окна.
   Полноширинные секции считаются от 100vw, а это больше доступной ширины,
   когда появляется вертикальная прокрутка — отсюда съезд вправо. */
@media (max-width: 620px) {
  .wp-site-blocks, .wp-block-post-content,
  .wp-block-group, .wp-block-cover,
  .wp-block-table, .wp-block-list, figure, table { max-width: 100%; }

  .alignfull {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  .wp-block-table.tbl-wrap table { min-width: 0; table-layout: fixed; }
}