/*
Theme Name: Flekk — Литера Крем
Theme URI: https://flekk.ru/
Description: Шаблон лендинга для веб-студии и агентства. Графит и кремовый, Prata на заголовках, крупные скриншоты работ. Дочерняя тема Hello Elementor.
Author: Flekk
Template: hello-elementor
Version: 1.1.3
Text Domain: flekk-litera
*/

/* ── Токены ─────────────────────────────────────────────── */
:root{
  --flk-bg:#101211;
  --flk-ink:#EDE7DB;
  --flk-dim:rgba(237,231,219,.56);
  --flk-dim2:rgba(237,231,219,.72);
  --flk-ln:rgba(237,231,219,.15);
  --flk-ln2:rgba(237,231,219,.28);
  --flk-sunk:rgba(237,231,219,.04);
  --flk-band:1440px;
  --flk-pad:clamp(20px,4vw,64px);
  --flk-serif:"Prata",Georgia,"Times New Roman",serif;
  --flk-sans:"Manrope",system-ui,-apple-system,sans-serif;
  --flk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --flk-h1:clamp(34px,5.2vw,100px);
  --flk-h2:clamp(25px,3.1vw,60px);
  --flk-h3:clamp(18px,1.35vw,26px);
  --flk-body:clamp(16px,1.02vw,19px);
  --flk-small:clamp(14px,.9vw,17px);
  --flk-step:clamp(28px,4.6vw,88px);
}

/* ── Основа ─────────────────────────────────────────────── */
body{
  background:var(--flk-bg);
  color:var(--flk-ink);
  font-family:var(--flk-sans);
  font-size:var(--flk-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body h1,body h2,body h3,body h4{
  font-family:var(--flk-serif);
  font-weight:400;
  letter-spacing:-.012em;
  margin:0;
  color:inherit;
}
body h1{font-size:var(--flk-h1);line-height:1.06}
body h2{font-size:var(--flk-h2);line-height:1.12;text-wrap:balance}
body h3{font-size:var(--flk-h3);line-height:1.25}
body p{margin:0}
body a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Набор Elementor красит виджеты своими цветами и размерами — забираем обратно */
body .elementor-widget-heading .elementor-heading-title{color:inherit;font-family:var(--flk-serif);font-weight:400}
body .elementor-widget-text-editor{color:inherit}
body .elementor-widget-text-editor p:first-child{margin-top:0}
body .elementor-widget-text-editor p:last-child{margin-bottom:0}
/* Колонкам Elementor даёт свои 10px — ритм задаёт тема */
body .elementor-column > .elementor-widget-wrap{padding:0}
/* Ширину колонки Elementor печатает своим правилом, и оно идёт ПОСЛЕ темы:
   в гриде колонка остаётся 25%/50%/33% от трека и схлопывается. Вес поднимается
   селектором с [class*="flk-"] — правило вида .flk-facts .elementor-column проигрывает. */
body .elementor-section[class*="flk-"] > .elementor-container{max-width:var(--flk-band);margin:0 auto}
body .elementor-section[class*="flk-"] > .elementor-container > .elementor-column{width:100%}

/* ── Полоса контента ────────────────────────────────────── */
/* Полоса шапки и подвала обязана совпасть по краям с полосой секций Elementor:
   у секций поля СНАРУЖИ контейнера, поэтому здесь max-width = полоса + два поля. */
.flk-band{
  width:100%;
  max-width:calc(var(--flk-band) + 2 * var(--flk-pad));
  margin:0 auto;
  padding-left:var(--flk-pad);
  padding-right:var(--flk-pad);
}
body .elementor-section[class*="flk-"]{
  padding-left:var(--flk-pad);
  padding-right:var(--flk-pad);
}

/* ── Шапка ──────────────────────────────────────────────── */
.flk-header .flk-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:clamp(14px,1.9vw,36px);padding-bottom:clamp(14px,1.9vw,36px);
}
.flk-mark{font-family:var(--flk-serif);font-size:clamp(20px,1.8vw,35px);line-height:1}
.flk-nav ul{display:flex;gap:clamp(16px,2.2vw,42px);margin:0;padding:0;list-style:none}
.flk-nav a{color:var(--flk-dim);font-size:var(--flk-small)}
.flk-nav a:hover,.flk-nav a:focus-visible{color:var(--flk-ink)}
.flk-tel{font-family:var(--flk-mono);font-size:var(--flk-small);white-space:nowrap}
@media (max-width:900px){.flk-nav{display:none}}

/* ── Секции: общий ритм ─────────────────────────────────── */
body .elementor-section.flk-sec{padding-top:clamp(40px,6vw,115px);padding-bottom:clamp(40px,6vw,115px)}
body .elementor-section.flk-tight{padding-top:0}

/* Шапка секции — по центру полосы */
body .flk-shead > .elementor-container{justify-content:center}
body .flk-shead .elementor-column{width:100%}
body .flk-shead .elementor-widget-wrap{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.1vw,21px);
  max-width:62ch;margin:0 auto;
}
body .flk-shead .flk-lede{color:var(--flk-dim);font-size:var(--flk-body)}

