:root {

    --color-primary: #0A3D62;

    --color-primary-light: #1E90FF;

    --color-accent: #FFB400;

    --color-bg: #F5F7FA;

    --color-text: #222;

    --color-muted: #666;

    --max-width: 1200px;

    --transition: 0.3s ease;

    --radius: 6px;

    --shadow: 0 10px 25px rgba(0,0,0,0.08);

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    color: var(--color-text);

    background: #fff;

    line-height: 1.6;

}



img {

    max-width: 100%;

    display: block;

}



a {

    color: var(--color-primary);

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



.container {

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 1.5rem;

}



/* HEADER */



.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: #fff;

    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 64px;

}



.logo a {

    font-weight: 700;

    font-size: 1.2rem;

    color: var(--color-primary);

}



.main-nav ul {

    list-style: none;

    display: flex;

    gap: 1rem;

    margin: 0;

    padding: 0;

}



.main-nav a {

    font-size: 0.95rem;

    font-weight: 500;

    padding: 0.4rem 0.6rem;

    border-radius: 4px;

}



.main-nav a:hover {

    background: var(--color-bg);

}



.btn-nav {

    background: var(--color-accent);

    color: #000;

}



.nav-toggle {

    display: none;

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

}



.nav-toggle span {

    display: block;

    width: 22px;

    height: 2px;

    background: var(--color-text);

    margin: 4px 0;

}



/* HERO */



.hero {

    padding: 4rem 0 3rem;

    background: var(--color-bg);

}



.hero-inner {

    display: grid;

    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);

    gap: 2rem;

    align-items: center;

}



.hero h1 {

    font-size: 2.2rem;

    margin-bottom: 1rem;

    color: var(--color-primary);

}



.hero h2 {

    font-size: 1.1rem;

    font-weight: 400;

    color: var(--color-muted);

    margin-bottom: 1.5rem;

}



.hero-cta {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 1rem;

}



.btn {

    display: inline-block;

    padding: 0.7rem 1.4rem;

    border-radius: var(--radius);

    font-weight: 600;

    font-size: 0.95rem;

    border: none;

    cursor: pointer;

    text-align: center;

    transition: var(--transition);

}



.btn-primary {

    background: var(--color-primary);

    color: #fff;

}



.btn-primary:hover {

    background: var(--color-primary-light);

    text-decoration: none;

}



.btn-secondary {

    background: #fff;

    color: var(--color-primary);

    border: 1px solid var(--color-primary);

}



.btn-secondary:hover {

    background: var(--color-primary);

    color: #fff;

    text-decoration: none;

}



.hero-badges {

    list-style: none;

    padding: 0;

    margin: 1rem 0 0;

    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem 1.5rem;

    font-size: 0.9rem;

    color: var(--color-muted);

}



/* PANELY */



.panely {

    padding: 3rem 0;

    background: #fff;

}



.panely-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.5rem;

}



.panel-card {

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 1rem;

    text-align: center;

    

}



.panel-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.panel-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 16px 32px rgba(0,0,0,0.15);

}



.panel-card h3 {

    margin-top: 0.8rem;

    margin-bottom: 0.4rem;

}



.panel-card img {

    width: 100%;

    height: auto;

    object-fit: cover; /* nebo contain – podle toho, co chceš */

    border-radius: var(--radius);

    display: block;

}



/* PROČ MY */



.proc-my {

    padding: 3rem 0;

    background: var(--color-bg);

}



.proc-my h2 {

    text-align: center;

    margin-bottom: 2rem;

}



.proc-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

}



.proc-item {

    background: #fff;

    border-radius: var(--radius);

    padding: 1rem;

    text-align: center;

    box-shadow: var(--shadow);

    font-weight: 500;

}



/* SLUŽBY */



.sluzby {

    padding: 3rem 0;

}



.sluzby h2 {

    margin-bottom: 1.5rem;

}



.sluzby-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.sluzba-card {

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 1.2rem;

}



.sluzba-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.sluzba-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 16px 32px rgba(0,0,0,0.15);

}



/* KALKULAČKA */



.kalkulacka {

    padding: 3rem 0;

    background: var(--color-bg);

}



.kalkulacka-inner {

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: 2rem;

    align-items: flex-start;

}



