/* Оформление страниц со списками гайдов (leveling, end-game, craft-other, poe-2): светлая тема, без фоновой картинки.
   Подключается только на этих страницах (<body class="lp">), на страницы самих гайдов не влияет. */
:root{--b:#3b78d4;--ink:#161b26;--mute:#6b7280;--line:#dfe3ea}
*{box-sizing:border-box}
body.lp{margin:0;background:#fff;color:var(--ink);font:16px/1.5 Montserrat,system-ui,sans-serif;min-height:100vh}
.lp a{color:inherit;text-decoration:none}
.lp .page{min-height:100vh;display:flex;flex-direction:column;padding:26px clamp(20px,5vw,72px) 30px}

/* верхнее меню */
.lp .nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 40px;margin:0;padding:6px 0;background:none;min-height:40px}
.lp .nav a{font:600 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4b5565;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.lp .nav a:first-child{position:absolute;left:0;top:50%;transform:translateY(-50%);font:700 20px Cinzel,serif;letter-spacing:.14em;color:var(--b);white-space:nowrap;border-bottom:0}
.lp .nav a:hover,.lp .nav a:focus-visible{color:var(--b);border-color:var(--b);outline:0}
.lp .nav a.on{color:var(--b);border-color:var(--b)}
.lp .nav a:first-child:hover{color:#2f64b8;border-color:transparent}

.lp .wrap{width:100%;max-width:1360px;margin:0 auto;padding:0}
.lp h1.t{font:700 clamp(32px,4.6vw,56px)/1.05 Cinzel,serif;text-align:center;margin:7vh 0 26px;color:var(--ink)}
.lp h1.t::after{content:"";display:block;width:64px;height:4px;background:var(--b);margin:20px auto 0}

.lp .note{text-align:center;color:var(--mute);margin:10px 0 0}

/* фильтр по классу */
.lp .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 42px}
.lp .chip{border:2px solid var(--line);background:#fff;color:var(--b);border-radius:0;padding:9px 20px;font:700 14px Cinzel,serif;letter-spacing:.05em;cursor:pointer;transition:transform .25s,border-color .25s,background .25s,color .25s}
.lp .chip:hover,.lp .chip:focus-visible{transform:translateY(-3px);border-color:var(--b);background:#f1f6fd;outline:0}
.lp .chip.on{border-color:var(--b);background:var(--b);color:#fff}

/* карточки гайдов */
.lp .grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding-bottom:50px}
.lp .card{flex:0 0 300px;max-width:100%;position:relative;display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 2px 10px #1c2a4a0f;transition:transform .25s,border-color .25s,box-shadow .25s}
.lp .card.hide{display:none}
.lp .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--b);transform:scaleY(.25);transform-origin:top;transition:transform .3s;z-index:2}
.lp .card:hover,.lp .card:focus-visible{transform:translateY(-5px);border-color:var(--b);box-shadow:0 14px 32px #3b78d433;outline:0}
.lp .card:hover::before,.lp .card:focus-visible::before{transform:scaleY(1)}
.lp .card .ph{aspect-ratio:16/9;display:block;border:0;font-size:0;color:transparent;background:#e9ecf2 center/cover no-repeat;overflow:hidden;transition:transform .6s}
.lp .card:hover .ph{transform:scale(1.04)}
.lp .card h3{font:700 18px/1.3 Cinzel,serif;letter-spacing:.02em;margin:16px 18px 6px;color:var(--ink)}
.lp .card small{margin:0 18px 18px;color:var(--mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* пока у гайда нет своего бейджика — арт его класса */
.lp .card[data-c="Marauder"] .ph{background-image:url(home/marauder.jpg)}
.lp .card[data-c="Duelist"] .ph{background-image:url(home/duelist.jpg)}
.lp .card[data-c="Ranger"] .ph{background-image:url(home/ranger.jpg)}
.lp .card[data-c="Shadow"] .ph{background-image:url(home/shadow.jpg)}
.lp .card[data-c="Witch"] .ph{background-image:url(home/witch.jpg)}
.lp .card[data-c="Templar"] .ph{background-image:url(home/templar.jpg)}
.lp .card[data-c="Scion"] .ph{background-image:url(home/scion.jpg)}
/* гайд, страница которого ещё не создана */
.lp .card[href="#"]{opacity:.55}
.lp .card[href="#"] small::after{content:" · soon"}

.lp .foot{max-width:800px;margin:auto auto 0;padding:24px 0 0;font:12px/1.5 Montserrat,sans-serif;color:#8a909c;text-align:center}
.lp .foot a{color:var(--b);text-decoration:underline}
.lp .to-top{background:var(--b);border-radius:0}.lp .to-top:hover{background:#2f64b8}

@media(max-width:1150px){.lp .nav a:first-child{position:static;transform:none;width:100%;text-align:center}}
@media(max-width:560px){.lp .card{flex-basis:100%}.lp .chip{padding:8px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.lp *{transition:none!important}}