/* IMPORT */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* PROMĚNNÉ (Usnadní budoucí úpravy barev) */
:root {
    --color-primary: #ea8e34;
    --color-primary-alt: #ea8f34;
    --color-primary-hover: #ffcf9e;
    --color-bg-light: #f2f1ed;
    --color-bg-dark: #000;
    --color-text-gray: #666777;
    --color-white: #fff;
    --nav-height: 6rem;
}

/* HTML */
html {
    scrollbar-gutter: stable;
}

/* BODY */
body {
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
    padding: 0;
    padding-right: 0 !important;
}

/* NAVBAR */
.navbar {
    background-color: var(--color-bg-light);
    height: var(--nav-height);
    width: 100%;
}

@media (max-width: 991px) {
    .navbar {
        padding: 0.5rem 1rem 0.5rem 1rem;
    }
}

.navbar-brand {
    font-weight: 500;
    font-size: 1.5rem;
}

.navbar-toggler {
    border: none;
    font-size: 1.25rem;
}

.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none;
    outline: none;
}

.nav-link {
    color: var(--color-text-gray);
    font-weight: 300;
    position: relative;
    text-transform: uppercase;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-bg-dark);
    font-weight: 500;
}

.btn-call {
    background-color: var(--color-bg-light);
    color: var(--color-bg-dark);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    transition: 0.3s background-color;
    cursor: pointer;
    text-transform: uppercase;
}

@media (max-width: 387px) {
    .btn-call {
        visibility: hidden;
        position: absolute;
    }
}

.img-icon {
    width: 4rem;
}

.img-icon-footer {
    width: 20rem;
    background-size: cover;
}

@media (min-width: 992px) {
    .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--color-primary);
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
        width: 100%;
        visibility: visible;
    }
}

/* SECTIONS */
section[id] {
    scroll-margin-top: var(--nav-height);
}

#contact,
#tech {
    scroll-margin-top: 2rem;
}

.section-hero,
.section-about,
.section-tech,
.section-contact {
    background-color: var(--color-bg-light);
    padding-top: 6rem;
    padding-bottom: 9rem;
}

.section-services,
.section-gallery,
.section-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    padding-top: 6rem;
    padding-bottom: 9rem;
    position: relative;
}

.section-services {
    padding-bottom: 13rem;
}

.section-fill-top {
    position: absolute;
    top: -10rem;
    left: 10%;
    transform: translateY(50%);
    width: calc(100% / 4);
    height: 10rem;
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 10;
    font-weight: 100;
    color: var(--color-bg-light);
    font-style: italic;
    font-size: 5rem;
}

.section-fill-bottom {
    position: absolute;
    bottom: 1rem;
    right: 10%;
    transform: translateY(50%);
    width: calc(100% / 3);
    height: 10rem;
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 10;
    font-weight: 100;
    color: var(--color-bg-light);
    font-style: italic;
    font-size: 5rem;
}

@media (max-height: 760px) and (orientation: landscape) {
    .section-hero {
        height: auto !important;
        min-height: 120vh;
        padding-top: 7rem !important;
    }

    .section-hero-left,
    .section-hero-right {
        height: auto !important;
        padding-bottom: 5rem;
    }

    .section-hero-left-heading {
        font-size: 1.8rem;
    }

    .section-hero-left-card {
        position: relative;
        transform: none;
        width: 100%;
        margin-top: 2rem;
    }
}

/* SECTION HERO */
.section-hero {
    background-size: cover;
    width: 100%;
    height: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
}

.section-hero-left {
    position: relative;
    height: 70vh;
}

.section-hero-left-heading {
    text-transform: uppercase;
}

.section-hero-left-card {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(50%);
    width: calc((100% / 3)*2);
    height: 10rem;
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 20;
    font-weight: 100;
    color: var(--color-bg-light);
    font-style: italic;
    font-size: 5rem;
}

.section-hero-left-card p {
    margin: 0;
}

@media (max-width: 1826px) {
    .section-hero-left-card p {
        font-size: 4rem;
    }
}

@media (max-width: 1510px) {
    .section-hero-left-card p {
        font-size: 3rem;
    }
}