.kalkulacka form {

    background: #fff;

    padding: 1.5rem;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.form-row {

    margin-bottom: 1rem;

}



.form-row label {

    display: block;

    font-size: 0.9rem;

    margin-bottom: 0.3rem;

}



input[type="text"],

input[type="email"],

input[type="tel"],

input[type="number"],

input[type="file"],

select,

textarea {

    width: 100%;

    padding: 0.5rem 0.6rem;

    border-radius: var(--radius);

    border: 1px solid #ccc;

    font-size: 0.95rem;

}



textarea {

    resize: vertical;

}



.kalkulacka-result {

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 1rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.kalkulacka-result img {

    border-radius: var(--radius);

    height: auto;

    object-fit: cover; /* nebo contain – podle toho, co chceš */

}



.result-content h3 {

    margin-top: 0;

}



/* PROCES */



.proces {

    padding: 3rem 0;

}



.proces h2 {

    text-align: center;

    margin-bottom: 2rem;

}



.proces-steps {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1.5rem;

}



.step {

    text-align: center;

}



.step span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--color-primary);

    color: #fff;

    font-weight: 700;

    margin-bottom: 0.5rem;

}



/* REFERENCE SLIDER */



.reference {

    padding: 3rem 0;

    background: var(--color-bg);

}



.reference h2 {

    text-align: center;

    margin-bottom: 0.5rem;

}



.reference p {

    text-align: center;

    margin-bottom: 2rem;

    color: var(--color-muted);

}



.ref-slider {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius);

    display: flex;

    align-items: stretch;

    

}



.ref-track {

    display: flex;

    transition: transform 0.4s ease;

    align-items: stretch;

}



.ref-card {

    min-width: 100%;

    box-sizing: border-box;

    padding: 1.5rem;

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    text-align: left;

    height: 100%;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.ref-card h3 {

    margin-top: 1rem;

}



/* ====== VĚTŠÍ ŠIPKY SLIDERU – MIMO OBSAH ====== */



.ref-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;

    height: 55px;

    background: rgba(255,255,255,0.9);

    border: none;

    border-radius: 50%;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    cursor: pointer;



    display: flex;

    align-items: center;

    justify-content: center;



    font-size: 1.8rem;

    font-weight: bold;

    color: #333;



    z-index: 50;

    transition: 0.25s ease;

}



.ref-arrow:hover {

    background: rgba(255,255,255,1);

    box-shadow: 0 6px 16px rgba(0,0,0,0.25);

}



.ref-arrow-left {

    display: none;          /* úplně skrytá, ale v DOM zůstává */

}



.ref-arrow-right {

    right: 5px;  /* mimo text */

}



/* Mobil */

@media (max-width: 600px) {

    .ref-arrow {

        width: 45px;

        height: 45px;

        font-size: 1.5rem;

    }



    .ref-arrow-left {

        left: -15px;

    }



    .ref-arrow-right {

        right: -15px;

    }

}



/* O NÁS */



.onas {

    padding: 3rem 0;

}



.onas-inner {

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: 2rem;

    align-items: center;

}



.onas-image {

    border-radius: var(--radius);

    overflow: hidden;

}



.onas-image img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

}



/* FAQ */



.faq {

    padding: 3rem 0;

    background: var(--color-bg);

}



.faq h2 {

    text-align: center;

    margin-bottom: 2rem;

}



.faq-item {

    margin-bottom: 1rem;

    border-radius: var(--radius);

    background: #fff;

    box-shadow: var(--shadow);

}



.faq-question {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    cursor: pointer;

    background: none;

    border: none;

    font-size: 1rem;

     padding: 1.2rem 1.5rem; /* ← zvětší výšku i šířku tlačítka */

    text-align: left;        /* lepší zarovnání textu */

}



.faq-icon {

    font-size: 1.3rem;

    opacity: 0.7;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



/* při otevření změníme hamburger na X */

.faq-question.active .faq-icon {

    transform: rotate(90deg);

    opacity: 1;

}



.faq-answer {

    display: none;

    padding: 0 1.5rem 1.2rem; /* odsazení textu */

    line-height: 1.6;         /* lepší čitelnost */

    color: #333;              /* příjemnější barva textu */

    margin-top: 5px;        /* ← přesně ta mezera, kterou chceš */

    border-top: 1px solid #eee;

}



.faq-answer.open {

    display: block;

}



/* KONTAKT */



.kontakt {

    padding: 3rem 0;

}



.kontakt-inner {

    display: grid;

    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);

    gap: 2rem;

}



.checkbox-group {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.4rem 1rem;

    font-size: 0.9rem;

}



.honeypot {

    display: none;

}



.form-note {

    font-size: 0.85rem;

    color: var(--color-muted);

    margin-top: 0.5rem;

}



.kontakt-info h3 {

    margin-top: 0;

}



