<section class="vb-k7m-accordion" id="vb-k7m-accordion" data-section-name="Горизонтальный аккордеон" data-vibeblock-unique-section="yes" aria-labelledby="vb-k7m-title">
<style>
.vb-k7m-accordion,
.vb-k7m-accordion * { box-sizing: border-box; }
.vb-k7m-accordion input,
.vb-k7m-accordion textarea,
.vb-k7m-accordion select { font: inherit; }
.vb-k7m-accordion { --vb-k7m-canvas:#eeefe9; --vb-k7m-ink:#23251d; --vb-k7m-body:#4d4f46; --vb-k7m-line:#bfc1b7; --vb-k7m-accent:#f7a501; background:var(--vb-k7m-canvas); color:var(--vb-k7m-body); padding:clamp(30px,5vw,72px) 24px; font-family:var(--t-text-font); }
.vb-k7m-accordion__title,.vb-k7m-accordion__label,.vb-k7m-accordion__content h3 { font-family:var(--t-headline-font); }
.vb-k7m-accordion__content p,.vb-k7m-accordion__link,.vb-k7m-accordion__trigger { font-family:var(--t-text-font); }
.vb-k7m-accordion__inner { max-width:1440px; margin:0 auto; }
.vb-k7m-accordion__title { margin:0 0 30px; color:var(--vb-k7m-ink); font:800 clamp(36px,5vw,64px)/1.08 var(--t-headline-font); letter-spacing:-.025em; text-wrap:balance; }
.vb-k7m-accordion__row { display:flex; height:800px; gap:14px; }
.vb-k7m-accordion__item { position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:#24342f; border:0; border-radius:18px; isolation:isolate; transition:flex .8s cubic-bezier(.2,.8,.2,1); }
.vb-k7m-accordion__item::before { position:absolute; z-index:-1; inset:0; content:""; background-image:linear-gradient(180deg,rgba(11,20,18,.14) 10%,rgba(11,20,18,.22) 40%,rgba(11,20,18,.82) 100%),var(--vb-k7m-photo); background-size:cover; background-position:center; transform:scale(1.08); transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s ease; filter:saturate(.78); }
.vb-k7m-accordion__item:hover::before,.vb-k7m-accordion__item:focus-within::before,.vb-k7m-accordion__item[aria-expanded="true"]::before { transform:scale(1); filter:saturate(1.05); }
.vb-k7m-accordion__item[aria-expanded="true"] { flex:3.2 1 0; }
.vb-k7m-accordion__trigger { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; width:100%; padding:32px 24px; color:#fff; border:0; background:transparent; text-align:left; cursor:pointer; font-family:var(--t-text-font); }
.vb-k7m-accordion__label { max-width:100%; color:#fff; font:700 clamp(22px,2.4vw,34px)/1.15 var(--t-headline-font); text-shadow:0 2px 18px rgba(0,0,0,.4); writing-mode:vertical-rl; transform:rotate(180deg); }
.vb-k7m-accordion__index { display:none; }
.vb-k7m-accordion__content { position:absolute; z-index:1; inset:auto 0 0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:clamp(34px,5vw,72px); padding-left:clamp(86px,10vw,148px); color:#fff; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(18px); transition:opacity .35s ease,transform .45s ease,visibility .35s; }
.vb-k7m-accordion__item[aria-expanded="true"] .vb-k7m-accordion__content { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.vb-k7m-accordion__content h3 { max-width:15ch; margin:0 0 16px; color:#fff; font:700 clamp(36px,5vw,64px)/1.08 var(--t-headline-font); letter-spacing:-.025em; text-wrap:balance; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.vb-k7m-accordion__content p { max-width:50ch; margin:0; color:#fff; font-size:clamp(18px,1.7vw,23px); line-height:1.5; text-wrap:pretty; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.vb-k7m-accordion__link { position:absolute; z-index:3; right:28px; bottom:28px; display:grid; place-items:center; width:68px; height:68px; color:#fff; background:var(--vb-k7m-accent); border:0; border-radius:16px; text-decoration:none; font:600 36px/1 var(--t-text-font); transition:background .3s ease,transform .3s cubic-bezier(.2,.8,.2,1); }
.vb-k7m-accordion__link:hover { background:#dd9001; transform:translate(2px,-2px); }
.vb-k7m-accordion__item:focus-within { outline:3px solid rgba(59,130,246,.65); outline-offset:4px; }
.vb-k7m-accordion__link:focus-visible,.vb-k7m-accordion__trigger:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media (max-width:960px) and (min-width:701px) {
.vb-k7m-accordion__row { height:680px; gap:10px; }
.vb-k7m-accordion__trigger { padding:24px 18px; }
.vb-k7m-accordion__content { padding:44px; padding-left:80px; }
.vb-k7m-accordion__link { right:20px; bottom:20px; width:58px; height:58px; }
}
@media (max-width:700px) {
.vb-k7m-accordion { padding:36px 16px; }
.vb-k7m-accordion__title { margin-bottom:22px; font-size:32px; }
.vb-k7m-accordion__row { flex-direction:column; height:auto; gap:12px; }
.vb-k7m-accordion__item,.vb-k7m-accordion__item[aria-expanded="true"] { flex:initial; height:112px; transition:height .45s cubic-bezier(.2,.8,.2,1); }
.vb-k7m-accordion__item[aria-expanded="true"] { height:420px; }
.vb-k7m-accordion__trigger { justify-content:flex-end; padding:20px; }
.vb-k7m-accordion__label { writing-mode:horizontal-tb; transform:none; font-size:24px; }
.vb-k7m-accordion__item[aria-expanded="true"] .vb-k7m-accordion__trigger { width:100%; height:100%; padding:20px; }
.vb-k7m-accordion__item[aria-expanded="true"] .vb-k7m-accordion__label { position:absolute; top:20px; left:20px; writing-mode:horizontal-tb; transform:none; font-size:24px; }
.vb-k7m-accordion__content { inset:0; padding:30px 24px 90px; justify-content:flex-end; }
.vb-k7m-accordion__content h3 { font-size:38px; }
.vb-k7m-accordion__content p { font-size:18px; }
.vb-k7m-accordion__link { right:18px; bottom:18px; width:56px; height:56px; font-size:30px; }
}
@media (max-width:380px) {
.vb-k7m-accordion__item[aria-expanded="true"] { height:390px; }
.vb-k7m-accordion__content h3 { font-size:32px; }
.vb-k7m-accordion__content { padding-right:18px; padding-left:18px; }
}
@media (prefers-reduced-motion:reduce) { .vb-k7m-accordion *, .vb-k7m-accordion *::before, .vb-k7m-accordion *::after { transition-duration:.01ms !important; scroll-behavior:auto !important; } }
</style>
<div class="vb-k7m-accordion__inner">
<h2 class="vb-k7m-accordion__title" id="vb-k7m-title">Путешествие по невероятной Карелии</h2>
<div class="vb-k7m-accordion__row" role="group" aria-label="Разделы аккордеона">
<article class="vb-k7m-accordion__item" style="--vb-k7m-photo:url('https://static.tildacdn.com/tila3338-3065-4433-b865-306363353630/photo-1622171955561-.jpg')" aria-expanded="true">
<button class="vb-k7m-accordion__trigger" type="button" aria-expanded="true"><span class="vb-k7m-accordion__label">Ладожские шхеры</span></button>
<div class="vb-k7m-accordion__content"><h3>Острова и простор Ладоги</h3><p>Путешествие по скалистым островам, сосновым берегам и тихим бухтам карельского озера.</p><a class="vb-k7m-accordion__link" href="#ladoga" aria-label="Подробнее о Ладожских шхерах">↗</a></div>
</article>
<article class="vb-k7m-accordion__item" style="--vb-k7m-photo:url('https://static.tildacdn.com/tila6230-6530-4065-b364-643632366130/photo-1686906606816-.jpg')" aria-expanded="false">
<button class="vb-k7m-accordion__trigger" type="button" aria-expanded="false"><span class="vb-k7m-accordion__label">Дом у воды</span></button>
<div class="vb-k7m-accordion__content"><h3>Медленный ритм Карелии</h3><p>Уютные поездки с ночёвками у озера, местной кухней и временем для настоящего отдыха.</p><a class="vb-k7m-accordion__link" href="#stay" aria-label="Подробнее об отдыхе у воды">↗</a></div>
</article>
<article class="vb-k7m-accordion__item" style="--vb-k7m-photo:url('https://static.tildacdn.com/tila3936-6135-4935-b139-356538656639/photo-1534531409543-.jpg')" aria-expanded="false">
<button class="vb-k7m-accordion__trigger" type="button" aria-expanded="false"><span class="vb-k7m-accordion__label">Водопады</span></button>
<div class="vb-k7m-accordion__content"><h3>Тропы к шумной воде</h3><p>Откройте для себя карельские водопады, лесные маршруты и выразительные северные пейзажи.</p><a class="vb-k7m-accordion__link" href="#waterfalls" aria-label="Подробнее о поездках к водопадам">↗</a></div>
</article>
<article class="vb-k7m-accordion__item" style="--vb-k7m-photo:url('https://static.tildacdn.com/tila6130-6130-4264-a133-363333363563/photo-1488415032361-.jpg')" aria-expanded="false">
<button class="vb-k7m-accordion__trigger" type="button" aria-expanded="false"><span class="vb-k7m-accordion__label">Северные ночи</span></button>
<div class="vb-k7m-accordion__content"><h3>Карелия после заката</h3><p>Вечерние выезды, звёздное небо и северная тишина вдали от городских огней.</p><a class="vb-k7m-accordion__link" href="#nights" aria-label="Подробнее о северных ночах">↗</a></div>
</article>
</div>
</div>
<script>
(function(){
var root=document.getElementById('vb-k7m-accordion');
if(!root) return;
var items=Array.prototype.slice.call(root.querySelectorAll('.vb-k7m-accordion__item'));
items.forEach(function(item){
var button=item.querySelector('.vb-k7m-accordion__trigger');
button.addEventListener('click',function(){
var shouldOpen=item.getAttribute('aria-expanded')!=='true';
items.forEach(function(other){
var open=other===item&&shouldOpen;
other.setAttribute('aria-expanded',String(open));
other.querySelector('.vb-k7m-accordion__trigger').setAttribute('aria-expanded',String(open));
});
});
});
})();
</script>
</section>