/***********************************************************************
 *
 * Inteltech Engineering Laboratory
 * Soubor......: functions/main.css
 * Verze.......: 0.2.3
 * Stav........: DEVELOPMENT
 *
 ***********************************************************************/

/* KOTVA: DESIGN SYSTEM */

:root {
    --bg: #020713;
    --panel: rgba(6, 16, 30, 0.92);
    --border: rgba(82, 139, 210, 0.25);
    --border-strong: rgba(62, 167, 255, 0.48);

    --text: #f4f7fb;
    --muted: #8fa4bd;
    --blue: #12a8ff;
    --blue-bright: #3cc8ff;
    --violet: #a65cff;

    --left-width: 245px;
    --right-width: 330px;
    --gap: 14px;
    --radius: 12px;

    --font-ui: Inter, "Segoe UI", Arial, sans-serif;
    --font-data: "DejaVu Sans Mono", Consolas, monospace;
}

/* --- /KONEC KOTVA: DESIGN SYSTEM --- */


/* KOTVA: RESET */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -20%, rgba(17, 100, 210, 0.16), transparent 42rem),
        linear-gradient(180deg, #030916, #020713 70%);
    font-family: var(--font-ui);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* --- /KONEC KOTVA: RESET --- */


/* KOTVA: LAYOUT */

.site-shell {
    width: 100%;
    min-height: 100vh;
    padding: 14px;
}

.site-layout {
    display: grid;
    grid-template-columns:
        minmax(220px, var(--left-width))
        minmax(0, 1fr)
        minmax(290px, var(--right-width));
    gap: var(--gap);
    align-items: start;
}

.site-left,
.site-main,
.site-right {
    min-width: 0;
}

.panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        var(--panel);
    box-shadow: 0 0 30px rgba(0, 57, 130, 0.10);
}

/* --- /KONEC KOTVA: LAYOUT --- */


/* KOTVA: TOPBAR */

.site-header {
    margin-bottom: var(--gap);
}

.site-header__top {
    display: grid;
    grid-template-columns: minmax(350px, 390px) minmax(310px, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 112px;
    padding: 8px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: rgba(2, 8, 18, 0.98);
}

.header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 96px;
    overflow: hidden;
}

.header-brand__approved {
    display: block;
    width: 100%;
    max-width: 357px;
    height: 96px;
    object-fit: cover;
    object-position: left center;
}

.header-claim {
    display: grid;
    gap: 8px;
    padding-left: 24px;
    border-left: 1px solid var(--border);
}

.header-claim strong {
    font-size: clamp(.90rem, 1.18vw, 1.08rem);
    letter-spacing: .055em;
}

.header-claim span {
    color: var(--muted);
    font-size: .86rem;
}

.header-widgets {
    display: flex;
    gap: 14px;
}

.header-widget {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 166px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.014);
}

.header-widget__icon {
    color: var(--blue-bright);
    font-size: 2rem;
    line-height: 1;
}

.header-widget strong,
.header-widget small {
    display: block;
}

.header-widget strong {
    font-family: var(--font-data);
    font-size: .96rem;
}

.header-widget small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .75rem;
}

.weather-icon {
    color: #f9cb55;
}

/* --- /KONEC KOTVA: TOPBAR --- */


/* KOTVA: NIZKY BREADCRUMB */

.breadcrumb-bar {
    min-height: 46px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background:
        linear-gradient(90deg, rgba(0, 139, 255, .045), rgba(163, 79, 255, .025)),
        rgba(3, 11, 23, .97);
}

.breadcrumb-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 0 22px;
    list-style: none;
    font-size: .84rem;
    letter-spacing: .025em;
}

.breadcrumb-bar__item {
    display: flex;
    align-items: center;
}

.breadcrumb-bar__item a,
.breadcrumb-bar__item .is-current {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    color: var(--muted);
}

.breadcrumb-bar__item a:hover,
.breadcrumb-bar__item .is-current {
    color: var(--blue-bright);
}

.breadcrumb-bar__separator {
    margin: 0 15px;
    color: #7aa9d3;
    font-size: 1.25rem;
    line-height: 1;
}

.breadcrumb-bar__icon {
    color: var(--blue-bright);
    font-size: 1.18rem;
}

