/* components.css — секции, карточки, модал, hero */

/* placeholder cover when image fails / missing */
.cover-ph {
  width: 100%; height: 100%; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(216,182,106,.05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, var(--panel2), #0b0805);
  border: 1px solid var(--line);
}
.cover-ph .cph-author { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.cover-ph .cph-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.12; color: var(--ink); }
.cover-ph .cph-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------- TOPBAR ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background .5s;
}
.topbar .row { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.brandmark { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brandmark .nm { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.brandmark .by { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.topnav { display: flex; align-items: center; gap: 10px; }
.topnav a.link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; padding: 8px 4px; transition: color .2s; }
.topnav a.link:hover { color: var(--gold); }
@media (max-width: 720px){ .topnav .link.hide-sm { display: none; } .brandmark .by { display:none; } }

/* ---------- HERO ---------- */
.hero { position: relative; padding: 64px 0 40px; background-image: var(--hero-grad); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-eyebrow { display:flex; gap: 14px; align-items:center; flex-wrap: wrap; margin-bottom: 26px; }
.hero h1 { font-size: clamp(40px, 6vw, 78px); font-weight: 800; letter-spacing: -.01em; }
.hero h1 .em { font-style: italic; color: var(--gold-bright); font-weight: 600; }
.hero .lead { font-size: 20px; color: var(--ink-dim); max-width: 36ch; margin: 24px 0 34px; line-height: 1.55; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; align-items:center; }
.hero-meta .mi { display:flex; flex-direction: column; gap: 3px; }
.hero-meta .mi b { font-family: var(--font-display); font-size: 26px; color: var(--gold-bright); font-weight: 700; }
.hero-meta .mi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.hero-meta .vr { width: 1px; align-self: stretch; background: var(--line); }

/* cover stack */
.cover-stack { position: relative; height: 560px; display:flex; align-items:center; justify-content:center; }
.cover-stack .cv { position: absolute; border-radius: 6px; box-shadow: var(--cover-glow); overflow: hidden; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cover-stack .cv img { width: 100%; height: 100%; object-fit: cover; }
.cover-stack .cv.front { width: 300px; height: 450px; z-index: 3; }
.cover-stack .cv.back-l { width: 232px; height: 348px; transform: translate(-150px, 28px) rotate(-8deg); z-index: 1; opacity: .82; }
.cover-stack .cv.back-r { width: 232px; height: 348px; transform: translate(152px, 36px) rotate(8deg); z-index: 2; opacity: .9; }
.cover-stack:hover .cv.front { transform: translateY(-6px); }
.cover-stack:hover .cv.back-l { transform: translate(-168px, 24px) rotate(-10deg); }
.cover-stack:hover .cv.back-r { transform: translate(170px, 30px) rotate(10deg); }
.cover-stack.single .cv.back-l, .cover-stack.single .cv.back-r { display: none; }
.cover-stack.single .cv.front { width: 330px; height: 495px; }
.cover-badge { position:absolute; bottom: 26px; right: -6px; z-index: 4; background: var(--panel); border:1px solid var(--gold); color: var(--gold-bright);
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; padding: 9px 14px; border-radius: 100px; box-shadow: var(--shadow); }

@media (max-width: 920px){
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .cover-stack { height: 460px; order: -1; }
}

/* ---------- SECTION HEADERS ---------- */
.section { padding: 76px 0; }
.sec-head { display:flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); }
.sec-head .sub { color: var(--ink-dim); max-width: 46ch; margin-top: 12px; }
.sec-head .right { text-align: right; }

/* ---------- ПРОФЕССИИ ---------- */
.method { background: var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: 6px; overflow: hidden; }
.method-cell { background: var(--panel); padding: 30px 26px; display:flex; flex-direction: column; gap: 14px; min-height: 210px; transition: background .3s; }
.method-cell:hover { background: var(--panel2); }
.method-cell .case { font-family: var(--font-mono); font-size: 11px; letter-spacing:.16em; color: var(--ink-faint); text-transform: uppercase; }
.method-cell .prof { font-family: var(--font-display); font-size: 25px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.method-cell .arrow { color: var(--gold); font-size: 18px; }
.method-cell .role { color: var(--ink-dim); font-style: italic; font-size: 16px; }
.method-cell .past { font-family: var(--font-mono); font-size: 10px; letter-spacing:.08em; color: var(--accent); text-transform: uppercase; }
@media (max-width: 860px){ .method-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .method-grid { grid-template-columns: 1fr; } }

/* ---------- ФИЛЬТР ---------- */
.filters { display:flex; gap: 8px; }
.filter-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-dim);
  background: transparent; border:1px solid var(--line); border-radius: 100px; padding: 9px 18px; cursor: pointer; transition: all .25s; }
.filter-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.filter-btn.active { background: var(--gold); color:#14100a; border-color: var(--gold); font-weight:600; }

/* ---------- КАРТОЧКИ КНИГ ---------- */
.books-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (max-width: 760px){ .books-grid { grid-template-columns: 1fr; } }
.book {
  background: var(--panel); border:1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: grid; grid-template-columns: 200px 1fr; transition: transform .35s, box-shadow .35s, border-color .35s;
}
.book:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in oklch, var(--gold) 45%, var(--line)); }
.book .cover-wrap { position: relative; cursor: pointer; overflow: hidden; background: #000; }
.book .cover-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.book:hover .cover-wrap img { transform: scale(1.05); }
.book-badge { position:absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase;
  padding: 6px 11px; border-radius: 100px; backdrop-filter: blur(6px); }
.book-badge.free { background: color-mix(in oklch, var(--accent) 86%, black); color: #0c1208; font-weight: 600; }
.book-badge.soon { background: rgba(0,0,0,.6); color: var(--gold-bright); border:1px solid var(--gold); }
.book .body { padding: 24px 26px 26px; display:flex; flex-direction: column; gap: 12px; }
.book .genres { display:flex; gap: 7px; flex-wrap: wrap; }
.book h3 { font-size: 27px; line-height: 1.08; cursor: pointer; transition: color .2s; }
.book h3:hover { color: var(--gold-bright); }
.book .subtitle { font-style: italic; color: var(--ink-dim); font-size: 17px; margin-top: -6px; }
.book .prof-line { font-family: var(--font-mono); font-size: 11px; letter-spacing:.04em; color: var(--accent); text-transform: uppercase; }
.book .hook { color: var(--ink-dim); font-size: 16px; line-height: 1.5; flex: 1; }
.book .stats { display:flex; gap: 16px; padding-top: 4px; flex-wrap: wrap; }
.book .stat { display:flex; align-items:center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.book .stat svg { width: 14px; height: 14px; opacity: .8; }
.book .actions { display:flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 1040px){ .book { grid-template-columns: 160px 1fr; } .book h3 { font-size: 23px; } }
@media (max-width: 420px){ .book { grid-template-columns: 1fr; } .book .cover-wrap { aspect-ratio: 2/3; } }

/* ---------- QUOTE BAND ---------- */
.quoteband { padding: 90px 0; background: var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.quoteband .q { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(26px, 4.2vw, 46px); line-height: 1.25; color: var(--ink); max-width: 20ch; margin: 22px auto; }
.quoteband .q .gold { color: var(--gold-bright); }
.quoteband .by { font-family: var(--font-mono); font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- ОТЗЫВЫ ---------- */
.reviews-top { display:flex; gap: 30px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.proof { display:flex; gap: 26px; flex-wrap: wrap; }
.proof .p { display:flex; flex-direction:column; }
.proof .p b { font-family: var(--font-display); font-size: 34px; color: var(--gold-bright); }
.proof .p span { font-family: var(--font-mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px){ .slots { grid-template-columns: 1fr; } }
.slot-card { background: var(--panel); border:1px solid var(--line); border-radius: 8px; padding: 14px; }
.slot-card image-slot { width: 100%; height: 280px; display:block; }
.slot-card .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing:.08em; color: var(--ink-faint); text-transform:uppercase; margin-top: 10px; text-align:center; }

/* review wall (cropped real screenshots) */
.review-wall { columns: 2; column-gap: 24px; }
@media (max-width: 760px){ .review-wall { columns: 1; } }
.review-card {
  break-inside: avoid; margin: 0 0 24px; background: #fdfdfb; border-radius: 12px;
  padding: 6px 20px 2px; box-shadow: 0 22px 46px -22px rgba(0,0,0,.65); border: 1px solid rgba(0,0,0,.07);
  transition: transform .3s, box-shadow .3s;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.review-card img { width: 100%; border-radius: 4px; }

/* ---------- ПОДПИСКА ---------- */
.subscribe { padding: 84px 0; background: var(--panel); border-top:1px solid var(--line); }
.sub-grid { display:grid; grid-template-columns: 1fr 320px; gap: 56px; align-items:center; }
@media (max-width: 880px){ .sub-grid { grid-template-columns: 1fr; } .sub-covers { order:-1; } }
.subscribe h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 16px; }
.subscribe .lead { color: var(--ink-dim); font-size: 19px; max-width: 44ch; margin-bottom: 28px; }
.sub-form { display:flex; gap: 12px; flex-wrap: wrap; max-width: 520px; }
.sub-form input { flex: 1; min-width: 220px; background: var(--bg); border:1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 15px 18px; border-radius: var(--r); outline: none; transition: border-color .2s; }
.sub-form input:focus { border-color: var(--gold); }
.sub-form input.err { border-color: #c4564a; }
.sub-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 14px; letter-spacing:.04em; }
.sub-cta { display:flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-tg { background:#2AABEE; border-color:#2AABEE; color:#fff; gap:10px; }
.btn-tg:hover { background:#1f9bd8; border-color:#1f9bd8; color:#fff; transform: translateY(-2px); box-shadow: 0 16px 34px -16px #2AABEE; }
.sub-socials { display:flex; gap: 12px; margin-top: 22px; }
.sub-success { display:flex; align-items:center; gap: 14px; background: var(--accent-soft); border:1px solid var(--accent); border-radius: var(--r); padding: 18px 22px; color: var(--ink); max-width: 520px; font-size: 17px; }
.sub-covers { display:flex; gap: 18px; justify-content:center; }
.sub-covers .sc { width: 150px; height: 225px; border-radius: 6px; overflow:hidden; box-shadow: var(--cover-glow); position: relative; }
.sub-covers .sc:nth-child(2){ margin-top: 30px; }
.sub-covers .sc img { width:100%; height:100%; object-fit: cover; }
.sub-covers .sc .lbl { position:absolute; bottom:0; left:0; right:0; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,.85)); color:#f0d489; font-family: var(--font-mono); font-size: 9px; letter-spacing:.06em; text-transform:uppercase; text-align:center; }

/* ---------- FOOTER ---------- */
.foot { padding: 50px 0 60px; border-top:1px solid var(--line); }
.foot-row { display:flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.foot .nm { font-family: var(--font-display); font-size: 26px; font-weight:700; }
.foot .small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing:.06em; line-height: 1.8; }
.foot a { color: var(--gold); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------- МОДАЛ ---------- */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(6,4,2,.78); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center; padding: 32px; animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border:1px solid var(--line); border-radius: 12px; max-width: 940px; width: 100%; max-height: 88vh; overflow: hidden;
  display: grid; grid-template-columns: 340px 1fr; box-shadow: var(--shadow); animation: pop .35s cubic-bezier(.2,.8,.2,1); position: relative; }
@keyframes pop { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.modal .m-cover { background: linear-gradient(160deg, #15100b, #060403); position: relative; display:flex; align-items:center; justify-content:center; }
.modal .m-cover img { width:100%; height:100%; object-fit: contain; object-position: center; }
.modal .m-cover .m-badge { position:absolute; top:16px; left:16px; }
.modal .m-body { padding: 38px 40px; overflow-y: auto; }
.modal .m-body::-webkit-scrollbar { width: 8px; }
.modal .m-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.modal h3 { font-size: 36px; line-height: 1.05; }
.modal .m-sub { font-style: italic; color: var(--ink-dim); font-size: 20px; margin-top: 4px; }
.modal .m-prof { font-family: var(--font-mono); font-size: 12px; letter-spacing:.04em; color: var(--accent); text-transform: uppercase; margin: 18px 0; padding: 12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.modal .m-annot p { color: var(--ink-dim); font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.modal .m-teasers { margin: 22px 0 26px; }
.modal .m-teasers .tt { font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom: 14px; }
.modal .m-teasers li { list-style:none; display:flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; color: var(--ink); font-size: 16px; }
.modal .m-teasers li .dia { width:7px; height:7px; background: var(--gold); transform: rotate(45deg); margin-top: 8px; flex-shrink:0; }
.modal .m-cta { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.modal .m-close { position:absolute; top: 14px; right: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 100px; border:1px solid var(--line);
  background: color-mix(in oklch, var(--panel) 80%, transparent); color: var(--ink); cursor: pointer; font-size: 18px; display:flex; align-items:center; justify-content:center; transition: all .2s; }
.modal .m-close:hover { border-color: var(--gold); color: var(--gold); }
.modal .m-nav { position:absolute; bottom: 16px; right: 16px; display:flex; gap: 8px; }
.modal .m-nav button { width: 40px; height: 40px; border-radius:100px; border:1px solid var(--line); background: var(--panel2); color: var(--ink); cursor:pointer; transition: all .2s; }
.modal .m-nav button:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 720px){ .modal { grid-template-columns: 1fr; max-height: 92vh; } .modal .m-cover { height: 300px; } }