/* WordPress — первый экран «Светлая админка»: заголовок и кнопка сверху, ниже живое окно wp-admin на всю ширину контейнера.
   Подключается только на wordpress.html. Классы wph__* — текст первого экрана, wpa* — окно админки, wpa-site* — превью сайта клиента. */

/* ---------- Текст первого экрана ---------- */
.wph { container-type: inline-size; }
.wph__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(32px, 4cqi, 80px); align-items: end; }
.wph__intro, .wph__side { min-width: 0; }
.wph__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; }
.wph .badge--paper { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.wph .badge__dot { background: var(--cobalt); box-shadow: 0 0 0 3px rgba(115, 214, 255, .18), 0 0 12px rgba(115, 214, 255, .7); }
.wph__start { font-size: 15px; color: var(--muted); }
/* 1280+: две строки «WordPress: сайты под ключ / для клиентов»; кегль от ширины контейнера — строка занимает ~93 % колонки */
.wph__title { margin-top: 22px; font-size: clamp(34px, 4.05cqi, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.wph__l:last-child { display: block; }
.wph__side { padding-bottom: 2px; }
.wph__text { max-width: 36em; font-size: 17.5px; line-height: 26px; color: var(--muted-2); text-wrap: balance; }
.wph__bottom { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; }
.wph .hero__proof-text { color: rgba(255, 255, 255, .86); }
.wph .avatars img { border-color: var(--canvas); }

/* ---------- Сцена: окно + куб, который выходит за край ---------- */
.wph__stage { position: relative; margin-top: clamp(32px, 3cqi, 56px); }
/* подсветка за окном: радиусы не больше расстояния до краёв слоя — у свечения нет видимой границы */
.wph__stage::before { content: ""; position: absolute; z-index: 0; inset: -120px 0 -100px; pointer-events: none;
  background:
    radial-gradient(21% 40% at 23% 56%, rgba(115, 214, 255, .15), rgba(115, 214, 255, 0)),
    radial-gradient(13% 34% at 86% 36%, rgba(34, 113, 177, .3), rgba(34, 113, 177, 0)); }

.wpa-cube { position: absolute; z-index: 3; right: calc(-1 * clamp(14px, 2.4cqi, 44px)); top: calc(-1 * clamp(18px, 2.2cqi, 40px)); width: clamp(104px, 12.6cqi, 232px); pointer-events: none; will-change: transform; }
.wpa-cube__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .5)) drop-shadow(0 6px 10px rgba(12, 40, 80, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .wpa-cube__img { animation: wpa-float 7s ease-in-out infinite; }
}
@keyframes wpa-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(-2.5deg); }
}

