/* ============================================================
page.css - стили ВНУТРЕННИХ страниц сайта «Рыбалка на Кольском».
Подключается ТОЛЬКО вместе со style.css и ПОСЛЕ него:
Ничего из style.css не дублирует и не переопределяет.
Переменные, кнопки (.btn), хедер (.hdr), футер (.ftr), .wrap,
.sec-head/.sec-title/.sec-lead, .reveal/.wipe, .fab/.dock, .faq__*
берутся из style.css как есть.
Тёмная тема, анимации только transform/opacity, ветка reduced-motion внизу.
============================================================ */
/* ---------- Локальные токены страниц (не трогают :root из style.css) ---------- */
.page{
--page-gap:clamp(56px,8vw,104px); /* вертикальный ритм между секциями */
--card-r:16px; /* радиус карточек внутренних страниц */
}
/* Отступ секций внутренних страниц. Вешается на вместе с .wrap-контентом. */
.sec{padding-block:var(--page-gap)}
.sec--tight{padding-block:clamp(36px,5vw,64px)}
.sec--alt{background:var(--bg-2)}
.sec--line{border-top:1px solid var(--line-2)}
/* ============================================================
1. HERO ВНУТРЕННЕЙ СТРАНИЦЫ (.phero)
Компактнее главного: не 100dvh, а ~62vh. Фото-фон + градиент-подложка,
чтобы текст всегда читался. Ken Burns только при желании motion.
============================================================ */
.phero{
position:relative;overflow:hidden;
min-height:min(62vh,600px);
display:flex;align-items:flex-end;
/* 72px - высота фиксированного .hdr из style.css */
padding-top:calc(72px + 24px);
background:var(--bg-2);
}
.phero__bg{
position:absolute;inset:0;
background-position:center;background-size:cover;background-repeat:no-repeat;
will-change:transform;
}
.phero__scrim{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(8,11,13,.72) 0%,rgba(8,11,13,.30) 34%,rgba(8,11,13,.62) 70%,rgba(8,11,13,.97) 100%),
linear-gradient(90deg,rgba(8,11,13,.78) 0%,rgba(8,11,13,0) 66%);
}
.phero__inner{
position:relative;z-index:2;width:100%;
padding-block:clamp(32px,5vw,64px);
}
.phero__eyebrow{
font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
color:var(--accent);margin-bottom:14px;
}
.phero__title{font-size:clamp(30px,5.2vw,64px);max-width:17ch}
.phero__lead{margin-top:18px;max-width:52ch;color:#d3dadd;font-size:clamp(16px,1.9vw,20px)}
.phero__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
/* Строка фактов под лидом героя: дни · группа · от-цена */
.phero__meta{
list-style:none;margin-top:26px;
display:flex;flex-wrap:wrap;gap:10px;
}
.phero__meta li{
font-size:14px;font-weight:500;color:#cfd6d9;
padding:8px 14px;border-radius:999px;
border:1px solid var(--line);background:rgba(12,16,19,.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.phero__meta li b{color:var(--ink);font-weight:700}
/* ============================================================
2. ХЛЕБНЫЕ КРОШКИ (.crumbs)
Живут ПОД хедером, внутри .phero__inner (первым элементом) либо отдельной полосой.
============================================================ */
.crumbs{font-size:13.5px;color:var(--muted-2);margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--muted-2);opacity:.6}
.crumbs a{color:var(--muted);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--ink)}
/* ============================================================
3. ТИПОГРАФИКА ДЛИННОГО ТЕКСТА (.prose)
Всё, что внутри .prose, оформляется без лишних классов.
============================================================ */
.prose{max-width:68ch;color:var(--muted);font-size:clamp(16px,1.7vw,18px);line-height:1.7}
.prose>*+*{margin-top:18px}
.prose h2{
font-family:var(--font-display);font-weight:800;
font-size:clamp(24px,3.4vw,38px);color:var(--ink);line-height:1.12;
margin-top:clamp(40px,5vw,64px);
}
.prose h3{
font-family:var(--font-display);font-weight:600;
font-size:clamp(19px,2.3vw,25px);color:var(--ink);line-height:1.2;
margin-top:clamp(28px,3.4vw,40px);
}
.prose h2+*,.prose h3+*{margin-top:16px}
.prose p{color:var(--muted)}
/* Ответ сразу под H2-вопросом (AEO): первый абзац после вопроса светлее и крупнее */
.prose h2+p{color:#cfd6d9;font-size:1.06em}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:#f0993f}
.prose ul,.prose ol{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.prose li{position:relative;padding-left:28px}
.prose ul>li::before{
content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
border:2px solid var(--accent);
}
.prose ol{counter-reset:pl}
.prose ol>li{counter-increment:pl}
.prose ol>li::before{
content:counter(pl);position:absolute;left:0;top:0;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--accent);
}
.prose>img{border-radius:var(--card-r);margin-top:28px}
.prose figure{margin-top:28px}
.prose figure img{border-radius:var(--card-r)}
.prose figcaption{margin-top:10px;color:var(--muted-2);font-size:13.5px}
/* ============================================================
4. ПРОГРАММА ПО ДНЯМ (.prog)
Вертикальная лента дней с линией слева. Каждый день - .prog__day.
============================================================ */
.prog{list-style:none;position:relative;margin-top:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:0}
.prog::before{
content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;
background:linear-gradient(180deg,var(--accent),rgba(224,138,62,.15) 60%,transparent);
}
.prog__day{position:relative;padding:0 0 clamp(28px,3.6vw,44px) 44px}
.prog__day:last-child{padding-bottom:0}
.prog__day::before{
content:"";position:absolute;left:5px;top:9px;width:13px;height:13px;border-radius:50%;
background:var(--bg);border:2px solid var(--accent);
}
.prog__idx{
font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent);
}
.prog__title{
font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.3vw,26px);
color:var(--ink);margin-top:8px;line-height:1.2;
}
.prog__day p{margin-top:12px;color:var(--muted);max-width:60ch}
.prog__day img{margin-top:16px;border-radius:12px;width:100%;object-fit:cover;aspect-ratio:16/9}
/* ============================================================
5. КАРТОЧКИ (.cards / .card)
Универсальная сетка: трофеи, способы ловли, тезисы, ссылки на разделы.
Вариант .card--link добавляет стрелку и hover-подъём.
============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(24px,3vw,40px)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
position:relative;display:flex;flex-direction:column;
background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--card-r);
padding:clamp(20px,2.4vw,28px);
transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.card__kick{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--steel);margin-bottom:10px}
.card__title{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.2}
.card p{margin-top:12px;color:var(--muted);font-size:15.5px}
.card__note{margin-top:auto;padding-top:16px;color:var(--muted-2);font-size:13.5px}
/* Карточка с фото сверху */
.card--media{padding:0;overflow:hidden}
.card--media .card__media{aspect-ratio:16/10;background-position:center;background-size:cover;background-repeat:no-repeat}
.card--media .card__body{padding:clamp(20px,2.4vw,28px)}
/* Кликабельная карточка */
.card--link{cursor:pointer}
.card--link:hover{border-color:rgba(224,138,62,.5);transform:translateY(-3px)}
.card--link .card__title::after{content:" →";color:var(--accent)}
/* Акцентная карточка (одна на блок, не больше) */
.card--accent{background:rgba(224,138,62,.07);border-color:rgba(224,138,62,.32)}
/* ============================================================
6. ЧТО ВКЛЮЧЕНО (.incl)
Две колонки: «входит в цену» / «оплачивается отдельно».
.incl__col--in - галочки-точки стального цвета, .incl__col--add - плюсы акцентом.
============================================================ */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px);margin-top:clamp(24px,3vw,40px)}
.incl__col{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.8vw,32px);background:var(--bg-2)}
.incl__col--add{background:var(--bg-3)}
.incl__head{
font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,21px);
margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.incl__list{list-style:none;display:flex;flex-direction:column;gap:13px}
.incl__list li{position:relative;padding-left:28px;color:var(--muted);font-size:15.5px;line-height:1.5}
.incl__list li b{color:var(--ink);font-weight:700}
.incl__list li::before{
content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;
border:2px solid var(--steel);
}
.incl__col--add .incl__list li::before{border-color:var(--accent);border-radius:3px}
/* Цена опции справа в строке */
.incl__price{
float:right;margin-left:12px;
font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--steel);white-space:nowrap;
}
.incl__foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);color:var(--muted-2);font-size:13px;line-height:1.5}
/* ============================================================
7. ТАБЛИЦА (.tbl)
Цены, сезон по месяцам, снаряжение. На мобильных скроллится по горизонтали.
Обёртка: