/* ============================================
   Лендинг спецпроекта
   Figma: sLynzewLWCLOMbx9WOloJl, «Лендинг» 7705:1813
   Кремовые панели (max 1530) поверх line-art паттерна.
   ============================================ */

.sp-landing {
  background: var(--c-cream) url("../img/landing/bg-pattern.png") top center / 100% auto repeat-y;
  padding-block: 80px;
}

.sp-panel {
  background: rgba(239, 237, 232, 0.8);
  margin-inline: auto;
  max-width: 1530px;
  padding: 80px 40px;
  position: relative;
  width: 100%;
}

/* ---------- Общая типографика секций ---------- */

.sp-label {
  color: var(--c-terracotta-dark);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  gap: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-title {
  color: var(--c-black);
  font-family: var(--font-serif-text);
  font-size: clamp(32px, 2.92vw, 56px);
  font-weight: 400;
  line-height: 1.1;
}

.sp-text {
  color: var(--c-black);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.sp-text p + p {
  margin-top: 16px;
}

.sp-lead {
  color: var(--c-black);
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

/* ---------- Hero ---------- */

.sp-hero {
  padding-top: 40px;
}

.sp-hero .breadcrumbs {
  color: var(--c-gray);
  margin-bottom: 32px;
}

.sp-hero .breadcrumbs__current {
  color: var(--c-terracotta-dark);
}

.sp-hero__card {
  aspect-ratio: 1450 / 908;
  display: flex;
  flex-direction: column;
  max-height: 908px;
  min-height: 420px;
  overflow: hidden;
  padding: 32px;
  position: relative;
  width: 100%;
}

/* Рубрики поверх обложки — вверху карточки, как в геро́е статьи; контент
   прижат к низу через margin-top: auto (бейджей может и не быть). */
.sp-hero__tags {
  color: var(--c-cream);
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.sp-hero__photo {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: 50% 65%;
  position: absolute;
  width: 100%;
}

.sp-hero__card::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 75%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.sp-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.sp-hero__title {
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.92vw, 56px);
  font-stretch: 75%;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.sp-hero__title em {
  font-stretch: 100%;
  font-style: italic;
}

.sp-hero__intro {
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  gap: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 916px;
}

.sp-hero__intro p + p {
  margin-top: 16px;
}

/* ---------- Глава ---------- */

.sp-chapter__grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.sp-chapter__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 40px;
  min-width: 300px;
}

.sp-chapter__body .sp-title {
  margin-top: 0;
}

.sp-chapter__body .sp-text {
  margin-top: -24px; /* заголовок и текст в макете через 16px при gap 40 у метки */
}

.sp-chapter--wide .sp-chapter__body {
  margin-bottom: 80px;
}

.sp-chapter__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  margin-top: 80px;
}

.sp-chapter__cols-text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 32px;
  min-width: 300px;
}

/* ---------- Видео-фасады ---------- */

.sp-video {
  display: block;
  overflow: hidden;
  position: relative;
}

.sp-video img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.sp-video--horizontal {
  flex: 1 0 0;
  height: 418px;
  min-width: 300px;
}

.sp-video--vertical {
  flex-shrink: 0;
  height: 715px;
  width: 598px;
}

.sp-video--wide {
  height: 762px;
  width: 100%;
}

.sp-video__play {
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}

.sp-video__play img {
  height: 100px;
  position: static;
  width: 100px;
}

.sp-video__time {
  background: var(--c-dark-blue);
  border-radius: 8px;
  bottom: 24px;
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px;
  position: absolute;
  right: 24px;
  text-transform: uppercase;
}

/* ---------- Терракотовая цитата ---------- */

.sp-quote {
  align-items: center;
  background: var(--c-terracotta-dark);
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 40px;
  max-width: 752px;
  min-width: 300px;
  padding: 40px 32px;
}

.sp-quote__line {
  align-items: center;
  display: flex;
  gap: 16px;
  width: 100%;
}

.sp-quote__line img {
  height: 25px;
  width: 41px;
}

.sp-quote__line::after {
  border-top: 1px solid rgba(239, 237, 232, 0.4);
  content: "";
  flex: 1;
}

.sp-quote__line--bottom {
  flex-direction: row-reverse;
}

.sp-quote__text {
  color: var(--c-cream);
  font-family: var(--font-serif-text);
  font-size: 34px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  width: 100%;
}

/* Цитата под текстом главы (вертикальный формат) */
.sp-chapter__body .sp-quote {
  flex: none;
  margin-top: 40px;
  width: 100%;
}

/* ---------- Карусель ---------- */

.sp-carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sp-carousel__head {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

.sp-carousel__row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.sp-carousel__row .sp-text {
  flex: 1 0 0;
  min-width: 300px;
}

.sp-carousel .sp-cards {
  margin-top: 40px;
}

.sp-arrows {
  display: flex;
  flex-shrink: 0;
  gap: 32px;
}

.sp-arrows__btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

/* Hover стрелок по «Arrow button set» кита */
.sp-arrows__btn:hover {
  opacity: 0.6;
}

.sp-arrows__btn img {
  display: block;
  height: 24px;
  width: 56px;
}

/* Из фигмы обе стрелки экспортируются «влево» (правая в макете — трансформ
   контейнера, который экспорт не переносит) — зеркалим правую на месте. */
.sp-arrows__btn[data-carousel-next] img {
  transform: scaleX(-1);
}

.sp-cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sp-cards::-webkit-scrollbar {
  display: none;
}

.sp-card {
  display: block;
  flex-shrink: 0;
  height: 674px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  width: 442px;
}

.sp-card__photo {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.sp-card__overlay {
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 50%);
  display: flex;
  gap: 30px;
  inset: 0;
  padding: 32px;
  position: absolute;
}

.sp-card__caption {
  color: var(--c-cream);
  flex: 1 0 0;
  font-family: var(--font-serif-text);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.sp-card__time {
  background: var(--c-light-gray);
  border-radius: 4px;
  color: var(--c-gray);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: italic;
  padding: 4px 8px;
}

.sp-card__play {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sp-card__play img {
  height: 65px;
  width: 65px;
}

/* ---------- Чек-лист ---------- */

.sp-checklist__card {
  background: var(--c-white);
  padding: 104px;
}

.sp-checklist__title {
  margin-bottom: 80px;
}

.sp-checklist__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.sp-checklist__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 300px;
}

.sp-checklist__item {
  align-items: center;
  color: #000;
  display: flex;
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
  gap: 16px;
  padding-block: 16px;
}

.sp-checklist__item::before {
  background: var(--c-terracotta-dark);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 15px;
  width: 15px;
}

.sp-checklist__item + .sp-checklist__item {
  border-top: 1px solid rgba(26, 12, 4, 0.15);
}

/* ---------- Вердикт ---------- */

.sp-verdict {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.sp-verdict__grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  justify-content: center;
}

.sp-verdict__photo {
  flex: 1 0 0;
  height: 540px;
  min-width: 300px;
  position: relative;
}

.sp-verdict__photo img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.sp-verdict__result {
  align-items: center;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 32px;
  min-width: 300px;
}

.sp-verdict__paw {
  height: 374px;
  position: relative;
  width: 395px;
}

.sp-verdict__paw-img {
  inset: 0;
  height: 100%;
  object-fit: contain;
  position: absolute;
  transform: rotate(-17deg);
  width: 100%;
}

/* Оценка по пиксельному замеру макета (тело лендинга в фигме флаттенуто,
   нод нет): центр цифр = 50%/67% лапы, «9/» и «10» на одной базовой линии,
   кегли 2:1, цвет Dark brown. */
.sp-verdict__score {
  color: var(--c-dark-brown);
  font-family: var(--font-serif-text);
  font-size: 72px;
  left: 59%; /* центр подушечки живой лапы — правее геометрического центра контейнера */
  position: absolute;
  top: 67%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.sp-verdict__score-big {
  font-size: 80px;
}

.sp-verdict__score-small {
  font-size: 80px;
}

.sp-verdict__caption {
  text-align: center;
}

.sp-verdict__subtitle {
  color: var(--c-terracotta-dark);
  display: block;
  font-family: var(--font-serif-text);
  font-size: 40px;
  font-weight: 400;
}

.sp-verdict__text {
  color: var(--c-black);
  display: block;
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
  margin-top: 8px;
}

/* ---------- Тёмный CTA ---------- */

.sp-cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.sp-cta__card {
  background: var(--c-dark-gray, #222);
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 104px;
  width: 100%;
}

.sp-cta__label {
  margin-inline: auto;
  max-width: 1020px;
  width: 100%;
}

.sp-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-inline: auto;
  max-width: 1020px;
  width: 100%;
}

.sp-cta__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 32px;
  max-width: 753px;
  min-width: 300px;
}

.sp-cta__title {
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-size: clamp(36px, 2.92vw, 56px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.sp-cta__subtitle {
  color: var(--c-white);
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
}

.sp-cta__text {
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-top: -16px;
}

.sp-cta__aside {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 32px;
  width: 242px;
}

.sp-cta__qr {
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.sp-cta__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
}

.sp-cta__social {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--c-terracotta-dark);
  display: flex;
  flex: 1 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  justify-content: center;
  max-width: 75px;
  min-width: 75px;
  padding: 8px 24px;
  transition: border-color 0.2s ease;
}

.sp-cta__social:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.sp-cta__btn {
  align-items: center;
  background: var(--c-terracotta-dark);
  color: var(--c-cream);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 53px;
  letter-spacing: 0.04em;
  padding: 16px 32px;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.sp-cta__btn:hover {
  background: #94492c;
}

.sp-cta__btn img {
  height: 15px;
  width: 9px;
}

/* ---------- Fallback (записи без конструктора) ---------- */

.sp-fallback {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.4;
}

/* ---------- Line-art декор — координаты ИЗ МАКЕТА (узлы 7729:9313…9341) ----------
   Позиции в макете абсолютные к странице; здесь пересчитаны в привязку к секциям
   ДЕМО-порядка (nth-of-type). При перестановке секций декор останется по индексам. */

.sp-panel::before {
  content: none;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* d1 — у низа hero, по центру (макет: top 1121, left 50%+12) */
.sp-landing > section:nth-of-type(1)::before {
  background: url("../img/landing/doodle-1.svg") center / contain no-repeat;
  bottom: -21px;
  content: "";
  height: 60px;
  left: calc(50% + 12px);
  width: 85px;
}

/* d2 — низ главы #1, правая треть (макет: top 1729, rotate 18.82°) */
.sp-landing > section:nth-of-type(2)::before {
  background: url("../img/landing/doodle-2.svg") center / contain no-repeat;
  bottom: -10px;
  content: "";
  height: 69px;
  left: 72.5%;
  transform: rotate(18.82deg);
  width: 72px;
}

/* d3 — низ главы #2, левая треть (макет: top 2813, rotate −11.15°) */
.sp-landing > section:nth-of-type(3)::before {
  background: url("../img/landing/doodle-3.svg") center / contain no-repeat;
  bottom: -17px;
  content: "";
  height: 50px;
  left: 33.2%;
  transform: rotate(-11.15deg);
  width: 72px;
}

/* d4 — верх главы #4, слева (макет: top 4009, rotate −16.46°) */
.sp-landing > section:nth-of-type(5)::before {
  background: url("../img/landing/doodle-4.svg") center / contain no-repeat;
  content: "";
  height: 59px;
  left: 18.8%;
  top: -30px;
  transform: rotate(-16.46deg);
  width: 85px;
}

/* d5 — верх главы #5 (макет: top 4595, rotate −12.73°) */
.sp-landing > section:nth-of-type(6)::before {
  background: url("../img/landing/doodle-5.svg") center / contain no-repeat;
  content: "";
  height: 69px;
  left: 44.25%;
  top: 0;
  transform: rotate(-12.73deg);
  width: 72px;
}

/* d6 — верх «Дневника ревизора» (макет: top 6371, rotate 6.71°) */
.sp-landing > section:nth-of-type(7)::before {
  background: url("../img/landing/doodle-6.svg") center / contain no-repeat;
  content: "";
  height: 80px;
  left: 25.7%;
  top: 2px;
  transform: rotate(6.71deg);
  width: 85px;
}

/* d7 — низ «Вердикта», по центру (макет: top 8933, rotate −13.47°) */
.sp-landing > section:nth-of-type(9)::before {
  background: url("../img/landing/doodle-7.svg") center / contain no-repeat;
  bottom: -81px;
  content: "";
  height: 80px;
  left: 49.3%;
  transform: rotate(-13.47deg);
  width: 85px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1280px) {
  .sp-panel {
    padding: 64px 32px;
  }

  .sp-video--vertical {
    height: 574px;
    width: 480px;
  }

  .sp-video--wide {
    height: 560px;
  }

  .sp-card {
    height: 580px;
    width: 380px;
  }

  .sp-checklist__card,
  .sp-cta__card {
    padding: 64px;
  }

  .sp-chapter__grid,
  .sp-chapter__cols,
  .sp-verdict__grid {
    gap: 48px;
  }
}

@media (max-width: 1024px) {
  .sp-label {
    font-size: 24px;
  }

  .sp-video--vertical {
    aspect-ratio: 598 / 715;
    height: auto;
    max-width: 480px;
    width: 100%;
  }

  .sp-chapter--vertical .sp-chapter__grid {
    flex-direction: column;
  }

  .sp-cta__row {
    flex-direction: column;
  }

  .sp-cta__aside {
    width: 242px;
  }
}

@media (max-width: 768px) {
  .sp-landing {
    padding-block: 40px;
  }

  .sp-panel {
    padding: 60px 24px;
  }

  .sp-hero {
    padding-top: 24px;
  }

  /* Ступени карточки — те же, что у hero главной: 768 → 480/20, 560 → 327:702/24 */
  .sp-hero__card {
    min-height: 480px;
    padding: 20px;
  }

  .sp-quote__text {
    font-size: 26px;
  }

  .sp-lead,
  .sp-checklist__item,
  .sp-cta__subtitle,
  .sp-verdict__text {
    font-size: 24px;
  }

  .sp-video--horizontal {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
  }

  .sp-video--wide {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .sp-card {
    height: 460px;
    width: 300px;
  }

  .sp-checklist__card,
  .sp-cta__card {
    padding: 40px 24px;
  }

  .sp-checklist__cols {
    flex-direction: column;
    gap: 0;
  }

  .sp-verdict__paw {
    height: 280px;
    width: 296px;
  }

  .sp-verdict__score {
    font-size: 54px;
  }

  .sp-verdict__score-big {
    font-size: 60px;
  }

  .sp-verdict__score-small {
    font-size: 60px;
  }

  .sp-text,
  .sp-hero__intro,
  .sp-cta__text {
    font-size: 16px;
  }

  .sp-panel::before {
    height: 60px;
    width: 64px;
  }
}

@media (max-width: 560px) {
  /* Пропорция карточки мобильного макета главной 327×702; десктопный потолок
     908 при этом резал бы высоту — снимаем */
  .sp-hero__card {
    aspect-ratio: 327 / 702;
    max-height: none;
    min-height: 0;
    padding: 24px;
  }

  .sp-label {
    font-size: 20px;
  }

  .sp-title {
    font-size: 28px;
  }

  .sp-card {
    height: 400px;
    width: 260px;
  }

  .sp-cards {
    gap: 16px;
  }

  .sp-cta__btn {
    justify-content: center;
    width: 100%;
  }

  .sp-verdict__subtitle {
    font-size: 30px;
  }
}

/* ---------- Боковые поля на средних экранах ----------
   max-width: 1530px держит поля только когда экран шире 1530. Ниже панель
   растягивается на всю ширину, и от полей остаётся фиксированный padding:
   на 1440 это 40px = 2.8% против 12% в макете — контент почти упирался в края
   (п. 21 баг-листа: «боковые поля очень узкие»). Здесь поле растёт вместе
   с экраном, сохраняя единый ритм ~7%. Вертикальные отступы не трогаем —
   их задают брейкпоинты выше. */
@media (min-width: 769px) and (max-width: 1530px) {
  .sp-panel {
    padding-inline: clamp(32px, 7vw, 110px);
  }
}

/* ============ Анкета конкурса ============ */
/* Макет 5I1FqrBj0f4h5XuA6PW5KJ, тело лендинга 7728:9235 (панель 1450×1460).
   Замеры: фото 635×1164 (центрировано по вертикали), колонка формы 600,
   зазор между ними 64, поля высотой 38 с шагом 83, кнопка 228×53.
   Правый внутренний отступ панели в макете на 9px меньше левого — так и
   оставлено, иначе колонка формы уезжает от своего места на 9px. */

.sp-contest__card {
  background: var(--c-dark-gray);
  display: grid;
  grid-template-columns: 635px 600px;
  gap: 64px;
  padding: 80px 71px 80px 80px;
  width: 100%;
}

.sp-contest__photo {
  align-self: center; /* фото короче колонки формы: в макете 148 сверху и снизу */
}

/* height:auto обязателен: wp_get_attachment_image печатает атрибут height,
   и без него заданный aspect-ratio молча отключается. */
.sp-contest__photo img {
  aspect-ratio: 635 / 1164;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.sp-contest__title {
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 54px;
  margin: 0;
}

.sp-contest__lead {
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  margin: 20px 0 0;
}

/* ---------- Форма ---------- */

.contest-form {
  margin-top: 35px;
}

.contest-form__field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Только прямые дети формы: без «>» правило цепляло и поля ВНУТРИ ряда
   e-mail/телефон — второе из них съезжало на 17px ниже первого. */
.contest-form > .contest-form__field + .contest-form__field,
.contest-form > .contest-form__row + .contest-form__field,
.contest-form > .contest-form__field + .contest-form__row {
  margin-top: 17px;
}

/* E-mail и телефон стоят в ряд: 600 = два поля по 284 и зазор 32. */
.contest-form__row {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
}

.contest-form__label {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 19px;
  margin: 0;
  text-transform: uppercase;
}

.contest-form__input,
.contest-form__textarea {
  background: transparent;
  border: 1px solid #4e4e4e; /* макет: рамка полей на тёмном фоне */
  color: var(--c-cream);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 0 12px;
  width: 100%;
}

.contest-form__input {
  height: 38px;
}

.contest-form__textarea {
  height: 117px;
  padding: 10px 12px;
  resize: vertical;
}

.contest-form__textarea--short {
  height: 67px;
}

.contest-form__input::placeholder,
.contest-form__textarea::placeholder {
  color: #4e4e4e;
}

.contest-form__input:focus-visible,
.contest-form__textarea:focus-visible {
  border-color: var(--c-terracotta);
  outline: none;
}

/* ---------- Загрузка фотографий ---------- */

/* У блока с фотографиями подпись отстоит от зоны на 19, а не на 9 как
   у обычных полей (макет), поэтому добавляем разницу к общему зазору поля. */
.contest-form__upload {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  margin-top: 10px;
}

.contest-form__dropzone {
  align-items: center;
  border: 1px dashed #4e4e4e;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  height: 131px;
  justify-content: center;
  width: 131px;
}

.contest-form__dropzone:hover,
.contest-form__dropzone.is-filled {
  border-color: var(--c-terracotta);
}

/* Поле остаётся в потоке фокуса, но не видно — рамку подсвечиваем на зоне. */
.contest-form__dropzone input[type="file"] {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.contest-form__dropzone:focus-within {
  border-color: var(--c-terracotta);
}

.contest-form__dropzone img {
  height: 24px;
  width: 24px;
}

.contest-form__dropzone-text {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contest-form__hint {
  color: var(--c-light-gray);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

/* ---------- Согласие и отправка ---------- */

.contest-form__agree {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.contest-form__agree input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

/* ---------- Выпадающий мультивыбор (номинации) ---------- */

.contest-form__select {
  position: relative;
}

/* Кнопка-«поле» повторяет вид contest-form__input */
.contest-form__select-btn {
  align-items: center;
  background: transparent;
  border: 1px solid #4e4e4e;
  color: #4e4e4e; /* как placeholder, пока ничего не выбрано */
  cursor: pointer;
  display: flex;
  font-family: var(--font-sans);
  font-size: 16px;
  gap: 12px;
  height: 38px;
  justify-content: space-between;
  padding: 0 12px;
  text-align: left;
  width: 100%;
}

.contest-form__select.is-filled .contest-form__select-btn {
  color: var(--c-cream);
}

/* wp-fixes.css гасит рамку любых кнопок на hover/focus (сброс дефолтов _s) —
   у кнопки-«поля» рамку возвращаем; hover — терракотой, как у дропзоны. */
.contest-form__select-btn:hover,
.contest-form__select-btn:focus,
.contest-form__select-btn:active {
  border-color: var(--c-terracotta);
}

.contest-form__select-btn img {
  flex-shrink: 0;
  height: 12px;
  transform: rotate(90deg); /* стрелка кнопок смотрит вправо — тут вниз */
  transition: transform 0.2s ease;
  width: 12px;
}

.contest-form__select-btn[aria-expanded="true"] img {
  transform: rotate(-90deg);
}

.contest-form__select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Атрибут hidden сам по себе бессилен против display:flex ниже. */
.contest-form__select-menu[hidden] {
  display: none;
}

.contest-form__select-menu {
  background: var(--c-dark-gray, #222222);
  border: 1px solid #4e4e4e;
  border-top: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 3; /* выше соседних полей формы */
}

.contest-form__option {
  align-items: center;
  color: var(--c-cream);
  cursor: pointer;
  display: flex;
  font-family: var(--font-sans);
  font-size: 16px;
  gap: 12px;
  padding: 10px 12px;
}

.contest-form__option:hover {
  background: rgba(239, 237, 232, 0.08);
}

.contest-form__option input {
  height: 1px;
  margin: -1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.contest-form__option input:checked + .contest-form__agree-box::after {
  border-bottom: 2px solid var(--c-terracotta);
  border-right: 2px solid var(--c-terracotta);
  content: "";
  height: 9px;
  left: 5px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  width: 5px;
}

.contest-form__option input:focus-visible + .contest-form__agree-box {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 2px;
}

.contest-form__agree-box {
  border: 1px solid #4e4e4e;
  flex-shrink: 0;
  height: 16px;
  position: relative;
  width: 16px;
}

.contest-form__agree input:checked + .contest-form__agree-box::after {
  border-bottom: 2px solid var(--c-terracotta);
  border-right: 2px solid var(--c-terracotta);
  content: "";
  height: 9px;
  left: 5px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  width: 5px;
}

.contest-form__agree input:focus-visible + .contest-form__agree-box {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 2px;
}

.contest-form__agree-text {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 19px;
  text-transform: uppercase;
}

.contest-form__agree-text a {
  color: inherit;
  text-decoration: none;
}

.contest-form__agree-text a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contest-form__consent {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 16px;
  margin: 22px 0 0;
  text-transform: uppercase;
}

.contest-form__consent a {
  color: inherit;
}

.contest-form__submit {
  margin-top: 18px;
  min-width: 228px;
}

/* Кнопка «Положение о конкурсе» под заявкой — терракотовая подложка кита. */
.contest-form__regulations {
  margin-left: 16px;
  margin-top: 18px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1660px) {
  .sp-contest__card {
    grid-template-columns: minmax(0, 635fr) minmax(0, 600fr);
    padding: 80px;
  }
}

@media (max-width: 1024px) {
  .sp-contest__card {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
    padding: 64px 32px;
  }

  .sp-contest__photo img {
    aspect-ratio: 16 / 9; /* вертикальный кадр в одну колонку занял бы весь экран */
  }
}

@media (max-width: 560px) {
  .sp-contest__card {
    padding: 40px 24px;
  }

  .sp-contest__title {
    font-size: 28px;
    line-height: 36px;
  }

  .sp-contest__lead {
    font-size: 16px;
    line-height: 24px;
  }

  .contest-form__row {
    gap: 17px;
    grid-template-columns: minmax(0, 1fr);
  }

  .contest-form__upload {
    flex-direction: column;
    gap: 16px;
  }

  .contest-form__submit {
    width: 100%;
  }
}