/* FOOTER */



.site-footer {

    padding: 1.5rem 0;

    background: #111;

    color: #ccc;

    font-size: 0.9rem;

}



.footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

}



.site-footer a {

    color: #fff;

}



/* RESPONSIVE */



/* ============================ HEADER BASE ============================ */



header,

.header-inner {

    position: relative;

}



/* další základní styly headeru… */



/* ============================ TABLET + MOBIL (max-width: 992px) ============================ */

@media (max-width: 992px) {



    /* GRIDY */

    .hero-inner,

    .kalkulacka-inner,

    .onas-inner,

    .kontakt-inner {

        grid-template-columns: 1fr;

    }



    .proces-steps {

        grid-template-columns: repeat(2, 1fr);

    }



    .sluzby-grid,

    .panely-grid,

    .proc-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* MENU – DESKTOP OFF */

    .main-nav {

        display: none;

    flex-direction: column;

    background: #fff;

    width: 100%;

    position: absolute;

    top: 64px;

    left: 0;

    right: 0;

    z-index: 9999;

    }



    

    .main-nav ul {

        display: flex;

        flex-direction: column;

        gap: 1rem;

        padding: 0.8rem 1.5rem 1rem;

    }



    .main-nav.active {

        display: flex;

    }



    /* HAMBURGER – TABLET + MOBIL */

    .nav-toggle {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        background: none;

        border: none;

        cursor: pointer;

    }



    .nav-toggle span {

        width: 24px;

        height: 2px;

        background: #000;

        border-radius: 2px;

        display: block;

        margin: 0;

        transition: transform 0.3s ease, opacity 0.3s ease;

    }



    /* ANIMACE DO X */

    .nav-toggle.active span:nth-child(1) {

        transform: translateY(6px) rotate(45deg);

    }



    .nav-toggle.active span:nth-child(2) {

        opacity: 0;

    }



    .nav-toggle.active span:nth-child(3) {

        transform: translateY(-6px) rotate(-45deg);

    }



    

}



/* ============================ MOBIL (max-width: 768px) ============================ */

@media (max-width: 768px) {



    /* DROPDOWN MENU */

    .main-nav {

        position: absolute;

        top: 64px;

        left: 0;

        right: 0;

        background: #fff;

        display: none;

        box-shadow: 0 10px 20px rgba(0,0,0,0.08);

    }



    .main-nav ul {

        flex-direction: column;

        padding: 0.8rem 1.5rem 1rem;

    }



    /* GRIDY */

    .panely-grid,

    .sluzby-grid,

    .proc-grid,

    .proces-steps {

        grid-template-columns: 1fr;

    }



    .checkbox-group {

        grid-template-columns: 1fr;

    }

}



/* ============================ EXTRA SMALL MOBIL (max-width: 480px) ============================ */

@media (max-width: 480px) {

    .hero h1 {

        font-size: 1.7rem;

    }



    .hero h2 {

        font-size: 1rem;

    }

}



/* HERO – obrázek za obsahem */

.hero {

    position: relative;

    overflow: hidden;

    padding: 10rem 0 8rem;

}



/* Pozadí hero obrázku */

.hero-bg {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

}



.hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(0.55);

    display: block;

}



/* Obsah hero nad obrázkem */

.hero-inner {

    position: relative;

    z-index: 2;

}



.hero h1,

.hero h2,

.hero p,

.hero li {

    color: #ffffff;

}



.provozovatel {

    margin-top: -1.2rem; /* zmenší mezeru */

}



/* ====== GALERIE OBRÁZKŮ V REFERENCE ====== */



.cs-gallery {

    display: grid;

    gap: 20px;

    width: 100%;

}



/* Kritické – dovolí gridu se zmenšit */

.cs-gallery > * {

    min-width: 0;

    min-height: 0;

}



.cs-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.cs-item img {

    flex-shrink: 0;

}



/* Obrázky – správné chování na všech zařízeních */

.cs-gallery img {

    width: 100%;

    height: auto;

    object-fit: cover; /* nebo contain, ale cover je lepší pro růst */

    max-height: none; /* ← DŮLEŽITÉ */

    object-fit: cover;

}



/* Popisek pod obrázkem */

.ref-popis {

    font-size: 0.9rem;

    margin-top: 6px;

    text-align: center;

}



/* Desktop – 3 sloupce */

@media (min-width: 992px) {

    .cs-gallery {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



/* Tablet – 2 sloupce */

@media (min-width: 600px) and (max-width: 991px) {

    .cs-gallery {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



/* Mobil – 1 sloupec */

@media (max-width: 599px) {

    .cs-gallery {

        grid-template-columns: minmax(0, 1fr);

    }

}













/* ====== GRAFY – FUNKČNÍ RESPONSIVITA + CENTROVÁNÍ ====== */



.ref-cs-graphs {

    flex: 1; /* vyplní volný prostor mezi obsahem a závěrem */

    display: flex;

    flex-wrap: wrap;

    justify-content: center; /* centrování zleva–doprava */

    align-items: center;     /* centrování shora–dolů */

    gap: 20px;

    margin: 1.5rem 0;

}



/* Wrapper jednoho grafu */

.graph-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    flex: 1 1 calc(50% - 20px); /* 2 grafy vedle sebe */

    max-width: 400px;

    min-width: 260px; /* DŮLEŽITÉ – umožní skládání pod sebe */

}



/* Canvas */

.graph-item canvas {

    width: 100%;

    height: auto !important;

    background: none;

    padding: 0;

    border-radius: 0;

}



/* Mobil – grafy pod sebou */

@media (max-width: 600px) {

    .graph-item {

        flex: 1 1 100%;

        max-width: 100%;

    }

}



@media (max-width: 400px) {

    .cs-gallery img,

    .before-after img {

        width: 100%;

        height: auto !important;

        max-height: 200px; /* nebo 150px, podle potřeby */

        object-fit: contain !important;

    }



    .cs-gallery > *,

    .before-after {

        min-width: 0;

        min-height: 0;

    }

}







/* BEFORE/AFTER SLIDER – hlavní obrázek reference */



/* Textové popisky BEFORE / AFTER */

.slider-label {

    position: absolute;

    top: 20px;

    padding: 8px 16px;

    font-size: 22px;

    font-weight: 700;

    color: white;

    background: rgba(0, 0, 0, 0.45);

    border-radius: 6px;

    z-index: 5;

    pointer-events: none;

    transition: opacity 0.25s ease;

}



.slider-label-left { left: 20px; }

.slider-label-right { right: 20px; }

.slider-label.hidden { opacity: 0; }



.main-slider {

    width: 100%;

    margin-bottom: 40px;

}



/* ⭐ DŮLEŽITÉ – slider vyplní volné místo */

.before-after-container {

    flex: 1;

    display: flex;

    align-items: stretch;

}



/* ⭐ DŮLEŽITÉ – odstraněna pevná výška */

.slider-wrapper {

    flex: 1;

    position: relative;

    width: 100%;

    overflow: hidden;

    cursor: ew-resize;

    border-radius: 8px;

    user-select: none;

}



.slider-wrapper .img {

    min-height: clamp(220px, 40vw, 450px);

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    object-fit: cover;

}



.slider-wrapper .after {

    clip-path: inset(0 0 0 50%);

}



.slider-handle {

    position: absolute;

    top: 0;

    left: 50%;

    width: 4px;

    height: 100%;

    background: white;

    border-left: 2px solid black;

    border-right: 2px solid black;

    cursor: ew-resize;

    box-shadow: 0 0 8px rgba(0,0,0,0.4);

    

}



.kontakt-info {

    background: #ffffff;

    padding: 30px;

    border-radius: 14px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.08);

    max-width: 420px;

    width: 100%;

    border: 1px solid #e8e8e8;

}



.kontakt-info h3 {

    font-size: 1.6rem;

    margin-bottom: 20px;

    color: #222;

    font-weight: 700;

}



.kontakt-info p {

    margin: 8px 0;

    font-size: 1rem;

    color: #444;

    line-height: 1.5;

}



.kontakt-info strong {

    color: #111;

}



.kontakt-info a {

    color: #0077cc;

    text-decoration: none;

    font-weight: 600;

}



.kontakt-info a:hover {

    text-decoration: underline;

}



.kontakt-info .provozovatel {

    margin-top: -5px;

    margin-bottom: 15px;

    font-size: 0.95rem;

    color: #666;

}



/* Oddělení adresy */

.kontakt-info [itemprop="address"] {

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px solid #e5e5e5;

}



/* Layout sekce kontakt */

.kontakt-inner {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    align-items: flex-start;

}



.kontakt-form {

    flex: 1;

    min-width: 300px;

}



.kontakt-info {

    flex: 0 0 350px;

}



@media (max-width: 600px) {



    /* Reference 1 – skrytí galerie, grafů i before/after */

    .ref-1 .cs-gallery,

    .ref-1 .ref-cs-graphs,

    .ref-1 .before-after,

    .ref-1 .before-after-container {

        display: none !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    /* Reference 2 – skrytí before/after slideru */

    .ref-2 .before-after,

    .ref-2 .before-after-container {

        display: none !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

    }

}



/* Mobilní verze – Reference 1: zobrazit malé grafy */

@media (max-width: 600px) {



    /* Skryjeme galerii */

    .ref-1 .cs-gallery {

        display: none !important;

    }



    /* Zobrazíme grafy, ale malé */

    .ref-1 .ref-cs-graphs {

        display: flex !important;

        flex-direction: column;

        align-items: center;

        gap: 10px;

        margin: 1rem 0 !important;

    }



    .ref-1 .graph-item {

        max-width: 150px !important;

        min-width: 120px !important;

        flex: none !important;

    }



    .ref-1 .graph-item canvas {

        width: 100% !important;

        height: auto !important;

    }



    /* Reference 2 – skryjeme before/after */

    .ref-2 .before-after,

    .ref-2 .before-after-container {

        display: none !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

    }

}



/* ====== MOBILNÍ ÚPRAVY REFERENCÍ + OPRAVA TEXTU ====== */

@media (max-width: 600px) {



    /* Reference 1 – skryjeme galerii */

    .ref-card.ref-case-study.ref-1 .cs-gallery {

        display: none !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    /* Reference 1 – větší grafy */

    .ref-card.ref-case-study.ref-1 .ref-cs-graphs {

        display: flex !important;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        margin: 1.5rem 0 !important;

    }



    .ref-card.ref-case-study.ref-1 .graph-item {

        max-width: 220px !important;

        min-width: 180px !important;

        flex: none !important;

    }



    .ref-card.ref-case-study.ref-1 .graph-item canvas {

        width: 100% !important;

        height: auto !important;

    }



    /* Reference 2 – skryjeme before/after slider */

    .ref-card.ref-case-study.ref-2 .before-after,

    .ref-card.ref-case-study.ref-2 .before-after-container {

        display: none !important;

        height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    /* Reference 2 – minimální výška pro vyrovnání s referencí 1 */

    .ref-card.ref-case-study.ref-2 {

        min-height: 520px !important;

    }



    /* Slider – auto výška */

    .ref-slider,

    .ref-track,

    .ref-card {

        height: auto !important;

        min-height: auto !important;

    }



    /* Odsazení obsahu uvnitř referencí */

    .ref-card {

        padding: 16px !important;

        box-sizing: border-box !important;

    }



    /* Zalamování textu */

    .ref-card,

    .ref-card * {

        word-wrap: break-word !important;

        overflow-wrap: break-word !important;

        white-space: normal !important;

    }



    /* Zabrání horizontálnímu scrollu */

    html, body {

        overflow-x: hidden !important;

    }

}



/* === OPRAVA ZAOBLENÍ REFERENCE 1 === */



/* Slider musí mít větší radius, jinak ořízne kartu */

.ref-slider {

    border-radius: 8px !important;

    overflow: hidden !important;

}



/* Karta Reference 1 */

.ref-card.ref-case-study.ref-1 {

    border-radius: 8px !important;

    overflow: hidden !important;

    background: #fff !important;

}



/* Galerie */

.ref-card.ref-case-study.ref-1 .cs-gallery {

    border-radius: 

    4px !important;

    overflow: hidden !important;

}



/* Kontejner grafů */

.ref-card.ref-case-study.ref-1 .ref-cs-graphs {

    border-radius: 8px !important;

    overflow: hidden !important;

}



/* Jednotlivé grafy */

.ref-card.ref-case-study.ref-1 .graph-item {

    border-radius: 8px !important;

    overflow: hidden !important;

}



/* Canvas uvnitř grafu */

.ref-card.ref-case-study.ref-1 .graph-item canvas {

    border-radius: 8px !important;

    overflow: hidden !important;

    display: block !important;

}



/* === FIX: jednotný border-radius pro celou referenci 1 === */



.ref-slider,

.ref-card.ref-case-study.ref-1,

.ref-card.ref-case-study.ref-1 .cs-gallery,

.ref-card.ref-case-study.ref-1 .ref-cs-graphs,

.ref-card.ref-case-study.ref-1 .graph-item,

.ref-card.ref-case-study.ref-1 .graph-item canvas,

.ref-card.ref-case-study.ref-1 .before-after-container,

.ref-card.ref-case-study.ref-1 .slider-wrapper,

.ref-card.ref-case-study.ref-1 img {

    border-radius: 8px !important;

    overflow: hidden !important;

}