/* =========================================================================
   themes.css — дополнительные визуальные слои поверх book.css:
   1) Обложка книги (кожаная, раскрывается);
   2) Разворот (двухстраничный режим на десктопе) + переключатель вида.
   Базовый «свиток» (одна страница) остаётся как в book.css.
   ========================================================================= */

/* =========================================================================
   1. ОБЛОЖКА
   ========================================================================= */
.cover {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: 1.2rem;
  perspective: 2000px;
  background:
    radial-gradient(120% 100% at 50% 0%, #2a1c0f, #160d06 70%, #0d0804);
}

.cover__face {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 3 / 4.2;
  max-height: 90vh;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.52,.02,.32,1), opacity .6s ease;
  border-radius: 6px 12px 12px 6px;
  /* Кожаная фактура */
  background:
    repeating-linear-gradient(115deg, #00000010 0 2px, transparent 2px 5px),
    radial-gradient(140% 120% at 30% 20%, #6e4626, #5a3a20 45%, #3f2814 100%);
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.8),
    inset 0 0 60px rgba(0,0,0,.45);
}
.cover.is-opening .cover__face { transform: rotateY(-158deg); opacity: .15; }

/* Корешок слева */
.cover__spine {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 22px;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #2c1c0e, #4a2f19 60%, #00000022);
  box-shadow: inset -3px 0 6px rgba(0,0,0,.5);
}

/* Золотая рамка с тиснением */
.cover__frame {
  position: absolute; inset: 26px 22px 26px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 2px solid #b8923f;
  border-radius: 4px;
  box-shadow: inset 0 0 0 4px #00000022, inset 0 0 24px #00000040;
  padding: 1.4rem;
}
.cover__ornament { font-size: 2rem; color: #cba85a; opacity: .9; }
.cover__title {
  font-family: var(--font-title), cursive;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: .95;
  margin: .3rem 0 .6rem;
  background: linear-gradient(#f4dd9a, #c79b42 55%, #8c6a2b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #c79b42;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.cover__rule {
  width: 60%; height: 2px; margin: .2rem 0 .8rem;
  background: linear-gradient(90deg, transparent, #b8923f, transparent);
}
.cover__sub {
  font-family: var(--font-hand), cursive;
  font-size: 1.25rem; color: #e7cf9a; margin: 0 0 1.6rem;
}
.cover__authors {
  font-family: var(--font-body), serif;
  font-size: .9rem; letter-spacing: .04em; color: #d8bd86; margin: 0 0 1.8rem;
}
.cover__open {
  font-family: var(--font-body), serif;
  font-size: 1rem;
  color: #f4e6c4;
  background: linear-gradient(#6e4a26, #4e3219);
  border: 1px solid #b8923f;
  border-radius: 999px;
  padding: .6rem 1.5rem;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.cover__open:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  .cover__face { transition: opacity .3s ease; }
  .cover.is-opening .cover__face { transform: none; opacity: 0; }
}

/* =========================================================================
   2. ПЕРЕКЛЮЧАТЕЛЬ ВИДА
   ========================================================================= */
.layout-switch {
  position: fixed;
  left: clamp(.6rem, 3vw, 1.4rem);
  bottom: 78px;
  z-index: 40;
  display: flex; align-items: center; gap: .25rem;
  padding: .3rem .4rem;
  background: linear-gradient(#efe4ca, #ddcca6);
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(40,28,12,.25);
  font-size: .82rem;
}
.layout-switch__label { color: var(--ink-soft); padding: 0 .2rem 0 .4rem; }
.layout-switch__btn {
  font-family: var(--font-body), serif;
  font-size: .82rem;
  border: none; cursor: pointer;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: transparent; color: var(--ink-soft);
}
.layout-switch__btn.is-active {
  background: var(--accent); color: #f6ead0;
}
/* Разворот — только для широких экранов; на телефоне переключатель прячем */
@media (max-width: 979px) {
  .layout-switch { display: none; }
}

/* =========================================================================
   3. РАЗВОРОТ (двухстраничный режим, десктоп)
   ========================================================================= */
@media (min-width: 980px) {
  body.layout-spread .page {
    max-width: 1240px;
    padding: clamp(2rem, 3vw, 3rem) clamp(2.4rem, 4vw, 4rem);
    column-count: 2;
    column-gap: clamp(3rem, 5vw, 5rem);
    column-fill: balance;
    /* двойная страница: тёплый край у обоих внешних обрезов */
    background-image:
      url("../img/paper.svg"),
      linear-gradient(90deg, rgba(120,85,40,.10), transparent 12%, transparent 88%, rgba(120,85,40,.10));
    background-size: 320px, auto;
  }

  /* Корешок по центру разворота */
  body.layout-spread .page::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 48px; transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent,
      rgba(80,55,25,.05) 30%,
      rgba(80,55,25,.22) 49%,
      rgba(80,55,25,.30) 50%,
      rgba(80,55,25,.22) 51%,
      rgba(80,55,25,.05) 70%,
      transparent);
  }

  /* Блоки, занимающие весь разворот (не дробятся пополам корешком) */
  body.layout-spread .page > h1,
  body.layout-spread .page > .crumbs,
  body.layout-spread .page > .home-hero,
  body.layout-spread .page > .section-top,
  body.layout-spread .page > .poets,
  body.layout-spread .page > .comp-grid,
  body.layout-spread .page > .search-bar,
  body.layout-spread .page > .tabs,
  body.layout-spread .page > .bilingual,
  body.layout-spread .page > .wip-screen,
  body.layout-spread .page > .staff-toggle,
  body.layout-spread .page > .staff-region,
  body.layout-spread .page > hr.divider {
    column-span: all;
  }

  /* Мелкие блоки текста не должны рваться через колонку/страницу */
  body.layout-spread .page > h2,
  body.layout-spread .page > h3,
  body.layout-spread .page > blockquote,
  body.layout-spread .page > .variant,
  body.layout-spread .page > .poem-list,
  body.layout-spread .page > .lyrics {
    break-inside: avoid;
  }

  /* Внутри разворота карточные сетки делаем чуть просторнее */
  body.layout-spread .comp-grid { grid-template-columns: 1fr 1fr; }
}