/* ==========================================================

   RESET

========================================================== */



*,

*::before,

*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{



    scroll-behavior:smooth;



}



body{



    font-family:"Inter",sans-serif;



    background:#ffffff;



    color:#1f3153;



    line-height:1.7;



    overflow-x:hidden;



}



img{



    display:block;



    max-width:100%;



}



a{



    text-decoration:none;



    color:inherit;



}



button{



    font-family:inherit;



}



/* ==========================================================

   VARIABLES

========================================================== */



:root{



    --blue:#13294b;



    --green:#18b4a0;



    --text:#667085;



    --light:#f7fbfd;



    --border:#e7edf3;



    --radius:18px;



}



/* ==========================================================

   HEADER

========================================================== */



.header{



    position:fixed;



    top:0;

    left:0;



    width:100%;



    z-index:9999;



    background:transparent;



}



.header-container{



    max-width:1600px;



    margin:auto;



    padding:30px 45px;



    display:flex;



    justify-content:space-between;



    align-items:center;



}



.menu-toggle,

.language-button{



    background:none;



    border:none;



    cursor:pointer;



    color:var(--blue);



}



.menu-toggle{



    font-size:34px;



    transition:.25s;



}



.menu-toggle:hover{



    color:var(--green);



}



.language-button{



    font-size:17px;



    font-weight:600;



    transition:.25s;



}



.language-button:hover{



    color:var(--green);



}



/* ==========================================================

   HERO

========================================================== */



.hero{



    padding-top:60px;



    padding-bottom:10px;



    text-align:center;



    background:linear-gradient(

        180deg,

        #ffffff 0%,

        #f8fbfd 100%

    );



}



.hero-content{



    width:min(900px,90%);



    margin:auto;



}



.hero-logo{



    width:150px;



    margin:0 auto 10px;



}



.hero h1{



    font-size:60px;



    line-height:1.05;



    font-weight:800;



    color:var(--blue);



}



.hero h1 span{



    color:var(--green);

    font-size:.72em;



}



.hero-divider{



    width:180px;



    height:2px;



    background:#d8dee6;



    margin:35px auto;



}



.hero-subtitle{



    max-width:760px;



    margin:auto;



    font-size:22px;



    color:var(--text);



    line-height:1.8;



}



/* ==========================================================

   HERO BUTTONS

========================================================== */



.hero-buttons{



    margin-top:30px;



    display:flex;



    justify-content:center;



    gap:20px;



    flex-wrap:wrap;



}



.btn{



    display:inline-flex;



    align-items:center;



    justify-content:center;



    padding:16px 34px;



    border-radius:50px;



    font-size:17px;



    font-weight:600;



    transition:.25s;



}



.btn-primary{



    background:var(--green);



    color:#fff;



}



.btn-primary:hover{



    transform:translateY(-3px);



    box-shadow:0 14px 35px rgba(24,180,160,.25);



}



.btn-secondary{



    border:2px solid var(--green);



    color:var(--green);



    background:#fff;



}



.btn-secondary:hover{



    background:var(--green);



    color:#fff;



}



/* ==========================================================

   PEOPLE SECTION

========================================================== */



.people-section{



    max-width:1450px;



    margin:30px auto;



    padding:0 30px;



}



.people-grid{



    display:grid;



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



    gap:18px;



}



.people-grid img{



    width:100%;



    aspect-ratio:1/1;



    object-fit:cover;



    border-radius:18px;



    transition:.35s;



}



.people-grid img:hover{



    transform:scale(1.03);



    box-shadow:0 18px 35px rgba(0,0,0,.15);



}



/* ==========================================================

   TEXT BLOCKS INSIDE GALLERY

========================================================== */



.quote{



    display:flex;



    justify-content:center;



    align-items:center;



    text-align:center;



    padding:20px;



}



.q1{



    grid-column:2 / span 2;



}



.q1 h2{



    font-size:44px;



    line-height:1.2;



    color:var(--blue);



    font-weight:700;



}



.q2{



    grid-column:1 / span 3;



}



.q2 p{



    font-size:28px;



    line-height:1.5;



    color:var(--blue);



}



.q3{



    grid-column:3;



}



