/* =========================================================
   STRÁNKA O NÁS
   Fonty: Fraunces (nadpisy) + DM Sans (texty)
   Barvy: --color-mind, --color-body, --color-sport
   ========================================================= */

/* =========================================================
   SEKCE 1: HERO
   ========================================================= */
.mts-onas-hero {
    position: relative;
    top: 5.5rem;
    padding: 4rem 0;
    background-color: var(--color-ground, #F4EBE7);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Triskelion vodoznak v pozadí */
.mts-onas-hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45rem;
    height: 45rem;
    background-color: var(--color-body, #795548);
    opacity: 0.1;
    z-index: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146.3 143'%3E%3Cpath d='M71.4,86.8c2,6.2,5.4,12.6,5.4,12.6c33.2-26.8,44-75.6-4-99.4C42.8,12.2,34.4,47.8,46,70l-0.1-0.1 c11.1-1.1,18.6,0.9,18.6,0.9C46.2,52.6,57,25.4,72.8,16.6h0.4C101.4,36,90.8,67.6,71.4,86.8z M104.4,75.8c21.8,1.6,44.2,20.6,41.8,51.8c-15.6,21.4-64.6,28.8-85.6-35.4c4-1.2,7.8-3,10.8-5.4 c3.2,11,26.8,60.2,61,35.8c-0.6-19.2-13.2-36-36.2-32.4C99.6,82.2,102.4,78.4,104.4,75.8z M70,80.6C30,66.6-2.8,87,0.2,128.8c10,14,45.6,25.4,66.4-5.2c-3.2-6.2-5-10-8.6-18.2 c-3.8,25.2-29.6,29-45.2,17.8C13.6,99.4,33,82.6,60.6,91.6C65.2,86,67.2,83.8,70,80.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146.3 143'%3E%3Cpath d='M71.4,86.8c2,6.2,5.4,12.6,5.4,12.6c33.2-26.8,44-75.6-4-99.4C42.8,12.2,34.4,47.8,46,70l-0.1-0.1 c11.1-1.1,18.6,0.9,18.6,0.9C46.2,52.6,57,25.4,72.8,16.6h0.4C101.4,36,90.8,67.6,71.4,86.8z M104.4,75.8c21.8,1.6,44.2,20.6,41.8,51.8c-15.6,21.4-64.6,28.8-85.6-35.4c4-1.2,7.8-3,10.8-5.4 c3.2,11,26.8,60.2,61,35.8c-0.6-19.2-13.2-36-36.2-32.4C99.6,82.2,102.4,78.4,104.4,75.8z M70,80.6C30,66.6-2.8,87,0.2,128.8c10,14,45.6,25.4,66.4-5.2c-3.2-6.2-5-10-8.6-18.2 c-3.8,25.2-29.6,29-45.2,17.8C13.6,99.4,33,82.6,60.6,91.6C65.2,86,67.2,83.8,70,80.6z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.mts-onas-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.mts-onas-hero-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-mind);
    margin-bottom: 1.25rem;
}
.mts-onas-hero-nadpis {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-sport);
    margin: 0 0 1.5rem 0;
}
.mts-onas-hero-perex {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: 1.6;
    color: #4A5568;
}


/* =========================================================
   SEKCE 2: ZAKLADATELÉ
   ========================================================= */
.mts-onas-zakladatele {
    padding-top: 11rem;
	padding-bottom: 5rem;
    background-color: var(--color-bg);
}
.mts-onas-zaklad-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Levý sloupec – fotka s odznakem */
.mts-onas-zaklad-foto {
    position: relative;
}
.mts-onas-zaklad-foto-ramecek {
    aspect-ratio: 1 / 1;
    border-radius: 3rem;
    overflow: hidden;
    border: 16px solid white;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
}
.mts-onas-zaklad-foto-ramecek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.85;
    transition: filter 0.7s ease, opacity 0.7s ease;
}
.mts-onas-zaklad-foto:hover .mts-onas-zaklad-foto-ramecek img {
    filter: grayscale(0);
    opacity: 1;
}

/* Odznak – tvar lístku (SVG), jako floating-badge v Naše cesty */
.mts-onas-zaklad-odznak {
    position: absolute;
    bottom: -2.5rem;
    right: -1.5rem;
    width: 11rem;
    height: 14rem;
    color: var(--color-body);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(15deg);
    z-index: 20;
    filter: drop-shadow(0 10px 20px rgba(121, 85, 72, 0.25));
    transition: transform 0.5s ease;
}
.mts-onas-zaklad-foto:hover .mts-onas-zaklad-odznak {
    transform: rotate(0deg);
}
/* SVG kapka/list na pozadí odznaku */
.mts-onas-zaklad-odznak .badge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.mts-onas-zaklad-odznak .badge-svg path {
    fill: var(--color-body);
}
.mts-onas-zaklad-odznak .badge-text {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
    line-height: 1.4;
    padding: 0 1.5rem 2rem 1.5rem;
}

/* Pravý sloupec – text */
.mts-onas-zaklad-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-mind);
    margin-bottom: 0.75rem;
}
.mts-onas-zaklad-nadpis {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-sport);
    margin: 0 0 1.5rem 0;
}
.mts-onas-zaklad-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: #4A5568;
}
.mts-onas-zaklad-text p {
    margin: 0 0 1.5rem 0;
}
/* Citace (blockquote z WYSIWYG) */
.mts-onas-zaklad-text blockquote {
    border-left: 4px solid var(--color-mind);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0;
}
.mts-onas-zaklad-text blockquote p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-sport);
    margin: 0;
}


/* =========================================================
   SEKCE 3: EVOLUCE (timeline)
   ========================================================= */
.mts-onas-evoluce {
    padding: 8rem 0;
    background-color: var(--color-sport);
    position: relative;
    isolation: isolate;
}
.mts-onas-evoluce-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.mts-onas-evoluce-hlavicka {
    text-align: center;
    margin-bottom: 5rem;
}
.mts-onas-evoluce-nadpis {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 900;
    line-height: 1.15;
    color: white;
    margin: 0 0 1rem 0;
}
.mts-onas-evoluce-podnadpis {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 640px;
    margin: 0 auto;
}

/* Seznam milníků */
.mts-onas-milniky {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Jeden milník */
.mts-onas-milnik {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2.5rem;
    align-items: center;
    padding: 3rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3rem;
    transition: background-color 0.3s ease;
}
.mts-onas-milnik:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
/* Poslední milník – zvýrazněný */
.mts-onas-milnik.je-soucasnost {
    border-color: var(--color-mind);
    box-shadow: 0 0 40px rgba(74, 144, 226, 0.15);
}

/* Levá část – rok / ikona */
.mts-onas-milnik-info {
    text-align: center;
}
.mts-onas-milnik-rok {
    display: block;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-mind);
    margin-bottom: 0.5rem;
}
.mts-onas-milnik.je-soucasnost .mts-onas-milnik-rok {
    color: white;
}
.mts-onas-milnik-ikona {
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--color-mind);
}
.mts-onas-milnik-ikona svg {
    width: 3rem;
    height: 3rem;
    display: block;
}
.mts-onas-milnik-ikona svg path {
    fill: var(--color-mind);
}
.mts-onas-milnik.je-soucasnost .mts-onas-milnik-ikona {
    color: white;
}
.mts-onas-milnik.je-soucasnost .mts-onas-milnik-ikona svg path {
    fill: white;
}
.mts-onas-milnik-stitek {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
}
.mts-onas-milnik.je-soucasnost .mts-onas-milnik-stitek {
    background-color: var(--color-mind);
    color: white;
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
}

/* Pravá část – obsah */
.mts-onas-milnik-nazev {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin: 0 0 1rem 0;
	line-height: 1.15;
}
.mts-onas-milnik-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}
.mts-onas-milnik-text p {
    margin: 0 0 1rem 0;
}
.mts-onas-milnik-text p:last-child {
    margin-bottom: 0;
}

/* Pilulky */
.mts-onas-pilulky {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.mts-onas-pilulka {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(26, 43, 60, 0.5);
    border-radius: 99px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid;
}
.onas-pilulka-mind {
    color: var(--color-mind);
    border-color: color-mix(in srgb, var(--color-mind) 50%, transparent);
}
.onas-pilulka-body {
    color: var(--color-body);
    border-color: color-mix(in srgb, var(--color-body) 50%, transparent);
}
.onas-pilulka-sport {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}
.onas-pilulka-bila {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}
.onas-pilulka-ruzova {
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.5);
}


/* =========================================================
   SEKCE 4: HODNOTY (dvě karty)
   ========================================================= */
.mts-onas-hodnoty {
    padding: 8rem 0;
    background-color: var(--color-bg);
}
.mts-onas-hodnoty-hlavicka {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem auto;
}
.mts-onas-hodnoty-nadpis {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-sport);
    margin: 0 0 1rem 0;
}
.mts-onas-hodnoty-popis {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: 1.6;
    color: #4A5568;
}
.mts-onas-hodnoty-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

/* Karta – společné */
.mts-onas-karta {
    position: relative;
    padding: 3.5rem;
    border-radius: 2rem;
    overflow: hidden;
    isolation: isolate;
}

/* Triskelion vodoznak v pravém spodním rohu (jako Naše cesty Target) */
.mts-onas-karta::before {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 300px;
    height: 300px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146.3 143'%3E%3Cpath d='M71.4,86.8c2,6.2,5.4,12.6,5.4,12.6c33.2-26.8,44-75.6-4-99.4C42.8,12.2,34.4,47.8,46,70l-0.1-0.1 c11.1-1.1,18.6,0.9,18.6,0.9C46.2,52.6,57,25.4,72.8,16.6h0.4C101.4,36,90.8,67.6,71.4,86.8z M104.4,75.8c21.8,1.6,44.2,20.6,41.8,51.8c-15.6,21.4-64.6,28.8-85.6-35.4c4-1.2,7.8-3,10.8-5.4 c3.2,11,26.8,60.2,61,35.8c-0.6-19.2-13.2-36-36.2-32.4C99.6,82.2,102.4,78.4,104.4,75.8z M70,80.6C30,66.6-2.8,87,0.2,128.8c10,14,45.6,25.4,66.4-5.2c-3.2-6.2-5-10-8.6-18.2 c-3.8,25.2-29.6,29-45.2,17.8C13.6,99.4,33,82.6,60.6,91.6C65.2,86,67.2,83.8,70,80.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146.3 143'%3E%3Cpath d='M71.4,86.8c2,6.2,5.4,12.6,5.4,12.6c33.2-26.8,44-75.6-4-99.4C42.8,12.2,34.4,47.8,46,70l-0.1-0.1 c11.1-1.1,18.6,0.9,18.6,0.9C46.2,52.6,57,25.4,72.8,16.6h0.4C101.4,36,90.8,67.6,71.4,86.8z M104.4,75.8c21.8,1.6,44.2,20.6,41.8,51.8c-15.6,21.4-64.6,28.8-85.6-35.4c4-1.2,7.8-3,10.8-5.4 c3.2,11,26.8,60.2,61,35.8c-0.6-19.2-13.2-36-36.2-32.4C99.6,82.2,102.4,78.4,104.4,75.8z M70,80.6C30,66.6-2.8,87,0.2,128.8c10,14,45.6,25.4,66.4-5.2c-3.2-6.2-5-10-8.6-18.2 c-3.8,25.2-29.6,29-45.2,17.8C13.6,99.4,33,82.6,60.6,91.6C65.2,86,67.2,83.8,70,80.6z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: -1;
    pointer-events: none;
}
/* Barva vodoznaku podle palety karty */
.mts-onas-karta-negativa::before {
    background-color: color-mix(in srgb, var(--color-body) 12%, transparent);
}
.mts-onas-karta-pozitiva::before {
    background-color: color-mix(in srgb, var(--color-mind) 15%, transparent);
}
.mts-onas-karta-nadpis {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;        
    margin: 0 0 3rem 0;
	line-height: 1.2;
}

/* Karta 1 – negativa (neutrální) */
.mts-onas-karta-negativa {
    background-color: var(--color-ground, #F4EBE7);
    border: 1px solid color-mix(in srgb, var(--color-body) 15%, transparent);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mts-onas-karta-negativa:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.mts-onas-karta-negativa .mts-onas-karta-nadpis {
    color: var(--color-body);
	text-decoration: none; /* Vypne klasické podtržení */
 	background-image: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%); /* Vykreslí čáru jen na půlce */
 	background-position: bottom left; /* Umístí podtržení dolů */
	background-size: 150px 2px; /* 100% šířka podkladu, 2px tloušťka čáry */
	background-repeat: no-repeat;
	padding-bottom: 10px;
}
.mts-onas-negativa-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.mts-onas-negativa-polozka {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: #4A5568;
}
.mts-onas-negativa-ikona {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-body);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

/* Karta 2 – pozitiva (modrá) + CTA */
.mts-onas-karta-pozitiva {
    background-color: var(--color-sky);
    border: 1px solid color-mix(in srgb, var(--color-mind) 20%, transparent);
    display: flex;
    flex-direction: column;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mts-onas-karta-pozitiva:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.mts-onas-karta-pozitiva .mts-onas-karta-nadpis {
    color: var(--color-sport);
	text-decoration: none; /* Vypne klasické podtržení */
 	background-image: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%); /* Vykreslí čáru jen na půlce */
 	background-position: bottom left; /* Umístí podtržení dolů */
	background-size: 150px 2px; /* 100% šířka podkladu, 2px tloušťka čáry */
	background-repeat: no-repeat;
	padding-bottom: 10px;
}
.mts-onas-karta-pozitiva-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: #4A5568;
}
.mts-onas-karta-pozitiva-text p {
    margin: 0 0 1.25rem 0;
}
.mts-onas-cta {
    margin-top: auto;
    padding-top: 1rem;
}
.mts-onas-cta-tlacitko {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--color-sport);
    color: white;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 99px;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
.mts-onas-cta-tlacitko:hover {
    background-color: var(--color-mind);
}


/* =========================================================
   RESPONZIVITA
   ========================================================= */
@media (max-width: 900px) {
    .mts-onas-zaklad-grid,
    .mts-onas-hodnoty-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .mts-onas-zaklad-foto {
        max-width: 480px;
        margin: 0 auto;
    }
    .mts-onas-milnik {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        padding: 2.5rem;
    }
    .mts-onas-pilulky {
        justify-content: center;
    }
}

@media (max-width: 767px) {
	.mts-onas-zakladatele {margin-top: 5rem;}
    .mts-onas-zakladatele,
    .mts-onas-evoluce,
    .mts-onas-hodnoty {
        padding: 5rem 0;
    }
    .mts-onas-karta {
        padding: 2.5rem;
    }
    .mts-onas-zaklad-odznak {
        width: 8.5rem;
        height: 11rem;
        right: 0;
        transform: rotate(10deg);
    }
    .mts-onas-zaklad-odznak .badge-text {
        font-size: 0.65rem;
        padding-bottom: 1.5rem;
    }
}