/* ---------- Окно ---------- */
.wpa {
  --wp-blue: #2271B1; --wp-blue-2: #135E96; --wp-dark: #1D2327; --wp-dark-2: #2C3338; --wp-text: #1D2327; --wp-muted: #646970; --wp-line: #E6E3DC; --wp-bg: #F1F0ED; --wp-ok: #00A32A;
  position: relative; z-index: 1; overflow: hidden; border-radius: 22px; background: var(--wp-bg); color: var(--wp-text);
  font: 400 14px/1.4 var(--font); letter-spacing: 0; text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -50px rgba(0, 0, 0, .9), 0 26px 50px -26px rgba(0, 0, 0, .65);
}
.wpa__chrome { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 120px; background: var(--paper); border-bottom: 1px solid rgba(23, 24, 28, .08); }
.wpa__dots { position: absolute; left: 18px; top: 50%; display: flex; gap: 8px; transform: translateY(-50%); }
.wpa__dots i { width: 12px; height: 12px; border-radius: 50%; background: #DDD7CB; box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .06); }
.wpa__url { min-width: 0; max-width: 520px; height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 9px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .07); font-size: 13px; color: #8A8C91; white-space: nowrap; overflow: hidden; }
.wpa__url svg { flex: none; color: #8A8C91; }
.wpa__url b { font-weight: 500; color: var(--wp-text); }
.wpa__url b + .wpa__path { margin-left: -7px; }
.wpa__path { overflow: hidden; text-overflow: ellipsis; }

.wpa__bar { height: 32px; display: flex; align-items: center; padding: 0 6px; background: var(--wp-dark); color: #F0F0F1; font-size: 13px; }
.wpa__bar-item { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 9px; white-space: nowrap; }
.wpa__bar-item svg { flex: none; color: #A7AAAD; }
.wpa__bar-item--logo svg { color: #C3C4C7; }

.wpa__body { display: grid; grid-template-columns: 164px minmax(0, 1fr) minmax(0, 1.1fr); }

/* боковое меню wp-admin */
.wpa-menu { display: flex; flex-direction: column; padding: 10px 0 14px; background: var(--wp-dark); color: #F0F0F1; font-size: 14px; line-height: 18px; }
.wpa-menu__item, .wpa-menu__fold { position: relative; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 9px; white-space: nowrap; transition: color .15s; }
.wpa-menu__item svg, .wpa-menu__fold svg { flex: none; width: 20px; height: 20px; color: #A7AAAD; transition: color .15s; }
.wpa-menu__item:hover, .wpa-menu__item:hover svg { color: #72AEE6; }
.wpa-menu__item.is-current, .wpa-menu__item.is-current svg { background: var(--wp-blue); color: #fff; }
.wpa-menu__item.is-current::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: var(--wp-bg); }
.wpa-menu__sub { display: flex; flex-direction: column; padding: 7px 0 9px; background: var(--wp-dark-2); font-size: 13px; line-height: 18px; }
.wpa-menu__sub span { padding: 5px 10px 5px 38px; color: rgba(240, 246, 252, .7); white-space: nowrap; }
.wpa-menu__sub .is-current { color: #fff; font-weight: 600; }
.wpa-menu__fold { margin-top: 6px; font-size: 13px; color: #A7AAAD; }

/* редактор: заголовок страницы, кнопка «Обновить», группа полей ACF */
.wpa-edit { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 26px 28px; }
.wpa-edit__top { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.wpa-edit__heading { min-width: 0; margin-right: auto; }
.wpa-edit__crumb { font-size: 12.5px; line-height: 16px; color: var(--wp-muted); }
.wpa-edit__title { margin-top: 2px; font-size: 23px; line-height: 29px; font-weight: 400; letter-spacing: -.01em; }
.wpa-btn { position: relative; flex: none; height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--wp-blue); color: #fff; font: 500 14px/1 var(--font); cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -8px rgba(34, 113, 177, .7); transition: background .15s, box-shadow .2s, transform .2s var(--ease); }
.wpa-btn:hover { background: var(--wp-blue-2); }
.wpa-btn:active { transform: translateY(1px); }
.wpa-btn:focus-visible { outline: 2px solid var(--wp-blue); outline-offset: 3px; border-radius: 9px; }
.wpa-btn.is-busy { cursor: progress; }
.wpa-btn.is-busy .wpa-btn__label { opacity: 0; }
.wpa-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: wpa-spin .7s linear infinite; }
@keyframes wpa-spin { to { transform: rotate(360deg); } }
.wpa-edit__actions { position: relative; flex: none; display: flex; }
/* галочка не занимает места в строке: заголовку страницы на узких экранах хватает ширины */
.wpa-saved { position: absolute; right: calc(100% + 10px); top: 50%; width: 22px; height: 22px; margin-top: -11px; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .45s var(--spring); }
.wpa-saved svg { display: block; filter: drop-shadow(0 4px 8px rgba(0, 163, 42, .35)); }
.wpa-saved.is-on { opacity: 1; transform: none; }

.wpa-box { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 35, 39, .08), 0 14px 30px -18px rgba(29, 35, 39, .35); }
.wpa-box__head { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--wp-line); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wpa-box__acf { padding: 3px 7px 2px; border-radius: 5px; background: var(--wp-dark); color: #fff; font-size: 10.5px; line-height: 13px; font-weight: 700; letter-spacing: .05em; }
.wpa-box__hint { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 400; color: var(--wp-muted); }
.wpa-box__body { display: grid; gap: 14px; padding: 16px 18px 20px; }
.wpa-field { display: block; min-width: 0; }
.wpa-field__label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.wpa-field__label code { overflow: hidden; text-overflow: ellipsis; font: 400 11px/18px var(--mono); color: #8C8F94; }
.wpa-input { display: block; width: 100%; height: 40px; margin: 6px 0 0; padding: 0 12px; border: 1px solid #8C8F94; border-radius: 9px; background: #fff; color: var(--wp-text); font: 400 14px/1.2 var(--font); transition: border-color .15s, box-shadow .2s; }
.wpa-input:hover { border-color: #646970; }
.wpa-input:focus { outline: none; border-color: var(--wp-blue); box-shadow: 0 0 0 1px var(--wp-blue), 0 0 0 5px rgba(34, 113, 177, .14); }
.wpa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.wpa-swatches { height: 40px; margin-top: 6px; display: flex; align-items: center; gap: 9px; }
.wpa-swatch { position: relative; flex: none; width: 30px; height: 30px; cursor: pointer; }
.wpa-swatch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wpa-swatch span { position: absolute; inset: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .3s var(--spring), box-shadow .2s; }
.wpa-swatch:hover span { transform: scale(1.08); }
.wpa-swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px #fff, 0 0 0 4px var(--wp-blue); }
.wpa-swatch input:focus-visible + span { outline: 2px solid var(--wp-blue); outline-offset: 5px; }

.wpa-toast { position: absolute; left: 50%; top: 82px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 11px; border-radius: 12px; background: var(--wp-dark); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translate(-50%, -10px) scale(.97); pointer-events: none; transition: opacity .25s var(--ease), transform .45s var(--spring), visibility 0s .45s; }
.wpa-toast svg { flex: none; }
.wpa-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .45s var(--spring), visibility 0s; }

/* превью сайта клиента */
.wpa-view { min-width: 0; display: flex; padding: 22px 24px 26px 4px; }
.wpa-view__frame { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #FBFAF7; box-shadow: 0 0 0 1px rgba(29, 35, 39, .08), 0 24px 46px -24px rgba(29, 35, 39, .45); }
.wpa-view__bar { height: 38px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--wp-line); font-size: 12.5px; color: #50575E; white-space: nowrap; }
.wpa-view__live { width: 7px; height: 7px; border-radius: 50%; background: var(--wp-ok); box-shadow: 0 0 0 3px rgba(0, 163, 42, .15); }

.wpa-site { --site-accent: #73D6FF; --site-ink: #131417; flex: 1; display: flex; flex-direction: column; padding: 18px 24px 24px; container-type: inline-size; background: radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--site-accent) 14%, transparent), transparent 70%), #FBFAF7; color: #131417; }
.wpa-site__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 16px; white-space: nowrap; }
.wpa-site__logo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.wpa-site__logo i { width: 16px; height: 16px; border-radius: 5px; background: var(--site-accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: background .35s var(--ease); }
.wpa-site__nav { display: flex; gap: 16px; color: #50575E; }
.wpa-site__hero { flex: 1; margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(16px, 5cqi, 32px); align-items: center; }
.wpa-site__copy { min-width: 0; }
.wpa-site__title { font-size: clamp(22px, 5.3cqi, 36px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
.wpa-site__text { margin-top: 12px; max-width: 30ch; font-size: 14px; line-height: 20px; color: #50575E; overflow-wrap: anywhere; }
.wpa-site__btn { max-width: 100%; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 11px; background: var(--site-accent); color: var(--site-ink); font-size: 14px; line-height: 18px; font-weight: 600; overflow-wrap: anywhere; box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--site-accent) 90%, #000); transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
[data-wpa-out] { border-radius: 4px; transition: outline-color .2s, background-color .2s; outline: 2px dashed transparent; outline-offset: 4px; }
[data-wpa-out].is-linked { outline-color: rgba(34, 113, 177, .75); }
.wpa-site__btn:has(.is-linked) { outline: 2px dashed rgba(34, 113, 177, .75); outline-offset: 4px; }
.wpa-site__btn .is-linked { outline-color: transparent; }

@container (max-width: 400px) { .wpa-site__nav { display: none; } }

.wpa-plan { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(29, 35, 39, .12)); }
.wpa-plan__paper { fill: #fff; stroke: rgba(29, 35, 39, .08); }
.wpa-plan__tint { fill: var(--site-accent); opacity: .2; transition: fill .35s var(--ease); }
.wpa-plan__walls { fill: none; stroke: #131417; stroke-width: 4.5; stroke-linecap: square; stroke-linejoin: miter; }
.wpa-plan__leaf { fill: none; stroke: #131417; stroke-width: 2; stroke-linecap: round; }
.wpa-plan__door { fill: none; stroke: var(--site-accent); stroke-width: 1.6; stroke-dasharray: 3 3; transition: stroke .35s var(--ease); }
.wpa-plan__thing { fill: none; stroke: #8C8F94; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* подсказка в шапке группы полей — только там, где она помещается целиком */
@container (max-width: 1399px) { .wpa-box__hint { display: none; } }

/* ---------- Широкие: 1800+ — окно выше и просторнее ---------- */
@media (min-width: 1800px) {
  .wpa__body { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.12fr); }
  .wpa-edit { padding: 28px 32px 32px 36px; gap: 22px; }
  .wpa-view { padding: 28px 32px 32px 4px; }
  .wpa-box__body { gap: 16px; padding: 18px 22px 24px; }
  .wpa-site { padding: 22px 32px 30px; }
}

/* ---------- 1024–1279 и планшет: заголовок в три строки, меню админки свёрнуто в иконки ---------- */
@media (max-width: 1279px) {
  .wph__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wph__title { font-size: clamp(36px, 5.5cqi, 60px); line-height: 1.04; }
  .wph__l { display: block; }
  .wph__text { font-size: 16.5px; line-height: 25px; }
  .wpa__body { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.05fr); }
  .wpa-menu { padding-top: 8px; }
  .wpa-menu__item, .wpa-menu__fold { justify-content: center; padding: 0; }
  .wpa-menu__label, .wpa-menu__sub { display: none; }
  .wpa-menu__item.is-current::after { border-width: 6px; margin-top: -6px; }
  .wpa-menu__fold svg { transform: scaleX(-1); }
  .wpa-edit { padding: 20px 18px 22px 22px; gap: 16px; }
  .wpa-view { padding: 20px 20px 22px 2px; }
  .wpa-box__hint { display: none; }
  .wpa-site { padding: 16px 20px 20px; }
}
@media (max-width: 1023px) {
  .wpa__chrome { padding: 0 96px; }
  .wpa-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wpa-site__hero { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .wpa-plan { width: min(100%, 220px); }
}

/* ---------- Телефон: заголовок, кнопка, затем компактная админка — поле и превью колонкой, меню скрыто ---------- */
@media (max-width: 767px) {
  .wph__head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .wph__status { gap: 8px 16px; }
  .wph__title { margin-top: 20px; font-size: clamp(30px, 11cqi, 46px); line-height: 1.06; }
  .wph__text { font-size: 16px; line-height: 24px; }
  .wph__bottom { margin-top: 24px; gap: 16px 18px; }
  .wph__stage { margin-top: 44px; }
  .wpa-cube { width: clamp(84px, 26cqi, 120px); top: -40px; right: -10px; }
  .wpa { border-radius: 18px; }
  .wpa__chrome { height: 40px; justify-content: flex-start; padding: 0 12px 0 60px; }
  .wpa__dots { left: 14px; gap: 6px; }
  .wpa__dots i { width: 9px; height: 9px; }
  .wpa__url { height: 26px; padding: 0 10px; font-size: 12px; max-width: calc(100% - 64px); }
  .wpa__path { display: none; }
  .wpa__bar { height: 30px; font-size: 12px; }
  .wpa__bar-item--add { display: none; }
  .wpa__body { grid-template-columns: minmax(0, 1fr); }
  .wpa-menu { display: none; }
  .wpa-edit { padding: 14px 14px 12px; gap: 12px; }
  .wpa-edit__top { min-height: 0; gap: 10px; }
  .wpa-edit__crumb { font-size: 11.5px; line-height: 14px; }
  .wpa-edit__title { font-size: 19px; line-height: 24px; }
  .wpa-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .wpa-box { border-radius: 12px; }
  .wpa-box__head { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .wpa-box__body { padding: 12px 14px 14px; gap: 12px; }
  .wpa-field--text, .wpa-field--btn { display: none; }
  .wpa-field--accent { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .wpa-swatches { margin-top: 0; height: 32px; gap: 8px; }
  .wpa-swatch { width: 26px; height: 26px; }
  .wpa-field__label code { display: none; }
  .wpa-input { height: 42px; font-size: 16px; } /* 16 px — iOS не зумит поле при фокусе */
  .wpa-toast { top: 64px; font-size: 13px; padding: 8px 14px 8px 9px; }
  .wpa-view { padding: 0 14px 14px; }
  .wpa-view__frame { border-radius: 12px; }
  .wpa-view__bar { height: 32px; font-size: 12px; }
  .wpa-site { padding: 14px 16px 18px; }
  .wpa-site__nav, .wpa-plan { display: none; }
  .wpa-site__hero { margin-top: 14px; }
  .wpa-site__title { font-size: clamp(22px, 8cqi, 28px); }
  .wpa-site__text { margin-top: 8px; font-size: 13.5px; line-height: 19px; }
  .wpa-site__btn { margin-top: 14px; min-height: 38px; font-size: 13.5px; }
}
@media (max-width: 359px) {
  .wpa-box__acf { display: none; }
  .wpa-swatches { gap: 6px; }
  .wpa-swatch { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wpa-cube { will-change: auto; }
  .wpa-btn.is-busy::after { animation: none; }
}

/* Куб WordPress с параллаксом выходил за правый край окна на 3–7 px — страница ездила вбок. Режем по ширине секции, по вертикали куб свободен */
.hero--wp { overflow-x: clip; }