.q3 h3{



    font-size:36px;



    color:var(--green);



    line-height:1.3;



}



.q4{



    grid-column:4 / span 2;



}



.q4 p{



    font-size:28px;



    color:var(--green);



    line-height:1.5;



}



/* ==========================================================

   REVEAL SECTION

========================================================== */



.reveal{



    width:min(900px,90%);



    margin:90px auto 140px;



    text-align:center;



}



.reveal h2{



    font-size:56px;



    font-weight:800;



    color:var(--blue);



    margin-bottom:35px;



    line-height:1.15;



}



.reveal p{



    font-size:22px;



    color:var(--text);



    line-height:1.7;



    margin-bottom:22px;



}



.reveal p:last-of-type{



    margin-bottom:0;



}



.reveal strong{



    color:var(--blue);



}



/* ==========================================================

   FOOTER

========================================================== */



.footer{



    margin-top:120px;



    padding:60px 20px;



    background:#f8fbfd;



    border-top:1px solid var(--border);



}



.footer-container{



    width:min(1200px,90%);



    margin:auto;



    text-align:center;



}



.footer-logo{



    width:90px;



    margin:0 auto 25px;



}



.footer p{



    color:var(--text);



    font-size:17px;



}



.footer small{



    display:block;



    margin-top:15px;



    color:#98a2b3;



}



.footer-social span{

    color:#ffffff;

}



.footer-social{

    display:flex;

    align-items:center;

    gap:12px;

}



.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;



    width:28px;

    height:28px;



    color:#ffffff;

}



.footer-social svg{

    width:28px;

    height:28px;

}



/* ==========================================================

   SIDE MENU

========================================================== */



.side-menu{



    position:fixed;



    top:0;



    left:-340px;



    width:320px;



    height:100vh;



    background:#fff;



    padding:45px 35px;



    box-shadow:8px 0 35px rgba(0,0,0,.15);



    transition:left .35s ease;



    z-index:99999;



}



.side-menu.open{



    left:0;



}



.close-menu{



    background:none;



    border:none;



    font-size:34px;



    cursor:pointer;



    color:var(--blue);



}



.side-menu ul{



    list-style:none;



    margin-top:60px;



}



.side-menu li{



    margin-bottom:28px;



}



.side-menu a{



    font-size:22px;



    font-weight:600;



    color:var(--blue);



    transition:.25s;



}



.side-menu a:hover{



    color:var(--green);



}



.menu-overlay{



    position:fixed;



    inset:0;



    background:rgba(0,0,0,.35);



    opacity:0;



    visibility:hidden;



    transition:.3s;



    z-index:99990;



}



.menu-overlay.show{



    opacity:1;



    visibility:visible;



}



.my-salidi-link {

    margin-left: auto;

    margin-right: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    width: auto;

    min-width: 82px;

    height: 32px;

    color: #13294b;

    text-decoration: none;

    border-right: 1px solid #d9dee5;

    padding-right: 18px;

}



.my-salidi-link img {

    width: 26px;

    height: 26px;

    flex-shrink: 0;

}



.my-salidi-label {

    font-size: 14px;

    line-height: 1.1;

    white-space: nowrap;

    color: #13294b;

}



/* ==========================================================

   RESPONSIVE

========================================================== */



@media (max-width:1200px){



    .people-grid{



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



    }



    .q1{



        grid-column:2 / span 2;



    }



    .q2{



        grid-column:1 / span 4;



    }



    .q4{



        grid-column:2 / span 3;



    }



}



@media (max-width:900px){



    .header-container{



        padding:22px 25px;



    }



    .hero{



        padding-top:95px;



    }



    .hero-logo{



        width:125px;



    }



    .hero h1{



        font-size:46px;



    }



    .hero-subtitle{



        font-size:20px;



    }



    .people-grid{



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



        gap:14px;



    }



    .quote{



        grid-column:1/-1 !important;



        padding:35px 20px;



    }



    .q1 h2{



        font-size:34px;



    }



    .q2 p{



        font-size:24px;



    }



    .q3 h3{



        font-size:30px;



    }



    .q4 p{



        font-size:24px;



    }



    .reveal{



        margin:90px auto;



    }



    .reveal h2{



        font-size:42px;



    }



    .reveal p{



        font-size:20px;



    }



}



@media (max-width:600px){



    .header-container{



        padding:18px 18px;



    }



    .menu-toggle{



        font-size:30px;



    }



    .language-button{



        font-size:15px;



    }



    .hero{



        padding-top:85px;



        padding-bottom:30px;



    }



    .hero-logo{



        width:100px;



        margin-bottom:25px;



    }



    .hero h1{



        font-size:34px;



    }



    .hero-divider{



        width:120px;



        margin:25px auto;



    }



    .hero-subtitle{



        font-size:18px;



        line-height:1.7;



    }



    .hero-buttons{



        flex-direction:column;



        align-items:center;



    }



    .btn{



        width:100%;



        max-width:320px;



    }



    .people-section{



        padding:0 15px;



        margin:60px auto;



    }



    .people-grid{



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



        gap:10px;



    }



    .quote{



        padding:20px 10px;



    }



    .q1 h2{



        font-size:28px;



    }



    .q2 p{



        font-size:20px;



    }



    .q3 h3{



        font-size:24px;



    }



    .q4 p{



        font-size:20px;



    }



    .reveal{



        width:92%;



        margin:70px auto;



    }



    .reveal h2{



        font-size:32px;



    }



    .reveal p{



        font-size:18px;



    }



    .side-menu{



        width:280px;



        left:-300px;



    }



}



.language-switcher{

    position:relative;

    display:inline-block;

}



.language-button{

    cursor:pointer;

}



.language-dropdown{

    display:none;

    position:absolute;

    right:0;

    min-width:180px;

    max-height:70vh;

    overflow-y:auto;

    background:#fff;

    border:1px solid #ddd;

    border-radius:8px;

    z-index:1000;

}



.language-switcher:hover .language-dropdown{

    display:block;

}



.language-dropdown a{

    display:block;

    padding:10px 15px;

    color:#333;

    text-decoration:none;

}



.language-dropdown a:hover{

    background:#f3f3f3;

}



.language-dropdown a.active{

    font-weight:bold;

    color:#2d7ff9;

}



/* ==========================================

   FAQ

========================================== */



.page-header {

    padding: 80px 20px 50px;

    text-align: center;

    background: #ffffff;

}



.page-header h1 {

    font-size: 42px;

    margin-bottom: 25px;

    color: #1f2937;

}



.page-intro {

    max-width: 850px;

    margin: 0 auto;

    font-size: 19px;

    line-height: 1.9;

    color: #555;

}



.faq-section {

    padding: 20px 20px 100px;

}



.faq-category {

    max-width: 1000px;

    margin: 70px auto;

}



.faq-category:first-child {

    margin-top: 10px;

}



.faq-category h2 {

    font-size: 30px;

    color: #1f2937;

    margin-bottom: 25px;

    padding-bottom: 12px;

    border-bottom: 3px solid #0ea5e9;

}



.faq-item {



    background: #fff;



    border: 1px solid #e5e7eb;



    border-radius: 14px;



    overflow: hidden;



    margin-bottom: 15px;



    transition: .25s;



    box-shadow: 0 3px 10px rgba(0,0,0,.04);



}



.faq-item:hover {



    box-shadow: 0 10px 30px rgba(0,0,0,.08);



}



.faq-question {



    width: 100%;



    background: white;



    border: none;



    cursor: pointer;



    padding: 24px 28px;



    display: flex;



    justify-content: space-between;



    align-items: center;



    text-align: left;



    font-size: 19px;



    font-weight: 600;



    transition: .25s;



}



.faq-question:hover {



    background: #f8fafc;



}



.faq-icon {



    font-size: 32px;



    font-weight: 300;



    color: #0ea5e9;



    transition: .3s;



    flex-shrink: 0;



    margin-left: 20px;



}



.faq-answer {



    max-height: 0;



    overflow: hidden;



    transition: max-height .35s ease;



    opacity: 0;



}



.faq-answer.open {



    opacity: 1;



}



.faq-answer p {



    padding: 0 28px 28px;



    line-height: 1.9;



    color: #555;



    font-size: 17px;



}



.faq-question.active {



    background: #f8fafc;



}



.faq-question.active .faq-icon {



    transform: rotate(45deg);



}



@media (max-width:768px){



    .page-header{



        padding:60px 20px 30px;



    }



    .page-header h1{



        font-size:34px;



    }



    .page-intro{



        font-size:17px;



    }



    .faq-category h2{



        font-size:25px;



    }



    .faq-question{



        font-size:17px;



        padding:20px;



    }



    .faq-answer p{



        padding:0 20px 20px;



        font-size:16px;



    }



}



.sources {

    margin-top: 60px;

    padding: 30px;

    background: #f8fafc;

    border: 1px solid #dbe7f3;

    border-radius: 16px;

}



.sources h2 {

    margin-bottom: 25px;

    color: #0f3d75;

}



.sources-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.sources-list li {

    padding: 18px 0;

    border-bottom: 1px solid #e6edf5;

}



.sources-list li:last-child {

    border-bottom: none;

}



.sources-list strong {

    display: block;

    margin-bottom: 6px;

    font-size: 1.05rem;

}



.sources-list p {

    margin: 0 0 10px;

    color: #555;

}



.sources-list a {

    color: #1976d2;

    font-weight: 600;

    text-decoration: none;

}



.sources-list a:hover {

    text-decoration: underline;

}



.source-item {

    padding: 18px 0;

}



.source-item:not(:last-child) {

    border-bottom: 1px solid #dbe7f3;

    margin-bottom: 18px;

}



.source-item a {

    display: inline-block;

    margin-top: 8px;

    font-weight: 600;

}



.faq-logo{

    text-align: center;

    margin-bottom: 25px;

}



.faq-logo-image{

    width: 110px;      /* zkus 100–120 px */

    height: auto;

    display: block;

    margin: 0 auto;

}



.faq-people{



    display:flex;



    justify-content:center;



    align-items:center;



    gap:12px;



    margin:40px 0 50px;



    flex-wrap:wrap;



}



.faq-person{



    width:140px;



    height:140px;



    border-radius:50%;



    object-fit:cover;



    border:4px solid #ffffff;



    box-shadow:0 8px 18px rgba(0,0,0,.12);



    transition:.3s;



}



.faq-person:nth-child(3){



    width:170px;

    height:170px;

    margin-top:-55px;

    z-index:2;



}



.faq-person:hover{



    transform:translateY(-4px);



}



.about-logo{

    width:110px;

    display:block;

    margin:0 auto 20px;

}



.about-section{

    margin:60px 0;

}



.about-section h2{

    margin-bottom:20px;

}



.about-list{

    margin-left:20px;

    line-height:1.9;

}



.about-note{

    background:#f7f7f7;

    padding:25px;

    border-radius:12px;

}



.about-quote{

    margin:70px auto;

    max-width:700px;

    text-align:center;

}



.about-quote blockquote{

    font-size:1.5rem;

    font-weight:600;

    font-style:italic;

}



.about-group-photo{

    display:block;

    width:100%;

    max-width:900px;

    margin:40px auto 10px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.about-content{

    max-width:900px;

    margin:60px auto 0;

}



.about-section{

    margin-bottom:60px;

}



.about-section h2{

    margin-bottom:20px;

    text-align:left;

}



.about-section p{

    line-height:1.8;

    text-align:justify;

}



.about-list{

    padding-left:22px;

    line-height:2;

}



.story-form{

    max-width:750px;

    margin:0 auto;

}



.form-row{

    display:flex;

    gap:20px;

    margin-bottom:20px;

}



.form-group{

    display:flex;

    flex-direction:column;

    flex:1;

}



.form-small{

    flex:0 0 120px;

}



.form-group label{

    font-weight:600;

    margin-bottom:8px;

    color:#19345d;

}



.story-form input,

.story-form select,

.story-form textarea{

    width:100%;

    padding:12px 14px;

    font-size:16px;

    border:1px solid #d8dce3;

    border-radius:10px;

    transition:.2s;

    box-sizing:border-box;

    font-family:inherit;

}



.story-form textarea{

    min-height:300px;

    resize:vertical;

}



.story-form input:focus,

.story-form select:focus,

.story-form textarea:focus{

    outline:none;

    border-color:#27b7b0;

    box-shadow:0 0 0 3px rgba(39,183,176,.15);

}



.story-form button{

    margin-top:15px;

}



.story-message{

    max-width:750px;

    margin:0 auto 25px;

}



@media (max-width:768px){



    .form-row{

        flex-direction:column;

        gap:18px;

    }



    .form-small{

        flex:1;

    }



}



.story-form button{

    transition:.2s;

}



.story-form button:hover{

    transform:translateY(-2px);

}



.story-success-card{

    max-width:760px;

    margin:0 auto;

    padding:50px;

    background:#fff;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}



.story-success-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#27b7b0;

    color:#fff;

    font-size:48px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}



.story-success-card h2{

    margin-bottom:20px;

    color:#19345d;

}



.story-success-card p{

    max-width:560px;

    margin:0 auto 35px;

    line-height:1.8;

    color:#555;

}



.story-success-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



.story-success-buttons .btn{

    min-width:220px;

}



.story-card{



    padding:30px 0;



    border-top:1px solid #dddddd;



    margin-bottom:40px;



}



.story-title{



    font-size:32px;



    margin-bottom:15px;



}



.story-meta{



    font-style:italic;



    color:#666;



    margin-bottom:25px;



}



.story-preview{



    border-left:4px solid #d8d8d8;



    padding-left:20px;



    margin-left:18px;



    color:#333;



    line-height:1.8;



    margin-bottom:25px;



}



.story-read-more{



    color:#1db5aa;



    font-weight:600;



    text-decoration:none;



    transition:0.2s;



}



.story-read-more:hover{



    text-decoration:underline;



    color:#14958c;



}



.container{

    width:min(1200px,90%);

    margin:0 auto;

}



/* ======================================================

   STORY DETAIL

====================================================== */



.story-detail{

    margin:0;

    padding:0;

}



/* Zpět */



.story-back{

    display:inline-flex;

    align-items:center;

    gap:8px;



    margin:30px 0;



    color:#666;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

}



.story-back:hover{

    color:#000;

}



.story-card{



    padding:30px 0;



    border-top:1px solid #dddddd;



    margin-bottom:40px;



}



.story-list-title{



    font-size:32px;



    margin-bottom:15px;



}



.story-list-meta{



    font-style:italic;



    color:#666;



    margin-bottom:25px;



}



.story-list-preview{



    border-left:4px solid #d8d8d8;



    padding-left:20px;



    margin-left:18px;



    color:#333;



    line-height:1.8;



    margin-bottom:25px;



}



.story-list-read-more{



    color:#1db5aa;



    font-weight:600;



    text-decoration:none;



    transition:0.2s;



}



.story-list-read-more:hover{



    text-decoration:underline;



    color:#14958c;



}





/* HERO */



.story-hero{



    position:relative;



    min-height:60vh;



    display:flex;



    justify-content:center;



    align-items:center;



    text-align:center;



    background-size:cover;



    background-position:center;



    overflow:hidden;



}





.story-hero-overlay{



    position:absolute;



    inset:0;



    background:linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.70)

    );



}





.story-hero-content{



    position:relative;



    z-index:2;



    max-width:900px;



    padding:40px;



}





/* TITULEK */



.story-title{



    color:#fff;



    font-size:clamp(42px,5vw,72px);



    font-weight:700;



    line-height:1.15;



    margin-bottom:25px;



    text-shadow:0 3px 20px rgba(0,0,0,.45);



}





/* META */



.story-meta{



    display:flex;



    justify-content:center;



    flex-wrap:wrap;



    gap:12px;



    color:#fff;



    font-size:18px;



}





.story-meta span{



    padding:8px 18px;



    border-radius:40px;



    background:rgba(255,255,255,.15);



    backdrop-filter:blur(8px);



}





/* TEXT */



.story-body{



    background:#fff;



    margin-top:-70px;



    position:relative;



    z-index:5;



    border-radius:40px 40px 0 0;



    padding:70px 0;



}





.story-content{



    max-width:850px;



    margin:auto;



    font-size:20px;



    line-height:2;



    color:#333;



}





.story-content p{



    margin-bottom:30px;



}





/* ZOBRAZENÍ */



.story-views{



    margin-top:70px;



    text-align:center;



    color:#999;



    font-size:15px;



}



