/*
  Внутренние страницы: галерея, заказ, «прочий контент», список раздела, запись.
  Все размеры — в «пикселях макета» (--u), как и на главной. Ниже 1024px (телефоны и планшеты) — мобильная раскладка.
*/

/* ---------- Общее ---------- */
.page-card {
  width: calc(1533 * var(--u));
  min-height: calc(100vh - 208 * var(--u));
  margin: calc(54 * var(--u)) auto 0;
  padding: calc(70 * var(--u)) calc(63.5 * var(--u)) calc(160 * var(--u));
  border-radius: calc(54 * var(--u)) calc(54 * var(--u)) 0 0;
  background: var(--wine);
}

.page-title {
  font-size: calc(64 * var(--u));
  font-weight: 500;
  text-transform: uppercase;
}

.page-plain {
  width: calc(1406 * var(--u));
  margin: 0 auto;
  padding: calc(104 * var(--u)) 0 calc(200 * var(--u));
}

.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(242 * var(--u));
  height: calc(89 * var(--u));
  border: calc(8 * var(--u)) solid var(--cream);
  border-radius: calc(37 * var(--u));
  background: none;
  color: var(--cream);
  font: 400 calc(32 * var(--u)) / 1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.outline-btn:hover {
  background: var(--cream);
  color: var(--wine);
}

.empty-note {
  font-size: calc(28 * var(--u));
  font-weight: 300;
  text-align: center;
  opacity: 0.6;
}

/* ---------- Галерея ---------- */
.gallery-page {
  padding-left: calc(67.5 * var(--u));
  padding-right: calc(60.5 * var(--u));
}

