.horizontal-accordion { position: relative; width: 100%; height:600px; display: flex; margin: 0 auto; gap: 15px; /* Margines między elementami akordeonu */ align-items: stretch; }
.accordion-item { position: relative; height: 100%; overflow: hidden; background-color: #333; transition: all 0.5s ease; flex: 1; cursor: pointer; border-radius: 20px; }
.accordion-item.active { flex: 6; /* Aktywny element zajmuje około 50% ekranu */ cursor: default; }
.accordion-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; }
.accordion-bg:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(64.12deg, #EDD5C7 -35.44%, rgba(255, 255, 255, 0.2) 97.02%), rgba(255, 255, 255, 0.8); }
.accordion-title { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; opacity:0; transition: opacity 0.3s; }
.accordion-item.active .accordion-title { opacity: 0; }
svg.tiitle-deco-arrow{margin-top: 7px;margin-right: 20px;}
hr.medium-orange-line-with-dots { position: relative; width: calc(100% - 25px); max-width: 55%; border-top: 2px solid #FE5E20; margin: 20px 0; border-radius: 6px; }
hr.medium-orange-line-with-dots::after { content: '...'; position: absolute; right: -21px; top: -9px; font-size: 25px; line-height: 0; color: #FE5E20; }
.accordion-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; padding: 30px; opacity: 0; visibility: hidden; display: flex; flex-direction: column; transition: opacity 0.3s; }
.accordion-item.active .accordion-content { opacity: 1; visibility: visible; }
.accordion-content h2 { margin-bottom: 20px; }
.accordion-content p { max-width: 600px; }
.boxes-in-accordion { position:relative; gap: 15px; margin-bottom:40px; }
.box-in-accordion { width: 25%; max-widht: 200px; padding: 10px; background: rgba(255,255,255,0.9); box-shadow: 0px 0px 42.1px 0px rgba(215, 205, 201, 0.3); border-radius: 16px; }
/* Nawigacja wewnątrz aktywnego akordeonu */
.accordion-controls { position: absolute; width: 100%; bottom: 20px; left: 0px; display: flex; gap: 15px; z-index: 4; opacity: 0; visibility: hidden; justify-content: space-between; padding: 0 20px; }
.accordion-item.active .accordion-controls { opacity: 1; visibility: visible; }
.accordion-control { border: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; background-color: transparent; font-size: 18px; font-weight: 400; letter-spacing: 0; color: #222; gap: 15px; }
.accordion-control svg{transition:all 0.3s;} 
.accordion-control:hover svg { transform:scale(1.1); }
    

 /* Wersja mobilna - układ pionowy */
.cards-wrapper { width: 100%; overflow-x: hidden; /* Ukrycie scrolla na poziomie wrappera */ display: flex; justify-content: center; overscroll-behavior: contain; /* Zapobiega przewijaniu strony przy przewijaniu kart */ }
.cards { display: flex; justify-content: center; width: 100%; padding: 0 calc((100% - 1410px) / 2); overflow-x: auto; /* Poprawka – tylko przewijanie poziome */ overflow-y: hidden; /* Zapobieganie przewijaniu pionowemu */ overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; /* Blokuje scrollowanie w pionie */ -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */ }
.cards::-webkit-scrollbar { width: 0 !important; display: none; }
.cards > * + * { margin-left: 15px; }
.cards::after { content: ""; display: block; flex: 0 0 var(--space); }
.card.card-case-study { flex: 1 0 auto; width: 100%; max-width: 280px; height:auto; padding:15px;background-color:#303239;background-image: url('https://marketing.biimedia.com/wp-content/uploads/2025/02/vertical-accordion.avif'); background-size: cover; background-position: center;border:0;border-radius:20px;overflow: hidden;}
.card.card-case-study:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(64.12deg, #EDD5C7 -35.44%, rgba(255, 255, 255, 0.2) 97.02%), rgba(255, 255, 255, 0.8); z-index:-1; }
.card.card-case-study h3{font-size:18px;}
.card.card-case-study p{font-size:14px;}
.img-cover-case-study{margin-bottom:20px;margin:-15px -15px 20px -15px;}
.img-cover-case-study img{ width: 100%;height: 120px; object-fit: cover; object-position: center;}
.card.card-case-study .box-in-accordion  p.primary-color{font-size:24px;}
.card.card-case-study .box-in-accordion svg{transform:rotate(-90deg)}

@media only screen and (max-width:1100px) {
.card.card-case-study{max-width: 360px;}
.horizontal-accordion{gap:7.5px;}
.accordion-item h3{font-size: 18px;}
.accordion-title{font-size:12px;}
.accordion-item.active{flex: 5;}
.box-in-accordion { width: 33.333%;}
.box-in-accordion{font-size:14px;}
.box-in-accordion .h2{font-size:24px;}
}

@media only screen and (max-width:1440px) {
    .cards { padding: 0 40px; }
}

@media only screen and (max-width:767px) {
.cards { padding: 0px 40px 40px 15px; }  
.card.card-case-study {max-width: 320px; align-self: flex-start;}
.boxes-in-accordion{margin-bottom:0;transition: all 0.3s ease-in-out;}
.box-in-accordion { width: 100%;margin-bottom:7.5px;}
button.toggle-boxes { background: top; font-size: 13px; font-weight: 500; color: #222; padding: 0; display: flex; align-items: center; gap: 7.5px; justify-content: end;border: 0; }
.toggle-icon { transition: transform 0.3s ease-in-out; }
.toggle-icon.rotate { transform: rotate(180deg); }
}