/* --- /KONEC KOTVA: NIZKY BREADCRUMB --- */


/* KOTVA: LEVE MENU */

.left-navigation {
    padding: 8px;
}

.left-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left-menu__link {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 61px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--muted);
}

.left-menu__link:hover {
    color: white;
    background: rgba(33, 111, 223, .09);
}

.left-menu__link.is-active {
    color: white;
    border-color: rgba(27, 135, 255, .34);
    background:
        linear-gradient(90deg, rgba(12, 91, 210, .37), rgba(14, 72, 150, .16));
    box-shadow: inset 3px 0 0 var(--blue);
}

.left-menu__icon {
    display: grid;
    place-items: center;
    color: #b8d4f8;
    font-size: 1.8rem;
    line-height: 1;
}

.left-menu__link.is-active .left-menu__icon {
    color: var(--blue-bright);
    text-shadow: 0 0 16px rgba(20, 177, 255, .65);
}

.left-menu__text strong,
.left-menu__text small {
    display: block;
}

.left-menu__text strong {
    color: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-transform: uppercase;
}

.left-menu__text small {
    margin-top: 4px;
    color: #7f91a8;
    font-size: .74rem;
}

/* --- /KONEC KOTVA: LEVE MENU --- */












/* KOTVA: AKTUALITY */

.news-panel {
    padding: 16px;
}

.news-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 14px;
    border-bottom: 1px solid var(--border);
}

.news-panel__header h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.news-panel__header a {
    color: var(--blue);
    font-size: .70rem;
}

.news-list {
    display: grid;
}

.news-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px;
    padding: 17px 4px;
    border-bottom: 1px solid var(--border);
}

.news-card:last-child {
    border-bottom: 0;
}

.news-card img {
    width: 112px;
    height: 108px;
    object-fit: cover;
    border: 1px solid rgba(101, 145, 205, .25);
    border-radius: 8px;
}

.news-card time {
    color: var(--muted);
    font-size: .70rem;
}

.news-card h3 {
    margin: 8px 0;
    font-size: .98rem;
    line-height: 1.35;
}

.news-card p {
    margin: 0;
    color: #9eacc0;
    font-size: .78rem;
    line-height: 1.55;
}

.news-card div > a {
    display: block;
    margin-top: 8px;
    color: var(--blue-bright);
    text-align: right;
    font-size: 1.25rem;
}

/* --- /KONEC KOTVA: AKTUALITY --- */


/* KOTVA: OSTATNI OBSAH */

.page-content {
    min-height: 420px;
    padding: 34px;
}

.page-content h1 {
    margin-top: 0;
}

.page-content p {
    max-width: 74ch;
    color: var(--muted);
    line-height: 1.7;
}

.site-footer {
    margin-top: var(--gap);
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(3, 10, 20, .88);
    font-size: .72rem;
}

/* --- /KONEC KOTVA: OSTATNI OBSAH --- */


/* KOTVA: OMEZENI POHYBU */