/* ── Первый экран ───────────────────────────────────────── */
body .elementor-section.flk-hero{padding-top:clamp(36px,6vw,115px);padding-bottom:clamp(32px,5vw,96px)}
body .flk-hero .elementor-column{width:100%}
body .flk-hero .elementor-widget-wrap{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,2.2vw,42px);
}
body .flk-hero .elementor-widget-heading .elementor-heading-title{max-width:19ch;margin-inline:auto;text-wrap:balance}
body .flk-hero .flk-accent{box-shadow:inset 0 -1px 0 var(--flk-ln2)}
body .flk-hero .flk-sub{max-width:58ch;margin-inline:auto;color:var(--flk-dim2);font-size:clamp(16px,1.15vw,22px)}
body .flk-note{font-family:var(--flk-mono);font-size:var(--flk-small);color:var(--flk-dim)}

/* Кнопки: акцентного цвета в шаблоне нет, кнопка — инверсия фона */
body .elementor-widget-button .elementor-button{
  background-color:var(--flk-ink);
  color:var(--flk-bg);
  border:1px solid var(--flk-ink);
  border-radius:4px;
  font-family:var(--flk-sans);
  font-weight:600;
  font-size:var(--flk-body);
  line-height:1.2;
  padding:clamp(14px,1.05vw,20px) clamp(22px,2.4vw,46px);
  min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .15s ease;
}
body .elementor-widget-button .elementor-button:hover{opacity:.86}
body .flk-ghost .elementor-button{background-color:transparent;color:var(--flk-ink);border-color:var(--flk-ln2);font-weight:500}

