/* 1Lag / Написать гайд. Все правила изолированы внутри .wg-page. */
.wg-page { padding-top: 30px; padding-bottom: 110px; min-width: 0; }
.wg-page, .wg-page * { box-sizing: border-box; }
.wg-page a { text-underline-offset: 3px; }
.wg-page a:focus-visible { outline: 2px solid var(--red, #e65762); outline-offset: 4px; }
.wg-page .wg-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; color: #c8bbbd; font-size: 14px; }
.wg-page .wg-breadcrumbs a { color: inherit; }
.wg-page .wg-hero { background: var(--card, #302a2d); border-radius: 13px; padding: clamp(25px, 4vw, 52px); }
.wg-page .wg-kicker { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--red, #e65762); font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.wg-page .wg-hero h1 { margin: 0 0 23px; font: 400 clamp(22px, 3vw, 37px)/1.55 "Press Start 2P", monospace; overflow-wrap: anywhere; }
.wg-page .wg-hero h1 span { color: var(--red, #e65762); }
.wg-page .wg-lead { max-width: 810px; margin: 0 0 29px; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.wg-page .wg-lead strong { color: var(--red, #e65762); }
.wg-page .wg-hero-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.wg-page .wg-reward { min-width: 230px; padding: 17px 20px; border-radius: 9px; background: rgba(0,0,0,.15); display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.wg-page .wg-reward span { color: #d4c7c9; font-size: 13px; }
.wg-page .wg-reward strong { color: var(--red, #e65762); font: 400 clamp(21px,2.2vw,28px)/1.5 "Press Start 2P", monospace; white-space: nowrap; }
.wg-page .wg-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 62px; padding: 15px 22px; border-radius: 9px; background: var(--red, #e65762); color: #fff; font: 400 12px/1.65 "Press Start 2P", monospace; text-decoration: none; text-align: center; transition: filter .2s ease; }
.wg-page .wg-button:hover { filter: brightness(1.15); }
.wg-page .wg-note { margin: 17px 0 0; color: #d4c7c9; font-size: 13px; }
.wg-page .wg-section { margin-top: 55px; }
.wg-page .wg-section h2, .wg-page .wg-final h2 { margin: 0 0 25px; font: 400 clamp(18px,2.3vw,26px)/1.55 "Press Start 2P", monospace; overflow-wrap: anywhere; }
.wg-page .wg-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.wg-page .wg-step { background: var(--card, #302a2d); padding: 25px; border-radius: 13px; min-width: 0; }
.wg-page .wg-step-number { color: var(--red, #e65762); font: 400 13px/1.4 "Press Start 2P", monospace; }
.wg-page .wg-step h3 { margin: 18px 0 13px; color: var(--red, #e65762); font: 400 15px/1.55 "Press Start 2P", monospace; }
.wg-page .wg-step p { margin: 0; font-size: 16px; line-height: 1.6; }
.wg-page .wg-step p a { color: var(--red, #e65762); }
.wg-page .wg-requirements { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: start; }
.wg-page .wg-requirements-heading p { font-size: 17px; line-height: 1.65; margin: 0; }
.wg-page .wg-list { margin: 0; padding: 0; list-style: none; }
.wg-page .wg-list li { position: relative; padding: 15px 0 15px 29px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 16px; line-height: 1.5; }
.wg-page .wg-list li::before { content: "✓"; position: absolute; top: 15px; left: 0; color: var(--red, #e65762); font-weight: bold; }
.wg-page .wg-final { margin-top: 55px; padding: clamp(25px,4vw,48px); background: var(--card, #302a2d); border-radius: 13px; }
.wg-page .wg-final h2 { max-width: 830px; }
.wg-page .wg-final > p:not(.wg-kicker):not(.wg-disclaimer) { font-size: 18px; line-height: 1.65; margin: 0 0 23px; }
.wg-page .wg-disclaimer { margin: 22px 0 0; color: #d4c7c9; font-size: 13px; line-height: 1.6; max-width: 850px; }
@media (max-width: 850px) { .wg-page .wg-steps, .wg-page .wg-requirements { grid-template-columns: 1fr; } .wg-page { padding-bottom: 75px; } }
@media (max-width: 560px) { .wg-page { padding-top: 20px; padding-bottom: 65px; } .wg-page .wg-hero, .wg-page .wg-final { padding: 23px 17px; } .wg-page .wg-hero h1 { font-size: 20px; line-height: 1.65; } .wg-page .wg-hero-actions { flex-direction: column; } .wg-page .wg-reward { min-width: 0; } .wg-page .wg-reward strong { font-size: 21px; } .wg-page .wg-button { width: 100%; font-size: 10px; } .wg-page .wg-section { margin-top: 40px; } .wg-page .wg-step { padding: 21px 18px; } .wg-page .wg-step p, .wg-page .wg-list li { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .wg-page .wg-button { transition: none; } }

/* 1LAG-WG-IMAGE-PREVIEW */
/* Дополнительный первый экран: стили ограничены новым блоком. */
.wg-page .wg-visual-preview {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(16px, 3.5vw, 46px);
  align-items: center;
  margin-bottom: 26px;
  padding: clamp(18px, 3vw, 38px);
  background: var(--card, #302a2d);
  border-radius: 13px;
  overflow: hidden;
}
.wg-page .wg-visual-preview-art { min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.wg-page .wg-visual-preview-art img { display: block; width: min(100%, 505px); height: auto; object-fit: contain; image-rendering: auto; }
.wg-page .wg-visual-preview-copy { min-width: 0; }
.wg-page .wg-visual-preview-kicker { color: var(--red, #e65762); font-size: 12px; text-transform: uppercase; font-weight: 700; margin: 0 0 18px; }
.wg-page .wg-visual-preview-copy h2 { font: 400 clamp(19px, 2.5vw, 31px)/1.55 "Press Start 2P", monospace; margin: 0 0 23px; overflow-wrap: anywhere; }
.wg-page .wg-visual-preview-copy h2 span, .wg-page .wg-visual-preview-copy strong { color: var(--red, #e65762); }
.wg-page .wg-visual-preview-copy > p:not(.wg-visual-preview-kicker):not(.wg-visual-preview-footnote) { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; margin: 0 0 25px; }
.wg-page .wg-visual-preview-link { display: inline-flex; align-items: center; justify-content: center; padding: 17px 22px; min-height: 58px; border-radius: 9px; background: var(--red, #e65762); color: #fff; font: 400 11px/1.7 "Press Start 2P", monospace; text-decoration: none; text-align: center; }
.wg-page .wg-visual-preview-link:hover { filter: brightness(1.12); }
.wg-page .wg-visual-preview-footnote { font-size: 12px; line-height: 1.5; color: #d4c7c9; margin: 14px 0 0; }
@media (max-width: 780px) {
  .wg-page .wg-visual-preview { grid-template-columns: 1fr; gap: 12px; }
  .wg-page .wg-visual-preview-art img { width: min(100%, 390px); }
  .wg-page .wg-visual-preview-copy h2 { font-size: clamp(19px, 5vw, 27px); }
}
@media (max-width: 560px) {
  .wg-page .wg-visual-preview { padding: 20px 16px; }
  .wg-page .wg-visual-preview-link { width: 100%; font-size: 10px; }
}

/* WG-VISUAL-TRANSPARENT-OVERRIDE-V1 */
.wg-page .wg-visual-preview {
  background: transparent;
}

/* 1LAG-REWARD-BADGE-V1 */
/* Only the new image-and-copy hero. The remaining sections stay untouched. */
.wg-page .wg-visual-preview { background: transparent; }
.wg-page .wg-visual-preview-copy > p:not(.wg-visual-preview-kicker):not(.wg-visual-preview-footnote) { margin-bottom: 18px; }
.wg-page .wg-reward-art {
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(90px, 10vw, 135px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: url('/assets/img/write-guide-reward-bg.svg') center / 100% 100% no-repeat;
}
.wg-page .wg-reward-art-text {
  display: block;
  color: #fff;
  font: 400 clamp(20px, 2.7vw, 36px)/1.5 "Press Start 2P", monospace;
  white-space: nowrap;
  text-shadow: 3px 4px 0 rgba(74, 14, 32, .65);
}
.wg-page .wg-visual-preview-footnote { margin-top: 15px; }
@media (max-width: 560px) {
  .wg-page .wg-reward-art { min-height: 88px; padding: 14px 10px; }
  .wg-page .wg-reward-art-text { font-size: clamp(16px, 4.1vw, 26px); }
}

/* 1LAG-REQUIREMENTS-IMAGE-V1 — только блок «Каким должен быть гайд?» */
.wg-page .wg-requirements {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 55px);
  align-items: center;
}
.wg-page .wg-requirements-art { min-width: 0; display: flex; justify-content: center; align-items: center; }
.wg-page .wg-requirements-art img { display: block; width: min(100%, 340px); height: auto; object-fit: contain; }
.wg-page .wg-requirements-content { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (max-width: 760px) {
  .wg-page .wg-requirements { grid-template-columns: 1fr; gap: 14px; }
  .wg-page .wg-requirements-art img { width: min(72%, 250px); }
}

/* 1LAG-FINAL-GAMER-V1 — изолированные стили нижнего блока. */
.wg-page .wg-final-with-gamer {
  background: transparent;
  padding: 35px 0 25px;
  overflow: hidden;
}
.wg-page .wg-final-with-gamer .wg-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3.2vw, 48px);
  align-items: center;
}
.wg-page .wg-final-with-gamer .wg-final-copy { min-width: 0; }
.wg-page .wg-final-with-gamer .wg-final-copy h2 {
  overflow-wrap: anywhere;
}
.wg-page .wg-final-with-gamer .wg-final-gamer-art {
  min-width: 0;
  align-self: end;
  display: flex;
  align-items: end;
  justify-content: center;
}
.wg-page .wg-final-with-gamer .wg-final-gamer-art img {
  display: block;
  width: min(100%, 540px);
  height: auto;
  image-rendering: auto;
}
.wg-page .wg-final-with-gamer .wg-final-pixel-cta {
  display: inline-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  min-height: 76px;
  max-width: 100%;
  min-width: min(100%, 310px);
  margin: 15px 0 14px;
  padding: 17px 24px;
  text-decoration: none;
  color: #fff;
  background: url('/assets/img/write-guide-final-button.svg') center / 100% 100% no-repeat;
  font: 400 clamp(10px, 1.25vw, 14px)/1.6 'Press Start 2P', monospace;
  text-align: center;
  text-shadow: 1px 3px 0 rgba(52, 9, 22, .5);
  transition: filter .15s ease;
}
.wg-page .wg-final-with-gamer .wg-final-pixel-cta:hover { filter: brightness(1.13); }
.wg-page .wg-final-with-gamer .wg-final-pixel-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.wg-page .wg-final-with-gamer .wg-disclaimer {
  font-size: 11px;
  line-height: 1.65;
  max-width: 570px;
}
@media (max-width: 760px) {
  .wg-page .wg-final-with-gamer { padding: 22px 0; }
  .wg-page .wg-final-with-gamer .wg-final-inner { grid-template-columns: 1fr; gap: 4px; }
  .wg-page .wg-final-with-gamer .wg-final-gamer-art { grid-row: 2; }
  .wg-page .wg-final-with-gamer .wg-final-gamer-art img { width: min(90%, 390px); }
}


/* Нижний блок — мобильная версия */

@media (max-width: 760px) {

    .wg-page .wg-final-with-gamer .wg-final-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Позволяем расположить картинку между текстовыми элементами */
    .wg-page .wg-final-with-gamer .wg-final-copy {
        display: contents;
    }

    /* Заголовок */
    .wg-page .wg-final-with-gamer .wg-final-copy h2 {
        order: 1;
        margin-bottom: 0;
    }

    /* Картинка сразу после заголовка */
    .wg-page .wg-final-with-gamer .wg-final-gamer-art {
        order: 2;
        grid-row: auto;
        justify-content: center;
    }

    .wg-page .wg-final-with-gamer .wg-final-gamer-art img {
        width: min(90%, 390px);
        height: auto;
    }

    /* Описание и остальные текстовые элементы */
    .wg-page .wg-final-with-gamer .wg-final-copy > * {
        order: 3;
    }

    .wg-page .wg-final-with-gamer .wg-final-copy h2 {
        order: 1;
    }

    /* Кнопка по центру */
    .wg-page .wg-final-with-gamer .wg-final-pixel-cta {
        display: flex;
        justify-self: center;
        width: min(100%, 310px);
        margin: 15px auto;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 760px) {
    .wg-page .wg-final-with-gamer .wg-final-copy p {
        margin-top: 0;
        margin-bottom: 1px;
    }
}