@media (prefers-reduced-motion: reduce) {
    .has-anim .site-header,
    .has-anim .hero-card,
    .has-anim .hero-facts,
    .has-anim .hero-media-action,
    .has-anim .hero-card .hero-counter,
    .has-anim .hero-card .hero-title,
    .has-anim .hero-card .hero-slider-nav {
        opacity: 1;
        transform: none;
    }

    .has-anim .hero-media,
    .has-anim .hero-aside-media {
        clip-path: none;
    }

    .has-anim .hero-media .hero-media-slider,
    .has-anim .hero-aside-media .hero-media-slider {
        transform: none;
    }
}

/* na zariadeniach s myšou otvára jazyky hover, klik ostáva len pre dotyk */
@media (hover: hover) and (pointer: fine) {
    .lang-switch-wrap:hover .lang-menu,
    .lang-switch-wrap:focus-within .lang-menu,
    .nav-dropdown:hover .nav-menu,
    .nav-dropdown:focus-within .nav-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-dropdown:hover .icon-chevron,
    .nav-dropdown:focus-within .icon-chevron {
        transform: rotate(180deg);
    }

    .lang-switch-wrap:focus-within .lang-switch {
        background-color: var(--color-surface-hover);
    }

    .lang-switch-wrap:hover .icon-chevron,
    .lang-switch-wrap:focus-within .icon-chevron {
        transform: rotate(180deg);
    }
}

@media (min-width: 768px) {
    /* šírky stĺpcov = šírka karty z dizajnu + gutter, ktorý zožerie padding stĺpca */
    .highlights-col-stat {
        flex: 0 0 auto;
        width: calc(17.4375rem + var(--grid-gap));
    }
}

@media (min-width: 1200px) {
    .mobile-menu {
        display: none;
    }

    body.menu-open {
        position: static;
        overflow: auto;
    }

    .hero-col-main {
        flex: 0 0 auto;
        width: 64.4068%;
    }

    .hero-col-aside {
        flex: 0 0 auto;
        width: 35.5932%;
    }

    .split-hero-col-media {
        flex: 0 0 auto;
        width: 49.2978%;
    }

    .split-hero-col-content {
        flex: 0 0 auto;
        width: 50.7022%;
    }

    .highlights-col-media {
        flex: 0 0 auto;
        width: 37.0635%;
    }
}

@media (min-width: 1800px) {
    :root {
        --hero-media-height: 54rem;
        --hero-tile-height: 23.5rem;
    }
}

/* formulár prekrýva obrázok o 80px, preto záporný margin namiesto gutteru */
@media (min-width: 992px) {
    .contact-col-media {
        flex: 0 0 auto;
        width: 74.1935%;
    }

    .contact-col-form {
        flex: 0 0 auto;
        width: 32.2581%;
        margin-left: -6.4516%;
    }
}

@media (max-width: 1399.98px) {
    :root {
        --gutter: 4rem;
    }

    .site-header-container {
        padding-inline: 1.5rem;
    }

    .site-nav {
        gap: 1.5rem;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --gutter: 3rem;
        --section-space: 4rem;

        --font-section-title-xl: 3.25rem;
        --line-section-title-xl: 3.5rem;
        --font-section-title-lg: 2.75rem;
        --line-section-title-lg: 3.25rem;
        --font-section-title: 2.125rem;
        --line-section-title: 2.375rem;
        --font-section-title-md: 1.75rem;
        --line-section-title-md: 2.125rem;
        --font-section-title-sm: 1.5rem;
        --line-section-title-sm: 1.875rem;
    }

    /* plynulé zmenšovanie, aby sa adresa nelámala na viac riadkov */
    .site-footer-email {
        font-size: clamp(1.25rem, 3.4vw, 2.5rem);
        line-height: 1.25;
    }

    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-media {
        --hero-tile-ratio: 16 / 9;
        --hero-tile-max: 34rem;
    }

    .split-hero {
        --split-hero-pad: 3rem;
        --split-hero-overflow: 0rem;
    }

    .copy-columns-header {
        position: static;
    }

    .copy-columns-body {
        gap: 2.5rem;
    }

    .project-story .copy-columns-body {
        gap: 3.25rem;
    }

    .about-mission-intro {
        margin-bottom: 4rem;
    }

    .about-mission-decor {
        display: none;
    }

    .split-hero-media {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .split-hero-col-content {
        min-height: 0;
    }

    .project-story {
        padding-top: 7rem;
    }

    .project-gallery {
        --gallery-height: 25rem;
    }

    .fleet-group + .fleet-group {
        margin-top: 3.5rem;
    }

    .services-lead {
        padding-top: 7rem;
    }

    .services-scope-media {
        position: static;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .hero-media-action {
        left: 2rem;
        bottom: 2rem;
    }

    .hero-facts {
        width: 100%;
        padding: 2rem;
    }

    .about-intro {
        padding-top: 7rem;
    }

    /* aspect-ratio spolu s height: 100% počítal šírku z výšky rowu a fotka
       pretiekla pod susedný stĺpec */
    .highlights-media {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .production-media {
        aspect-ratio: 16 / 9;
    }

    /* v úzkych kartách procesu pretekal dlhší nadpis („Dokončovacie") cez okraj */
    .projects-process .highlights-card {
        padding: 1.5rem;
    }

    .projects-process .highlights-card-title {
        font-size: var(--font-section-title-sm);
        line-height: var(--line-section-title-sm);
    }

    /* v trojici kariet vedľa seba preteká plný display font cez okraj karty */
    .about-mission .media-card-title,
    .project-related .media-card-title,
    .services-card-title {
        font-size: var(--font-section-title-md);
        line-height: var(--line-section-title-md);
    }

    /* na užšej fotke by karty zakryli celú halu — presunú sa pod ňu */
    .production-features {
        position: static;
        margin-top: var(--grid-gap);
    }

    .production-feature {
        background-color: var(--color-primary);
        backdrop-filter: none;
    }

    .references {
        --references-height: 30rem;
        --references-panel-inset: 3rem;
    }

    .services {
        --services-card-height: 30rem;
    }

    .services-title,
    .services-facts {
        margin-bottom: 2.5rem;
    }

    .contact {
        --contact-height: 30rem;
    }

    .contact-media {
        padding: 2.5rem;
    }

    .contact-map-panel {
        padding: 2.5rem;
    }

    .contact-map-decor {
        display: none;
    }

    .projects-header,
    .news-header,
    .filter-bar {
        margin-bottom: 2rem;
    }

    .article-hero {
        padding-top: 8.5rem;
    }

    .legal-content {
        padding-top: 8.5rem;
    }

    .article-hero-inner {
        margin-bottom: 2.5rem;
    }

    .article-hero-media {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .projects-process-title {
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    :root {
        --gutter: 2rem;
        --section-space: 3.5rem;
        --card-space: 1.5rem;

        --font-section-title-xl: 2.75rem;
        --line-section-title-xl: 3.125rem;
        --font-section-title-lg: 2.375rem;
        --line-section-title-lg: 2.75rem;
        --font-section-title: 1.875rem;
        --line-section-title: 2.125rem;
        --font-display: 2.125rem;
        --line-display: 2.5rem;
        --font-lead: 1.375rem;
        --line-lead: 1.75rem;
    }

    .spotlight-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .site-header-cta {
        display: none;
    }

    /* pod textom už obrázok nedrží šírku stĺpca vedľa nadpisu, ale plnú šírku a nižší pomer */
    .about-mission-media {
        max-width: none;
        aspect-ratio: 16 / 9;
    }

    /* trojica kariet vedľa seba je v md pásme najužšia — menší padding aj nadpis */
    .about-mission .media-card,
    .project-related .media-card,
    .services-card {
        padding: 1.5rem;
    }

    .about-mission .media-card-title,
    .project-related .media-card-title,
    .services-card-title {
        font-size: var(--font-section-title-sm);
        line-height: var(--line-section-title-sm);
    }

    .hero-media {
        --hero-tile-ratio: 4 / 3;
    }

    /* videá sú 16:9 s nadpismi pri krajoch — užší pomer by ich orezal,
       :has vyhráva špecificitou aj nad mobilným 3/4 */
    .hero-media:has(video) {
        --hero-tile-ratio: 16 / 9;
        --hero-tile-max: none;
    }

    .split-hero-media:has(video) {
        aspect-ratio: 16 / 9;
    }

    .hero-card-slider {
        padding: 2.5rem 2rem;
    }

    .split-hero {
        --split-hero-pad: 2rem;
    }

    .split-hero-stats {
        gap: 1.25rem;
    }

    /* na užšej mape by celá adresa v štítku pretiekla mimo plátno */
    .contact-map-address {
        display: none;
    }

    .contact-map-label {
        padding: .625rem 1rem;
    }

    .contact-map-city {
        font-size: var(--font-body);
        line-height: var(--line-body);
    }

    .services-lead-col-card {
        justify-content: flex-start;
    }

    /* v jednom stĺpci by štvorcová karta nechala vedľa seba prázdno */
    .services-lead-card {
        max-width: none;
        aspect-ratio: auto;
        min-height: 10rem;
    }

    .filter-stack {
        gap: 1.25rem;
    }

    /* chipy sa nelámu — jazdia v jednom riadku s presahom až po okraj obrazovky */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--bs-gutter-x) * -.5);
        padding-inline: calc(var(--bs-gutter-x) * .5);
        scroll-snap-type: x proximity;
        scroll-padding-inline: calc(var(--bs-gutter-x) * .5);
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex-shrink: 0;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

@media (max-width: 767.98px) {
    :root {
        --gutter: 1.25rem;
        --section-space: 3rem;
        --grid-gap: 1rem;
        --radius: 1.25rem;

        --font-section-title-xl: 2.25rem;
        --line-section-title-xl: 2.625rem;
        --font-section-title-lg: 2rem;
        --line-section-title-lg: 2.375rem;
        --font-section-title: 1.625rem;
        --line-section-title: 1.875rem;
        --font-section-title-md: 1.5rem;
        --line-section-title-md: 1.875rem;
        --font-section-title-sm: 1.375rem;
        --line-section-title-sm: 1.75rem;
        --font-body: 1rem;
        --line-body: 1.5rem;
    }

    .site-header {
        top: 1rem;
    }

    .site-header-container {
        padding-inline: 1rem;
    }

    .scroll-top {
        right: 1rem;
        bottom: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .site-logo img {
        width: 9.375rem;
    }

    /* od tejto šírky patrí všetko do mobilného menu, kde jazyky už sú */
    .lang-switch-wrap {
        display: none;
    }

    .hero-media {
        --hero-tile-ratio: 3 / 4;
        --hero-tile-max: none;
    }

    /* video prekrýval fixný header — fotka ide navrch; display: contents vytiahne
       bloky z aside stĺpca do vonkajšieho radu, aby sa dali radiť cez order */
    .hero-col-aside,
    .hero-col-aside > .row {
        display: contents;
    }

    .hero-col-photo {
        order: -1;
    }

    .hero-media-action {
        left: 1.5rem;
        bottom: 1.5rem;
    }

    .hero-card {
        aspect-ratio: auto;
        max-height: none;
    }

    .split-hero {
        --split-hero-pad: 1.5rem;
    }

    .split-hero-media {
        aspect-ratio: 4 / 3;
    }

    .split-hero-stats {
        flex-direction: column;
    }

    /* na mobile sa štítky do mapy nezmestia — z bodov sa stane legenda pod ňou */
    .contact-map-panel {
        padding: 1.5rem;
    }

    .contact-map-canvas {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    .contact-map-pin,
    .contact-map-pin-flip {
        position: static;
        flex-direction: row;
        transform: none;
    }

    .contact-map-marker {
        display: flex;
    }

    .contact-map-marker .contact-map-dot {
        width: .75rem;
        height: .75rem;
    }

    .contact-map-marker .contact-map-dot::before {
        inset: -.4375rem;
    }

    .contact-map-label {
        width: 100%;
        white-space: normal;
    }

    .contact-map-address {
        display: block;
    }

    .about-mission-intro {
        margin-bottom: 3rem;
    }

    .media-card {
        --media-card-height: 20rem;
        padding: 1.5rem;
    }

    .projects .project-card {
        --media-card-height: 24rem;
    }

    .team-card {
        --media-card-height: 26rem;
    }

    .filter-bar {
        gap: .375rem;
    }

    .news-hero-latest {
        align-items: flex-start;
    }

    .article-card-body,
    .info-card {
        padding: 1.5rem;
    }

    .article-hero {
        padding-top: 6.5rem;
    }

    .legal-content {
        padding-top: 6.5rem;
    }

    .article-hero-media {
        aspect-ratio: 4 / 3;
    }

    .article-content > * + h2 {
        margin-top: 2.5rem;
    }

    .article-content blockquote {
        padding-left: 1.25rem;
    }

    .filter-chip {
        padding: .5rem 1rem;
    }

    .project-story {
        padding: 5rem 0 3rem;
    }

    .project-gallery {
        --gallery-height: 16rem;
    }

    .fleet-card {
        width: 19rem;
    }

    .services-lead {
        padding: 5rem 0 3rem;
    }

    .services-scope-media {
        aspect-ratio: 4 / 3;
    }

    .services-scope-card {
        min-height: 10rem;
        padding: 1.5rem;
    }

    .certificates-card {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .hero-card-slider {
        padding: 2rem 1.5rem;
    }

    .hero-card-body {
        gap: 1.25rem;
    }

    .hero-facts {
        padding: 1.5rem;
    }

    .about-intro {
        padding: 5rem 0 3rem;
    }

    .highlights-media,
    .production-media,
    .about-mission-media {
        aspect-ratio: 4 / 3;
    }

    .highlights-card {
        min-height: 14rem;
        padding: 1.5rem;
    }

    .upcoming-card {
        min-height: 14rem;
        padding: 1.5rem;
    }

    .upcoming-header,
    .projects-process-header {
        margin-bottom: 2.5rem;
    }

    .references {
        --references-height: 26rem;
        --references-panel-inset: 1.5rem;
    }

    .references-header {
        margin-bottom: 2rem;
    }

    .references-panel {
        flex-direction: column;
        align-items: flex-start;
        padding-block: 1.5rem;
    }

    .spotlight-card {
        min-height: 26rem;
    }

    .spotlight-panel {
        padding: 1.5rem;
    }

    .spotlight-facts {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .references-info {
        gap: 1rem;
    }

    .services {
        --services-card-height: 24rem;
    }

    .services-card {
        padding: 1.5rem;
    }

    .services-card-title {
        padding-block: 1rem;
    }

    .contact {
        --contact-height: 22rem;
    }

    .contact-media {
        padding: 1.5rem;
    }

    .contact-form {
        min-height: 0;
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --font-section-title-xl: 2rem;
        --line-section-title-xl: 2.375rem;
        --font-section-title-lg: 1.75rem;
        --line-section-title-lg: 2.125rem;
        --font-display: 1.875rem;
        --line-display: 2.25rem;
        --font-lead: 1.25rem;
        --line-lead: 1.625rem;
    }

    .hero-facts-link {
        flex-direction: column;
        gap: 1.25rem;
    }

    .hero-facts-link .hero-fact {
        padding-block: 0;
    }

}