/* ── Полоса цифр ────────────────────────────────────────── */
body .elementor-section.flk-facts{padding-bottom:clamp(40px,6vw,115px)}
body .flk-facts > .elementor-container{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,30px);
}
body .flk-facts .elementor-column{width:100%}
body .flk-facts .elementor-widget-wrap{
  border:1px solid var(--flk-ln);border-radius:16px;
  padding:clamp(18px,2vw,38px) clamp(16px,1.8vw,34px);
  height:100%;
}
body .flk-facts .flk-num .elementor-heading-title{
  font-size:clamp(30px,2.9vw,56px);line-height:1;font-variant-numeric:tabular-nums;display:block;
}
body .flk-facts .elementor-widget-text-editor{color:var(--flk-dim);font-size:var(--flk-small);line-height:1.45;margin-top:clamp(6px,.8vw,15px)}
@media (max-width:900px){body .flk-facts > .elementor-container{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Два столбца с линиями: боль, услуги, вопросы ───────── */
body .flk-rows > .elementor-container{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,76px);row-gap:0;
}
body .flk-rows .elementor-column{width:100%}
body .flk-rows .elementor-widget-wrap{padding:clamp(18px,1.9vw,36px) 0;border-top:1px solid var(--flk-ln)}
body .flk-rows .elementor-widget-heading{margin-bottom:clamp(6px,.7vw,13px)}
body .flk-rows .elementor-widget-text-editor{color:var(--flk-dim);font-size:var(--flk-small)}
@media (max-width:900px){body .flk-rows > .elementor-container{grid-template-columns:minmax(0,1fr)}}

/* ── Работы: скриншот во всю полосу ─────────────────────── */
body .elementor-section.flk-case-shot{padding-top:clamp(28px,3.4vw,65px);padding-bottom:0}
body .elementor-section.flk-case-shot.flk-case-first{padding-top:0}
body .flk-case-shot .elementor-column{width:100%}
body .flk-case-shot .elementor-widget-wrap{border-top:1px solid var(--flk-ln);padding-top:clamp(28px,3.4vw,65px)}
body .flk-case-shot.flk-case-first .elementor-widget-wrap{border-top:0;padding-top:0}
.flk-shot{
  width:100%;aspect-ratio:16/9;border:1px solid var(--flk-ln);border-radius:16px;
  background:
    repeating-linear-gradient(135deg,rgba(237,231,219,.045) 0 14px,transparent 14px 28px),
    var(--flk-sunk);
  display:flex;align-items:center;justify-content:center;
  color:var(--flk-dim);font-family:var(--flk-mono);font-size:var(--flk-small);
}
.flk-shot::after{content:"скриншот проекта"}
body .elementor-section.flk-case-meta{padding-top:clamp(14px,2vw,38px);padding-bottom:0}
body .flk-case-meta > .elementor-container{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) clamp(90px,14vw,270px);
  gap:clamp(14px,3vw,58px);align-items:start;
}
body .flk-case-meta .elementor-column{width:100%}
body .flk-case-meta .flk-cd{color:var(--flk-dim)}
body .flk-case-meta .flk-term{text-align:right}
body .flk-case-meta .flk-term .elementor-heading-title{
  font-size:clamp(22px,1.9vw,37px);font-variant-numeric:tabular-nums;white-space:nowrap;
}
body .flk-case-meta .flk-term-lbl{text-align:right;color:var(--flk-dim);font-family:var(--flk-mono);font-size:var(--flk-small)}
@media (max-width:900px){
  body .flk-case-meta > .elementor-container{grid-template-columns:minmax(0,1fr);gap:10px}
  body .flk-case-meta .flk-term,body .flk-case-meta .flk-term-lbl{text-align:left}
  .flk-shot{aspect-ratio:4/3;border-radius:12px}
}

/* ── Шаги ───────────────────────────────────────────────── */
body .flk-steps > .elementor-container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(0px,2vw,38px)}
body .flk-steps .elementor-column{width:100%}
body .flk-steps .elementor-widget-wrap{border-top:1px solid var(--flk-ln2);padding-top:clamp(14px,1.6vw,30px)}
body .flk-steps .flk-step-no .elementor-heading-title{
  font-family:var(--flk-mono);font-size:var(--flk-small);color:var(--flk-dim);
}
body .flk-steps .elementor-widget-heading + .elementor-widget-heading{margin-top:clamp(6px,.9vw,17px)}
body .flk-steps .elementor-widget-text-editor{color:var(--flk-dim);font-size:var(--flk-small);margin-top:clamp(6px,.8vw,15px)}
@media (max-width:900px){
  body .flk-steps > .elementor-container{grid-template-columns:minmax(0,1fr)}
  body .flk-steps .elementor-widget-wrap{padding:18px 0 0}
}