/* ======================================================

   ANIMACE

====================================================== */



.story-title{



    animation:fadeDown .8s ease;



}



.story-meta{



    animation:fadeUp 1s ease;



}



.story-content{



    animation:fadeUp 1.2s ease;



}



@keyframes fadeDown{



    from{



        opacity:0;



        transform:translateY(-30px);



    }



    to{



        opacity:1;



        transform:translateY(0);



    }



}



@keyframes fadeUp{



    from{



        opacity:0;



        transform:translateY(30px);



    }



    to{



        opacity:1;



        transform:translateY(0);



    }



}





/* ======================================================

   ODKAZY

====================================================== */



.story-content a{



    color:#0066cc;



    text-decoration:none;



    border-bottom:1px solid transparent;



    transition:.2s;



}



.story-content a:hover{



    border-bottom:1px solid #0066cc;



}





/* ======================================================

   OBRÁZKY UVNITŘ PŘÍBĚHU

====================================================== */



.story-content img{



    display:block;



    max-width:100%;



    height:auto;



    margin:40px auto;



    border-radius:20px;



}





/* ======================================================

   MOBIL

====================================================== */



@media (max-width:768px){



    .story-back{



        top:15px;



        left:15px;



        font-size:14px;



        padding:8px 14px;



    }



    .story-hero{



        min-height:60vh;



    }



    .story-title{



        font-size:36px;



    }



    .story-meta{



        font-size:15px;



        gap:8px;



    }



    .story-meta span{



        padding:6px 12px;



    }



    .story-body{



        margin-top:-35px;



        border-radius:25px 25px 0 0;



        padding:45px 0;



    }



    .story-content{



        font-size:18px;



        line-height:1.8;



        padding:0 20px;



    }



}





/* ======================================================

   VELKÉ MONITORY

====================================================== */



@media (min-width:1600px){



    .story-content{



        max-width:950px;



        font-size:22px;



    }



}



/* ===========================================================

   STORY DETAIL HEADER

=========================================================== */



body.story-detail .header{



    position:absolute;



    top:0;



    left:0;



    width:100%;



    z-index:999;



    background:transparent;



}





body.story-detail .header-container{



    padding:20px 30px;



}





body.story-detail .menu-toggle{



    background:rgba(0,0,0,.45);



    color:#fff;



    border-radius:50px;



    padding:12px 18px;



    backdrop-filter:blur(10px);



}





body.story-detail .language-button{



    background:rgba(0,0,0,.45);



    color:#fff;



    border-radius:50px;



    padding:12px 18px;



    backdrop-filter:blur(10px);



}



.story-back-wrapper{

    position:relative;

    z-index:10;



    max-width:850px;

    margin:30px auto -40px;

    padding:0 20px;

}



.story-back{

    display:inline-block;

    padding:10px 18px;

    background:#fff;

    border:1px solid #dfe5eb;

    border-radius:999px;

    color:#1f3153;

    font-weight:600;

    font-size:15px;

    transition:.2s;

}



.story-back:hover{

    background:#f5f7fa;

    border-color:#cfd8e3;

}



.site-footer{

    background:#2f3b46;

    text-align:center;

    padding:30px 20px;

    margin-top:60px;

}



.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    margin-bottom:20px;

}



.footer-links a{

    color:#fff;

    text-decoration:none;

    transition:.2s;

}



.footer-links a:hover{

    color:#20b2aa;

}



.footer-copy{

    color:#cfd8dc;

    font-size:14px;

}



.contact-person {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin: 40px 0 50px;

}



.contact-person-image {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    object-fit: cover;

    border: 5px solid #ffffff;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

}



.contact-quote {

    margin-top: 18px;

    max-width: 600px;

    text-align: center;

    font-size: 1.1rem;

    font-style: italic;

    color: #666;

}



.contact-box {

    margin-top: 28px;

    padding: 24px 26px;



    background: #f8fafb;

    border: 1px solid #e1e7e9;

    border-radius: 10px;

}



.contact-story-link{

    display:inline-block;



    margin-top:5px;

    padding:10px 18px;



    background:#2f9e96;

    color:#ffffff;



    border-radius:6px;



    font-weight:600;

    text-decoration:none;



    transition:background .2s ease;

}