.gallery-head h1 {
  width: calc(804 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 500;
  text-transform: uppercase;
}

.gallery-head {
  margin-left: calc(-4 * var(--u));
}

.gallery-lead,
.gallery-note {
  font-size: calc(32 * var(--u));
  font-weight: 300;
}

.gallery-lead {
  margin-top: calc(23 * var(--u));
}

.gallery-lead a {
  text-underline-offset: 0.15em;
}

.gallery-note {
  margin-top: calc(25 * var(--u));
  opacity: 0.33;
}

/* ---------- Заказ ---------- */
/* Верх страницы — «холст» с абсолютными координатами из Figma (y считается от верха страницы, шапка 154) */
.order-canvas {
  position: relative;
  --ox: calc(50% - 960 * var(--u));
  height: calc((5089 - 154) * var(--u));
  overflow-x: clip;
}

.order-canvas .abs {
  top: calc((var(--y) - 154) * var(--u));
}

.order-canvas > section,
.order-contacts,
.order-noncis {
  display: contents;
}

/* внутри плашек координаты считаются от плашки */
.order-canvas .plate .abs,
.order-canvas .chibi-plate .abs {
  top: calc(var(--y) * var(--u));
}

/* узор рисует js/order-pattern.js на всю ширину экрана */
.order-pattern {
  position: absolute;
  left: 0;
  top: calc((626 - 154) * var(--u));
  width: 100%;
  height: calc(2547 * var(--u));
  pointer-events: none;
  user-select: none;
}

.order-pattern-m {
  display: none;
}

.order-canvas h1 {
  width: calc(1121 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 500;
  text-transform: uppercase;
}

.order-contacts a,
.order-noncis a {
  display: block;
  transition: transform 0.2s, opacity 0.2s;
}

.order-contacts a[href]:hover,
.order-noncis a[href]:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}

.order-noncis p {
  font-size: calc(40 * var(--u));
  white-space: nowrap;
}

.order-canvas h2 {
  font-size: calc(64 * var(--u));
  font-weight: 600;
  text-align: center;
}

.price-label {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.plate > *,
.chibi-plate > * {
  --ox: 0px;
}

.plate {
  border-radius: calc(40 * var(--u));
  background: var(--cream);
  color: var(--wine);
}

.plate .head {
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1.1;
}

.plate .head small {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 300;
}

.plate .from,
.plate .price {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.price b {
  font-weight: 700;
}

.price {
  font-weight: 400 !important;
}

.plate .divider {
  width: calc(2 * var(--u));
  background: rgb(78 18 18 / 0.3);
}

.order-dude,
.order-chibi {
  max-width: none;
  pointer-events: none;
}

.chibi-plate,
.ref-panel,
.ask-box,
.extra-box {
  border-radius: calc(51 * var(--u));
  background: var(--cream);
  color: var(--wine);
}

.chibi-plate h3 {
  font-size: calc(64 * var(--u));
  font-weight: 600;
}

.chibi-plate .price {
  font-size: calc(36 * var(--u));
}

.chibi-plate p:not(.price) {
  font-size: calc(32 * var(--u));
  font-weight: 300;
}

.extra-box {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding: calc(45 * var(--u)) calc(37 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 300;
  line-height: 1.17;
}

.extra-box h3 {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.03;
  text-align: center;
}

.extra-box h3 + p {
  margin-top: calc(12 * var(--u));
}

.extra-box b {
  font-weight: 700;
}

.extra-box .later {
  margin-top: calc(26 * var(--u));
}

.ref-image {
  border: calc(8 * var(--u)) solid var(--cream);
  border-radius: calc(51 * var(--u));
  object-fit: cover;
  background: var(--cream);
}

.ref-text {
  display: flex;
  flex-direction: column;
  color: var(--wine);
  font-size: calc(32 * var(--u));
  font-weight: 300;
  line-height: 1.17;
}

.ref-text h3 {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  text-align: center;
}

.ref-text .ref-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(16 * var(--u));
  margin-top: calc(48 * var(--u));
}

.ref-text .ref-row:first-of-type {
  margin-top: calc(56 * var(--u));
}

.ref-text .ref-row b {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.ref-text .ref-row + p {
  margin-top: calc(28 * var(--u));
}

.ask-box {
  display: grid;
  place-items: center;
  font-size: calc(36 * var(--u));
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

/* Правила (обычный поток) */
.order-rules {
  width: calc(1364 * var(--u));
  margin: 0 auto;
  padding-bottom: calc(200 * var(--u));
  translate: calc(-8 * var(--u)) 0;
}

.order-rules h2 {
  text-align: center;
  font-size: calc(40 * var(--u));
  font-weight: 600;
  line-height: 1.05;
}

.order-rules h2 small {
  display: block;
  font-size: calc(22 * var(--u));
  font-weight: 300;
}

.order-rules .rules {
  display: flex;
  flex-direction: column;
  gap: calc(59 * var(--u));
  margin: calc(26 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.order-rules li,
.order-rules .needs p {
  font-size: calc(32 * var(--u));
  font-weight: 300;
  line-height: 1.15;
}

.order-rules b {
  font-weight: 700;
}

.order-rules .needs-title {
  margin-top: calc(155 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 700;
}

.order-rules .needs {
  display: flex;
  flex-direction: column;
  gap: calc(53 * var(--u));
  margin-top: calc(53 * var(--u));
  margin-left: calc(-30 * var(--u));
}

.order-rules .to-top {
  display: flex;
  justify-content: center;
  margin-top: calc(124 * var(--u));
}

/* «from» в английском прайсе длиннее, чем «от» */
html[lang='en'] .plate .from {
  left: calc(22 * var(--u));
  font-size: calc(30 * var(--u));
  /* шрифт мельче, чем у цены, — опускаем, чтобы совпала базовая линия */
  translate: 0 calc(9 * var(--u));
}

@media (max-width: 1023px) {
  html[lang='en'] .plate .from {
    font-size: 17px;
    translate: none;
  }
}

/* ---------- «Прочий контент» ---------- */
.content-intro {
  position: relative;
  width: calc(1406 * var(--u));
  margin: 0 auto;
  padding-top: calc(104 * var(--u));
}

.content-intro h1 {
  width: calc(1121 * var(--u));
}

.bubble-box {
  position: relative;
  /* ширина и высота подстраиваются под текст, но не шире макетных 1005 */
  width: fit-content;
  min-width: calc(420 * var(--u));
  max-width: calc(1005 * var(--u));
  margin: calc(72 * var(--u)) auto 0;
  padding: calc(41 * var(--u)) calc(61.5 * var(--u)) calc(50 * var(--u));
  border-radius: calc(51 * var(--u));
  background: var(--cream);
  color: var(--wine);
  font-size: calc(36 * var(--u));
  font-weight: 300;
  line-height: 0.93;
  text-align: center;
  overflow-wrap: anywhere;
}

.bubble-box p {
  white-space: pre-line;
}

.bubble-box .chat {
  position: absolute;
  right: calc(-56.5 * var(--u));
  top: calc(-47 * var(--u));
  width: calc(127 * var(--u));
  height: calc(127 * var(--u));
  max-width: none;
}

.content-intro .scroll-down {
  display: block;
  width: calc(36 * var(--u));
  height: calc(27 * var(--u));
  margin: calc(16 * var(--u)) auto 0;
}

.content-intro .scroll-down img {
  width: 100%;
  height: 100%;
  rotate: 180deg;
}

.content-sections {
  display: flex;
  flex-direction: column;
  gap: calc(194 * var(--u));
  padding: calc(108 * var(--u)) 0 calc(245 * var(--u));
}

.content-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-section h2 {
  font-size: calc(40 * var(--u));
  font-weight: 400;
  text-transform: uppercase;
}

.content-cards {
  display: flex;
  gap: calc(26 * var(--u));
  margin-top: calc(49 * var(--u));
}

.content-cards a,
.content-cards .ph {
  display: block;
  width: calc(375 * var(--u));
  height: auto;
  aspect-ratio: var(--card-ar, 375 / 229.839);
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: #d9d9d9;
}

.post-cover {
  position: relative;
  color: var(--wine);
  text-decoration: none;
}

.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-cover:hover img {
  transform: scale(1.03);
}

/* обложки нет — показываем название */
.post-cover .no-cover {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: calc(20 * var(--u));
  background: var(--cream);
  font-size: calc(28 * var(--u));
  font-weight: 500;
  text-align: center;
}

.content-section .outline-btn {
  margin-top: calc(47 * var(--u));
}

.content-section .empty-note {
  margin-top: calc(49 * var(--u));
}

/* ---------- Список раздела ---------- */
.section-page {
  padding-top: calc(50 * var(--u));
  padding-bottom: calc(190 * var(--u));
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(630 * var(--u)));
  justify-content: space-between;
  row-gap: calc(76 * var(--u));
  width: calc(1397 * var(--u));
  margin-top: calc(75 * var(--u));
}

.posts-grid .post-cover {
  display: block;
  aspect-ratio: var(--card-ar, 630 / 386);
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: #d9d9d9;
}

.posts-grid h2 {
  margin-top: calc(15 * var(--u));
  overflow: hidden;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.posts-grid h2 a {
  text-decoration: none;
}

.posts-grid h2 a:hover {
  text-decoration: underline;
}

.section-page .empty-note {
  margin-top: calc(75 * var(--u));
  text-align: left;
}

/* Разделы-«галереи» («Дизайн», «Прочее»): ровные ряды, название появляется при наведении */
.posts-justified {
  margin-top: calc(75 * var(--u));
}

.posts-justified .gallery-item {
  position: relative;
  display: block;
  border-radius: calc(12 * var(--u));
  cursor: pointer;
}

.posts-justified .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.posts-justified .no-cover {
  display: grid;
  place-items: center;
  height: 100%;
  padding: calc(20 * var(--u));
  background: var(--cream);
  color: var(--wine);
  font-size: calc(28 * var(--u));
  font-weight: 500;
  text-align: center;
}

.tile-title {
  position: absolute;
  inset: auto 0 0;
  padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(transparent, rgb(20 10 10 / 0.85));
  color: var(--cream);
  font-size: calc(24 * var(--u));
  font-weight: 400;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.25s, translate 0.25s;
}

.posts-justified .gallery-item:hover .tile-title,
.posts-justified .gallery-item:focus-visible .tile-title {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Запись ---------- */
.post-page h1 {
  font-size: calc(64 * var(--u));
  font-weight: 500;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.post-body {
  width: calc(1221 * var(--u));
  margin: calc(78 * var(--u)) auto 0;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.post-body p + p {
  margin-top: 1em;
}

/* Оформленный текст из редактора */
.post-body.rich h2 {
  margin: 1.4em 0 0.5em;
  font-size: calc(40 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}

.post-body.rich h3 {
  margin: 1.2em 0 0.4em;
  font-size: calc(32 * var(--u));
  font-weight: 600;
  line-height: 1.25;
}

.post-body.rich > :first-child {
  margin-top: 0;
}

.post-body.rich p:empty,
.post-body.rich p:has(> br:only-child) {
  height: 0.6em;
}

.post-body.rich strong { font-weight: 600; }
.post-body.rich a { text-underline-offset: 0.15em; }

.post-body.rich blockquote {
  margin: 1.2em 0;
  padding: 0.4em 0 0.4em 1em;
  border-left: calc(4 * var(--u)) solid var(--cream);
  font-style: italic;
  opacity: 0.9;
}

.post-body.rich ol,
.post-body.rich ul {
  margin: 0.8em 0;
  padding-left: 1.4em;
}

/* Quill хранит маркированные списки как <ol><li data-list="bullet"> */
.post-body.rich li[data-list='bullet'] { list-style-type: disc; }
.post-body.rich li[data-list='ordered'] { list-style-type: decimal; }
.post-body.rich li + li { margin-top: 0.3em; }

.post-body.rich img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em auto;
  border-radius: calc(12 * var(--u));
  cursor: zoom-in;
}

.post-media {
  width: calc(1214 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
}

.post-media img {
  width: 100%;
  height: auto;
}

.post-media iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.post-back {
  display: inline-block;
  margin-top: calc(80 * var(--u));
  font-size: calc(24 * var(--u));
}

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 1023px) {
  .page-card {
    width: auto;
    min-height: 0;
    margin: 16px 8px 0;
    padding: 28px 16px 56px;
    border-radius: 24px 24px 0 0;
  }

  .page-title,
  .gallery-head h1,
  .order-canvas h1,
  .post-page h1 {
    width: auto;
    font-size: clamp(24px, 7.5vw, 34px);
  }

  .gallery-head {
    margin-left: 0;
  }

  .gallery-lead,
  .gallery-note {
    font-size: 14px;
  }

  .gallery-lead { margin-top: 12px; }
  .gallery-note { margin-top: 6px; }

  .page-plain {
    width: auto;
    padding: 28px 16px 64px;
  }

  .outline-btn {
    width: auto;
    height: 46px;
    padding: 0 26px;
    border-width: 3px;
    border-radius: 18px;
    font-size: 16px;
  }

  .empty-note {
    font-size: 15px;
  }

  /* Заказ */
  .order-canvas {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 16px 40px;
  }

  .order-canvas .abs,
  .order-canvas .plate .abs,
  .order-canvas .chibi-plate .abs {
    position: static;
  }

  .order-canvas .sized {
    width: auto;
    height: auto;
  }

  .order-pattern,
  .order-dude,
  .plate .divider {
    display: none;
  }

  .order-canvas > section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .order-contacts,
  .order-noncis {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .order-contacts a:nth-child(1) { width: 44px; height: 33px; }
  .order-contacts a:nth-child(2) { width: 40px; height: 40px; }
  .order-contacts a:nth-child(3) { width: 44px; height: 34px; }

  .order-noncis {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .order-noncis p {
    width: 100%;
    font-size: 16px;
    white-space: normal;
  }

  .order-noncis a:nth-of-type(1) { width: 42px; height: 33px; }
  .order-noncis a:nth-of-type(2) { width: 21px; height: 33px; }

  .order-canvas h2 {
    margin-top: 24px;
    font-size: 26px;
  }

  .price-label {
    margin-top: 10px;
    font-size: 17px;
    white-space: normal;
  }

  .plate {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
    gap: 8px 12px;
    padding: 16px;
    border-radius: 20px;
  }

  .plate .head {
    font-size: 15px;
  }

  .plate .head:nth-of-type(1) { grid-column: 2; }
  .plate .head:nth-of-type(2) { grid-column: 3; }

  .plate .head small {
    font-size: 11px;
  }

  .plate .from,
  .plate .price {
    font-size: 17px;
  }

  .plate .from { grid-column: 1; }

  .order-canvas .order-chibi {
    order: -1;
    width: 200px;
    height: auto;
    margin: 20px auto -70px;
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
  }

  .chibi-plate {
    padding: 80px 20px 22px;
    border-radius: 24px;
    text-align: center;
  }

  .chibi-plate h3 { font-size: 28px; }
  .chibi-plate .price { margin-top: 6px; font-size: 18px; }
  .chibi-plate p:not(.price) { margin-top: 10px; font-size: 15px; }

  .extra-box {
    gap: 10px;
    padding: 22px 20px;
    border-radius: 24px;
    font-size: 15px;
  }

  .extra-box h3 { font-size: 18px; }
  .extra-box .later { margin-top: 12px; }

  .ref-panel {
    display: none;
  }

  .ref-image {
    width: min(100%, 300px) !important;
    margin: 20px auto 0;
    border-width: 4px;
    border-radius: 24px;
  }

  .ref-text {
    margin-top: -40px;
    padding: 56px 20px 22px;
    border-radius: 24px;
    background: var(--cream);
    font-size: 15px;
  }

  .ref-text h3 { font-size: 18px; }
  .ref-text .ref-row,
  .ref-text .ref-row:first-of-type { margin-top: 18px; }
  .ref-text .ref-row b { font-size: 17px; }
  .ref-text .ref-row + p { margin-top: 8px; }

  .ask-box br {
    display: none;
  }

  .ask-box {
    margin-top: 16px;
    padding: 22px 18px;
    border-radius: 24px;
    font-size: 17px;
  }

  .order-rules {
    width: auto;
    padding: 24px 16px 64px;
    translate: none;
  }

  .order-rules h2 { font-size: 22px; }
  .order-rules h2 small { font-size: 12px; margin-top: 4px; }
  .order-rules .rules { gap: 18px; margin-top: 18px; }
  .order-rules li,
  .order-rules .needs p { font-size: 15px; }
  .order-rules .needs-title { margin-top: 48px; font-size: 20px; }
  .order-rules .needs { gap: 16px; margin: 18px 0 0; }
  .order-rules .to-top { margin-top: 40px; }

  /* Прочий контент */
  .content-intro {
    width: auto;
    padding: 28px 16px 0;
  }

  .content-intro h1 { width: auto; }

  .bubble-box {
    min-width: 160px;
    max-width: 100%;
    margin-top: 40px;
    padding: 22px 20px 26px;
    border-radius: 24px;
    font-size: 16px;
    line-height: 1.25;
  }

  .bubble-box .chat {
    right: -6px;
    top: -30px;
    width: 56px;
    height: 56px;
  }

  .content-intro .scroll-down {
    width: 20px;
    height: 15px;
  }

  .content-sections {
    gap: 48px;
    padding: 40px 16px 64px;
  }

  .content-section h2 { font-size: 20px; }

  .content-cards {
    width: 100%;
    gap: 8px;
    margin-top: 16px;
  }

  .content-cards {
    justify-content: center;
  }

  /* одна-две записи не растягиваются на весь экран */
  .content-cards a,
  .content-cards .ph {
    flex: 1 1 0;
    max-width: 50%;
    width: auto;
    height: auto;
    aspect-ratio: 375 / 230;
    border-radius: 8px;
  }

  .post-cover .no-cover {
    padding: 8px;
    font-size: 11px;
  }

  .content-section .outline-btn { margin-top: 18px; }
  .content-section .empty-note { margin-top: 16px; }

  /* Раздел */
  .section-page { padding-top: 28px; }


  .posts-grid {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    row-gap: 24px;
    margin-top: 28px;
  }

  .posts-grid .post-cover {
    height: auto;
    border-radius: 10px;
  }

  .posts-grid h2 {
    margin-top: 8px;
    font-size: 16px;
  }

  .section-page .empty-note { margin-top: 28px; }

  .posts-justified { margin-top: 24px; }

  /* на телефоне плитки маленькие — названия не показываем, тап открывает запись */
  .tile-title {
    display: none;
  }

  /* Запись */
  .post-body {
    width: auto;
    margin-top: 20px;
    font-size: 15px;
  }

  .post-media {
    width: auto;
    margin-top: 24px;
  }

  .post-body.rich h2 { font-size: 22px; }
  .post-body.rich h3 { font-size: 18px; }
  .post-body.rich blockquote { border-left-width: 3px; }
  .post-body.rich img { border-radius: 8px; }

  .post-back {
    margin-top: 32px;
    font-size: 15px;
  }
}

/* Кнопка «Редактировать» на странице записи — видна только после входа в админку */
.post-edit {
  width: auto;
  height: auto;
  margin-top: calc(24 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  border-width: calc(4 * var(--u));
  border-radius: calc(24 * var(--u));
  font-size: calc(22 * var(--u));
}

@media (max-width: 1023px) {
  .post-edit {
    margin-top: 14px;
    padding: 10px 18px;
    border-width: 2px;
    border-radius: 14px;
    font-size: 14px;
  }
}