/* ── Цены ───────────────────────────────────────────────── */
body .flk-prices > .elementor-container{display:block;border-top:1px solid var(--flk-ln2)}
body .flk-prices .elementor-column{width:100%}
body .flk-prices .elementor-column > .elementor-widget-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) clamp(120px,15vw,290px);
  gap:clamp(4px,3vw,58px);align-items:baseline;
  padding:clamp(16px,1.8vw,34px) 0;border-bottom:1px solid var(--flk-ln);
}
body .flk-prices .elementor-widget{width:auto}
/* Цена прижимается к правому краю СВОЕГО трека: без этого виджет ужимается
   по контенту и встаёт слева, а строки прайса перестают выравниваться. */
body .flk-prices .flk-sum{justify-self:end;max-width:100%}
body .flk-prices .elementor-widget-text-editor{color:var(--flk-dim);font-size:var(--flk-small)}
body .flk-prices .flk-sum .elementor-heading-title{
  font-size:clamp(22px,1.5vw,29px);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;display:block;
}
@media (max-width:900px){
  body .flk-prices .elementor-column > .elementor-widget-wrap{grid-template-columns:minmax(0,1fr);gap:6px}
  body .flk-prices .flk-sum .elementor-heading-title{text-align:left}
}

/* ── Гарантия: две секции, одна карточка ────────────────── */
/* 🔴 Отступ между половинами карточки только ВНУТРИ контейнера: внешний padding
   секции рисуется фоном страницы и разрывает карточку пополам. */
body .elementor-section.flk-guar-head{padding-top:clamp(26px,3.6vw,69px);padding-bottom:0}
body .elementor-section.flk-guar-body{padding-top:0;padding-bottom:clamp(26px,3.6vw,69px)}
body .flk-guar-head > .elementor-container,
body .flk-guar-body > .elementor-container{
  background:var(--flk-sunk);border-left:1px solid var(--flk-ln);border-right:1px solid var(--flk-ln);
  padding-left:clamp(18px,3.6vw,69px);padding-right:clamp(18px,3.6vw,69px);
}
body .flk-guar-head > .elementor-container{
  border-top:1px solid var(--flk-ln);border-radius:16px 16px 0 0;
  padding-top:clamp(26px,3.6vw,69px);padding-bottom:clamp(16px,2.6vw,50px);
}
body .flk-guar-body > .elementor-container{
  border-bottom:1px solid var(--flk-ln);border-radius:0 0 16px 16px;padding-bottom:clamp(26px,3.6vw,69px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,58px);
}
body .flk-guar-head .elementor-column,body .flk-guar-body .elementor-column{width:100%}
body .flk-guar-head .elementor-widget-wrap{text-align:center}
body .flk-guar-body .elementor-widget-text-editor{color:var(--flk-dim);font-size:var(--flk-small);margin-top:clamp(6px,.7vw,13px)}
@media (max-width:900px){
  body .flk-guar-body > .elementor-container{grid-template-columns:minmax(0,1fr);gap:0}
  body .flk-guar-body .elementor-widget-wrap{padding-top:18px}
}

/* ── Отзывы ─────────────────────────────────────────────── */
body .flk-quotes > .elementor-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,38px)}
body .flk-quotes .elementor-column{width:100%}
body .flk-quotes .elementor-widget-wrap{
  border:1px solid var(--flk-ln);border-radius:16px;
  padding:clamp(20px,2.4vw,46px);height:100%;
}
body .flk-quotes .flk-quote{font-family:var(--flk-serif);font-size:clamp(18px,1.25vw,24px);line-height:1.5}
body .flk-quotes .flk-who{
  margin-top:clamp(12px,1.4vw,27px);color:var(--flk-dim);
  font-family:var(--flk-mono);font-size:var(--flk-small);
}
@media (max-width:900px){body .flk-quotes > .elementor-container{grid-template-columns:minmax(0,1fr)}}