.contact-story-link:hover{

    background:#27877f;

}



.contact-content {

    max-width: 700px;

    margin: 0 auto;

}



.contact-content > h2:last-of-type{

    margin-top:28px;

}



.contact-email{

    display:inline-block;



    margin-top:4px;



    color:#123c6b;

    font-weight:600;

    text-decoration:none;

}



.contact-email:hover{

    text-decoration:underline;

}



/* ===========================

   COOPERATION

=========================== */



.cooperation-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));



    gap:25px;



    margin:45px 0;



}



.cooperation-card{



    background:#fff;



    border-radius:16px;



    padding:35px;



    text-align:center;



    box-shadow:0 5px 18px rgba(0,0,0,.08);



    transition:.25s;



}



.cooperation-card:hover{



    transform:translateY(-6px);



    box-shadow:0 10px 30px rgba(0,0,0,.12);



}



.cooperation-card img{



    width:58px;



    height:58px;



    margin-bottom:20px;



}



.cooperation-card h2{



    margin-bottom:15px;



}



.cooperation-values,

.cooperation-contact{



    background:#fff;



    border-radius:16px;



    padding:40px;



    margin-top:40px;



    box-shadow:0 5px 18px rgba(0,0,0,.08);



}



.cooperation-contact{



    text-align:center;



}



.cooperation-button{



    display:inline-block;



    margin-top:25px;



    background:#2c7be5;



    color:#fff;



    text-decoration:none;



    padding:14px 32px;



    border-radius:8px;



    font-weight:600;



    transition:.25s;



}



.cooperation-button:hover{



    background:#1f63be;



}



.cooperation-section{



    max-width:900px;

    margin:0 auto;

    padding:40px 20px;



}



.cooperation-intro{



    text-align:center;

    margin-bottom:40px;



}



.accordion{



    display:flex;

    flex-direction:column;

    gap:15px;



}



.accordion-item{



    background:#fff;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    overflow:hidden;



}



.accordion-header{



    width:100%;

    border:none;

    background:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;



}



.accordion-header span{



    display:flex;

    align-items:center;

    gap:15px;



}



.accordion-header img{



    width:32px;

    height:32px;



}



.accordion-body{



    max-height:0;

    overflow:hidden;

    transition:.35s;

    padding:0 22px;



}



.accordion-item.active .accordion-body{



    max-height:300px;

    padding:0 22px 22px;



}



.cooperation-contact{



    margin-top:50px;

    text-align:center;



}



/* Cooperation */



.coop-title{



    display:flex;

    align-items:center;

    gap:15px;



}



.coop-icon{



    width:26px;

    height:26px;

    flex-shrink:0;



}



.cooperation-contact{



    margin-top:60px;

    text-align:center;



}



.cooperation-contact h2{



    margin-bottom:15px;



}



.cooperation-contact p{



    margin-bottom:25px;



}



.coop-list {

    list-style: none;

    padding: 0;

    margin: 10px 0 0;

    margin-top: 0;

}



.coop-list li {

    margin: 10px 0;

    padding-left: 28px;

    margin-bottom: 14px;

    position: relative;

}



.coop-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    color: #19b5a5; /* tvoje tyrkysová */

    font-weight: bold;

}



.coop-content{



    padding: 10px 25px 20px 25px;



}



.coop-content p{



    margin-bottom: 18px;



}



.coop-list{



    list-style:none;

    margin:0;

    padding:0;



}



.coop-list li{



    position:relative;

    padding-left:28px;

    margin-bottom:12px;



}



.coop-list li::before{



    content:"✓";

    position:absolute;

    left:0;

    color:#1bb6b1;

    font-weight:bold;



}



.article-hero{



    position:relative;



    min-height:60vh;



    display:flex;



    justify-content:center;



    align-items:center;



    text-align:center;



    background-size:cover;



    background-position:center;



    overflow:hidden;



}







@media (max-width: 768px) {



    .article-hero {

        height: 260px;

        min-height: 260px;

        background-size: cover;

        background-position: center center;

    }



    .article-detail .story-title {

        font-size: 2rem;

        line-height: 1.2;

        padding: 0 20px;

    }



}