@media (max-width: 1193px) {
    .section-hero-left-card p {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .section-hero-left-card p {
        font-size: 5rem;
    }
}

@media (max-width: 586px) {
    .section-hero-left-card p {
        font-size: 4rem;
    }
}

@media (max-width: 466px) {
    .section-hero-left-card p {
        font-size: 3rem;
    }
}

@media (max-width: 360px) {
    .section-hero-left-card p {
        font-size: 2rem;
    }
}

@media (max-width: 1503px) {
    .section-hero-left-card {
        font-size: 3rem;
    }
}

@media (max-width: 1189px) {
    .section-hero-left-card {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .section-hero {
        padding: 0;
        padding-top: 6rem !important;
        padding-bottom: 5rem;
    }

    .section-hero-left {
        height: calc(90dvh - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section-hero-left-card {
        transform: none;
        width: 100%;
        bottom: 0;
        font-size: 5rem;
    }

    .section-hero-left-heading {
        margin-top: 10rem;
    }

    .section-hero-left,
    .section-hero-right {
        height: 100dvh;
    }

    .section-tech,
    .section-contact {
        padding-top: 9rem;
    }

    .section-services,
    .section-gallery,
    .section-footer {
        padding-top: 9rem;
    }
}

@media (max-width: 682px) {
    .section-hero-left-card {
        font-size: 4rem;
    }
}

.section-hero-left-card-fill {
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    transform: translateY(50%);
    width: calc((100% / 3) + 1px);
    height: calc(5rem);
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 20;
}

@media (max-width: 991px) {
    .section-hero-left-card-fill {
        height: calc((5rem) + 2px);
    }
}

.section-hero-right {
    background-color: var(--color-primary-alt);
    height: 70vh;
}

.section-hero-right-image {
    background-size: cover;
    width: 100%;
}

.section-hero-right-card-fill {
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    transform: translateY(50%);
    width: calc((100%));
    height: 5rem;
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 20;
}

.section-hero-right-card-fill-2 {
    position: absolute;
    bottom: -5rem;
    left: 50%;
    transform: translateY(50%);
    width: calc((100% / 3) + 1px);
    height: 5rem;
    background-color: var(--color-bg-dark);
    padding: 20px;
    z-index: 20;
}

@media (max-width: 400px) {
    .section-hero-right {
        height: 50vh;
    }
}

.btn-read {
    background-color: var(--color-primary-alt);
    color: var(--color-bg-dark);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    transition: 0.3s background-color;
    cursor: pointer;
    margin-bottom: 4rem
}

@media (max-width: 991px) {
    .btn-read {
        margin-bottom: 20rem !important;
    }
}

/* SECTION TECH */
.section-tech-image {
    background-size: cover;
    width: 80%;
    margin: 1rem;
}

@media (max-height: 760px) and (orientation: landscape) {
    .section-tech .col-md-6 {
        width: 100%;
        margin-bottom: 2rem;
    }

    .section-tech-image {
        width: 60%;
    }
}

/* SECTION FOOTER */
.section-footer {
    height: 100%;
    background-color: var(--color-bg-dark);
}

.section-footer p {
    text-decoration-color: var(--color-white);
}

@media (max-width: 991px) {
    .img-icon-footer {
        display: none;
    }
}

@media (max-width: 1199px) {
    .section-footer {
        height: 100%;
    }
}

/* HEADINGS */
.heading-1 {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}

@media (max-width: 991px) {
    .heading-1 {
        font-size: 2rem;
    }
}

.heading-2 {
    font-size: 2rem;
    font-weight: 500;
}

@media (max-width: 991px) {
    .heading-2 {
        font-size: 1.5rem;
    }
}

/* LISTS */
.list-1 li {
    margin: 0.5rem;
    list-style: none;
}

.list-1 li::before {
    content: '\002B';
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -30px;
    top: -2px;
    color: var(--color-primary);
    font-size: 20px;
}

.list-footer li {
    margin: 0.5rem;
    list-style: none;
}

.list-footer li a {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
    text-decoration: none;
}

.list-footer li a::before {
    content: '\002B';
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -30px;
    top: -2px;
    color: var(--color-primary);
    font-size: 20px;
}

/* Odkaz Firmy.cz (Oprava původně chybějící třídy) */
.link-1 {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    transition: color 0.3s ease;
}

.link-1:hover {
    color: var(--color-primary-hover);
    text-decoration-color: var(--color-primary-hover);
}

/* ---------------------------------------------------
   SPOLEČNÝ KÓD PRO CUSTOM RÁMEČKY (Zabránění duplicitám)
------------------------------------------------------ */
.box-hero,
.box-tech,
.box-gallery,
.box-button,
.box-button-2 {
    border: var(--b) solid #0000;
    --_g: #0000 90deg, var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;
    background: conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 / var(--_p),
        conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 / var(--_p),
        conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% / var(--_p),
        conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g)) 100% 100% / var(--_p);
}

.box-hero {
    --b: 5px;
    --c: var(--color-bg-dark);
    --w: 50px;
}

.box-tech {
    --b: 8px;
    --c: var(--color-bg-dark);
    --w: 75px;
}

.box-gallery {
    --b: 8px;
    --c: var(--color-white);
    --w: 75px;
}

.box-button,
.box-button-2 {
    --b: 2px;
    --c: var(--color-bg-dark);
    --w: 10px;
    transition: 0.3s all ease-in-out;
}

.box-button-2 {
    background-color: var(--color-primary-alt);
}

.box-button:hover,
.box-button-2:hover {
    --w: 20px;
}

.box-button-2:hover {
    background-color: var(--color-primary-hover);
}

.striped {
    background: repeating-linear-gradient(45deg,
            var(--color-bg-light),
            var(--color-bg-light) 10px,
            #e6e6e3 10px,
            #e6e6e3 30px);
}

/* SECTION GALLERY */
.section-gallery .row {
    margin-left: 0;
    margin-right: 0;
}

.gallery-item {
    width: 100%;
    height: 300px;
    background-color: #222;
    overflow: hidden;
    display: block;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.lightbox-img {
    max-height: 85vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.modal-backdrop.show {
    opacity: 0.7;
}

#force-close-btn,
.force-side-btn {
    position: fixed;
    transition: none;
    transform: none;
    animation: none;
    opacity: 1;
    pointer-events: auto;
}

#force-close-btn {
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    z-index: 10010;
    padding: 0;
    cursor: pointer;
}

.force-side-btn {
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 80px;
    z-index: 10005;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-item {
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
}

.carousel-inner {
    display: flex;
    align-items: center;
    min-height: 85vh;
}

.carousel-control-prev.force-side-btn {
    left: 0;
}

.carousel-control-next.force-side-btn {
    right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
}

@media (max-height: 760px) and (orientation: landscape) {
    .lightbox-img {
        max-height: 70vh;
    }

    #force-close-btn {
        top: 0.5rem;
        right: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
    }
}

#galleryModal:not(.show) #force-close-btn,
#galleryModal:not(.show) .force-side-btn {
    display: none;
}

@media (max-width: 576px) {
    #force-close-btn {
        top: 1rem;
        right: 1rem;
    }

    .force-side-btn {
        width: 50px;
    }
}

/* TOTO JE OPRAVENÉ PRAVIDLO PRO ZAŘÍZENÍ NA ŠÍŘKU (LANDSCAPE) */
@media (max-height: 760px) and (orientation: landscape) {

    .section-services,
    .section-tech,
    .section-gallery,
    .section-contact,
    .section-footer {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }

    .section-fill-top,
    .section-fill-bottom,
    .section-hero-left-card-fill-1,
    .section-hero-left-card-fill-2 {
        display: none !important;
    }

    /* Větší výška pro navigaci a přizpůsobení loga */
    .navbar {
        height: 4.5rem !important;
        padding: 0.5rem 1.5rem !important;
    }

    .img-icon {
        width: 3.5rem;
    }

    .section-hero {
        padding-top: 1rem !important;
        height: auto !important;
        min-height: 80vh;
    }

    .section-hero-left-heading {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
        margin-top: 6rem !important;
    }

    .heading-1 {
        font-size: 1.8rem !important;
    }

    p {
        font-size: 0.9rem !important;
    }

    .btn-call {
        display: none !important;
    }

    .btn-read {
        margin-bottom: 8rem !important;
    }

    section[id] {
        scroll-margin-top: 2rem;
    }

    #about {
        scroll-margin-top: 0;
        scroll-margin-bottom: -2rem;
        padding-bottom: 3rem;
    }

    .offcanvas-body .nav-link {
        font-size: 0.85rem;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    .section-hero-left-card p {
        font-size: 3rem !important;
    }
}

body.offcanvas-open,
body.modal-open,
.fixed-top,
.fixed-bottom,
.is-fixed,
.sticky-top {
    padding-right: 0 !important;
}

body {
    padding-right: 0 !important;
}