/* ── Форма ──────────────────────────────────────────────── */
body .flk-form-sec .elementor-column{width:100%}
/* 44vw на телефоне давало колонку в 165px — ширина задаётся пределом, а не долей экрана */
body .flk-form-sec .flk-form-wrap{width:100%;max-width:720px;margin:0 auto}
.flk-form-wrap .wpcf7 form{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,23px);margin-top:clamp(18px,2.6vw,50px)}
.flk-form-wrap input[type=text],
.flk-form-wrap input[type=email],
.flk-form-wrap input[type=tel],
.flk-form-wrap textarea{
  width:100%;background:transparent;color:var(--flk-ink);
  border:1px solid var(--flk-ln);border-radius:8px;
  padding:clamp(13px,1.1vw,21px) clamp(14px,1.4vw,27px);
  font-family:var(--flk-sans);font-size:var(--flk-body);line-height:1.5;
}
.flk-form-wrap textarea{min-height:clamp(110px,7vw,134px);resize:vertical}
.flk-form-wrap ::placeholder{color:var(--flk-dim);opacity:1}
.flk-form-wrap input:focus-visible,.flk-form-wrap textarea:focus-visible{outline:2px solid var(--flk-ln2);outline-offset:2px}
.flk-form-wrap input[type=submit]{
  align-self:center;background:var(--flk-ink);color:var(--flk-bg);
  border:0;border-radius:4px;min-height:48px;
  padding:clamp(14px,1.05vw,20px) clamp(22px,2.4vw,46px);
  font-family:var(--flk-sans);font-weight:600;font-size:var(--flk-body);cursor:pointer;
}
.flk-form-wrap .flk-form-note{text-align:center;color:var(--flk-dim);font-family:var(--flk-mono);font-size:var(--flk-small)}
.flk-form-wrap .wpcf7-response-output{
  border-color:var(--flk-ln2)!important;border-radius:8px;color:var(--flk-ink);
  font-size:var(--flk-small);
}
.flk-form-wrap .wpcf7-not-valid-tip{color:var(--flk-ink);font-size:var(--flk-small);opacity:.8}

/* ── Контакты ───────────────────────────────────────────── */
body .flk-contacts > .elementor-container{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,58px);
  border-top:1px solid var(--flk-ln);padding-top:clamp(24px,3vw,58px);
}
body .flk-contacts .elementor-column{width:100%}
body .flk-contacts .elementor-widget-wrap{text-align:center}
body .flk-contacts .flk-clbl{color:var(--flk-dim);font-family:var(--flk-mono);font-size:var(--flk-small)}
body .flk-contacts .flk-cval .elementor-heading-title{font-size:clamp(17px,1.1vw,21px);margin-top:clamp(6px,.8vw,15px);display:block}
@media (max-width:900px){body .flk-contacts > .elementor-container{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ── Подвал ─────────────────────────────────────────────── */
.flk-footer .flk-band{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:clamp(20px,2.4vw,46px);padding-bottom:clamp(28px,3vw,58px);
  color:var(--flk-dim);font-size:var(--flk-small);
}
.flk-footer a:hover{color:var(--flk-ink)}

/* ── Доступность ────────────────────────────────────────── */
a:focus-visible,button:focus-visible{outline:2px solid var(--flk-ln2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Зоны касания на телефоне ────────────────────────────
   Ссылки шапки и подвала на десктопе живут в строке, на телефоне
   обязаны быть не меньше 44px — иначе в них не попасть пальцем. */
@media (max-width:900px){
  .flk-header .flk-mark,
  .flk-header .flk-tel,
  .flk-footer a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .flk-footer .flk-band{gap:4px;flex-direction:column;align-items:flex-start}
  .flk-footer .flk-band > span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
}

/* скриншот работы, когда картинка подставлена: [flk_shot src="…"] */
.flk-shot-has{background:none; overflow:hidden}
.flk-shot-has::after{content:none}
.flk-shot-has img{display:block; width:100%; height:100%; object-fit:cover}