@media (prefers-reduced-motion: reduce) {
    .approved-path,
    .approved-pin,
    .approved-flash {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* --- /KONEC KOTVA: OMEZENI POHYBU --- */


/* KOTVA: FINAL APPROVED HERO */

.hero-approved {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 775px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #020713;
    box-shadow: 0 0 35px rgba(0, 67, 160, .12);
}

.hero-approved__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero-approved__animation {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.approved-path,
.approved-pin {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.approved-electric--left .approved-path,
.approved-pin {
    stroke: #30cfff;
}

.approved-electric--right .approved-path {
    stroke: #bd54ff;
}

.approved-left-main,
.approved-right-main {
    stroke-width: 5;
}

.approved-left-b1,
.approved-left-b2,
.approved-right-b1,
.approved-right-b2 {
    stroke-width: 3.2;
}

.approved-left-b3,
.approved-left-b4,
.approved-right-b3,
.approved-right-b4 {
    stroke-width: 2.1;
}

.approved-pin {
    stroke-width: 3;
}

.approved-underline {
    stroke: #b95aff;
    stroke-width: 4;
}

.approved-flash {
    fill: none;
    stroke: #ffffff;
    stroke-width: 5;
    opacity: 0;
    filter:
        drop-shadow(0 0 7px #ffffff)
        drop-shadow(0 0 18px #31cfff)
        drop-shadow(0 0 28px #b254ff);
}

.page-loaded .approved-left-main {
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
    animation: approved-draw 1.05s ease-out .20s 1 forwards;
}

.page-loaded .approved-left-b1 {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: approved-draw .80s ease-out .34s 1 forwards;
}

.page-loaded .approved-left-b2 {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: approved-draw .84s ease-out .37s 1 forwards;
}

.page-loaded .approved-left-b3,
.page-loaded .approved-left-b4 {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
    animation: approved-draw .65s ease-out .48s 1 forwards;
}

.page-loaded .approved-pin--1 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.02s 1 forwards;
}

.page-loaded .approved-pin--2 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.14s 1 forwards;
}

.page-loaded .approved-pin--3 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.26s 1 forwards;
}

.page-loaded .approved-pin--4 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .46s ease-in-out 1.38s 1 forwards;
}

.page-loaded .approved-pin--5 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.50s 1 forwards;
}

.page-loaded .approved-pin--6 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.62s 1 forwards;
}

.page-loaded .approved-pin--7 {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: approved-draw .42s ease-in-out 1.74s 1 forwards;
}

.page-loaded .approved-flash {
    animation: approved-flash .80s ease-out 1.42s 1 forwards;
}

.page-loaded .approved-underline {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: approved-draw .85s ease-in-out 1.88s 1 forwards;
}

.page-loaded .approved-right-main {
    stroke-dasharray: 530;
    stroke-dashoffset: 530;
    animation: approved-draw .90s ease-out 2.55s 1 forwards;
}

.page-loaded .approved-right-b1,
.page-loaded .approved-right-b2 {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
    animation: approved-draw .76s ease-out 2.66s 1 forwards;
}

.page-loaded .approved-right-b3,
.page-loaded .approved-right-b4 {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: approved-draw .64s ease-out 2.76s 1 forwards;
}

@keyframes approved-draw {
    0% {
        opacity: 0;
    }

    9% {
        opacity: 1;
    }

    72% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes approved-flash {
    0% {
        opacity: 0;
        r: 8;
    }

    35% {
        opacity: 1;
        r: 34;
    }

    100% {
        opacity: 0;
        r: 60;
    }
}

/* --- /KONEC KOTVA: FINAL APPROVED HERO --- */

/* v0.2.4 – dokument scrolluje jako celek; žádný interní viewport */
html, body, .site-shell, .site-layout, .site-main, .hero-approved {height:auto;max-height:none;overflow-y:visible;}
.site-left, .site-right {position:static;overflow:visible;max-height:none;}
.hero-approved {min-height:0;aspect-ratio:900/775;}
.hero-approved__image {object-fit:fill;}
.left-menu__icon svg {width:29px;height:29px;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;fill:none;filter:drop-shadow(0 0 4px rgba(42,162,255,.25));}
.left-menu__link:hover .left-menu__icon svg,.left-menu__link.is-active .left-menu__icon svg {filter:drop-shadow(0 0 7px rgba(35,177,255,.8));}

/* v0.2.6 - graficke ikony presne podle schvaleneho navrhu */
.left-menu__icon img { width:42px; height:40px; object-fit:contain; display:block; mix-blend-mode:screen; filter:drop-shadow(0 0 3px rgba(39,149,255,.20)); }
.left-menu__link:hover .left-menu__icon img,.left-menu__link.is-active .left-menu__icon img { filter:drop-shadow(0 0 7px rgba(31,163,255,.70)); }

/* v0.2.9: dostupnost sekci a tooltip */
.left-menu__link.is-coming-soon {cursor:help;}
.left-menu__link.is-coming-soon:hover,.left-menu__link.is-coming-soon:focus-visible {border-color:rgba(50,169,255,.5);background:rgba(25,87,153,.2);}
.inteltech-coming-tooltip {position:fixed;z-index:10000;max-width:min(330px,calc(100vw - 24px));padding:13px 16px;background:#07182d;color:#e8f4ff;border:1px solid #24a6f7;border-radius:9px;box-shadow:0 8px 30px #000b,0 0 12px #0088ff55;font:13px/1.5 Arial,sans-serif;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s;}
.inteltech-coming-tooltip.is-visible {opacity:1;visibility:visible;}
