/* CSS PREMENNÉ PRE JEDNODUCHÚ ÚPRAVU FARIEB */
:root {
    --bg-main: #111827;
    --header-bg: #111827;
    --card-1: #111827;
    --card-2: #334155;
    --card-3: #111827;
    --accent: #6366f1;
    --text-light: #f8fafc;
    --text-muted: #ffffff;
    --overlay-dark: rgba(0, 0, 0, 0.45);
    /* Tmavá maska pri hoveri */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    /* 100dvh rieši mobily bez odsekávania spodku */
    height: 100vh;
    height: 100dvh;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    background-color: var(--bg-main);
    color: var(--text-light);
    overflow: hidden;
}

/* HLAVIČKA */
header {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    /* Moderný sklený efekt */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 20;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* HLAVNÝ OBSAH - DESKTOP LAYOUT */
main {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* Stĺpce vedľa seba */
    width: 100%;
    height: 100%;
}

.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 2rem;
    position: relative;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Plynulá animácia pre Flex */
    transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: flex;
}

.column:last-child {
    border-right: none;
}

.column:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Obrázky priradené priamo ku stĺpcom (v základe ich prekryje plná maska) */
.column-1 {
    background-image: url("../img/citroen-bg.webp");
}

.column-2 {
    background-image: url("../img/hyundai-bg.webp");
}

.column-3 {
    background-image: url("../img/mazda-bg.webp");
}

/* MASKA (Overlay) - V základe zakrýva obrázok plnou farbou pozadia */
.column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    /* Plná tmavá farba pred hoverom */
    z-index: 1;
    pointer-events: none;
    /* DÔLEŽITÉ: Aby maska netrhala pohyb myši */
    transition: background-color 0.5s ease;
    /* Plynulý prechod odhalenia obrázka */
}

.bg-logo {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    transition: opacity .45s ease;
}

.column-1 .bg-logo {
    background-image: url("../img/logo-citroen-bg.webp");
}

.column-2 .bg-logo {
    background-image: url("../img/logo-hyundai-bg.webp");
}

.column-3 .bg-logo {
    background-image: url("../img/logo-mazda-bg.webp");
}

.column:hover .bg-logo,
.column:focus-within .bg-logo {
    opacity: 0;
}

/* Na hoveri sa maska zmení na polopriehľadnú tmavú vrstvu */
.column:hover::before,
.column:focus-within::before {
    background-color: var(--overlay-dark);
}

.column::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 3;
}

/* HLAVIČKA STĹPCA (Stále viditeľná) */
.column-header {
    position: relative;
    z-index: 2;
    /* Vždy nad overlayom */
    text-align: left;
    transition: transform 0.4s ease;
}

.column-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    transition: transform 0.4s ease;
}

.column-icon img {
    width: auto;
    height: 70px;
}

.column-title {
    font-size: 2rem;
    font-weight: 600;
    white-space: nowrap;
}

/* DETAILNÝ POPIS (Skrytý do hoveru/focusu) */
.column-body {
    position: relative;
    /* OPRAVA: Pridaná pozícia */
    z-index: 2;
    /* OPRAVA: Aby nebol text a tlačidlo pod overlayom */
    max-width: 360px;
    opacity: 0;
    max-height: 0;
    transform: translateY(15px);
    transition:
        opacity 0.4s ease 0.1s,
        transform 0.4s ease 0.1s,
        max-height 0.4s ease;
    text-align: left;
    margin-top: 1rem;
}

.column-body p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.column-body a.column-btn {
    display: inline-block;
    text-decoration: none;
    color: var(--text-muted);
    padding: 10px 20px;
    border: 1px solid var(--text-muted);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.column-body a.column-btn:hover {
    background-color: var(--text-muted);
    color: var(--bg-main);
}

/* HOVER A FOCUS STAVY */
.column:hover,
.column:focus-within {
    flex: 2.5;
    /* Zväčšenie aktívneho stĺpca */
}

.column:hover .column-body,
.column:focus-within .column-body {
    opacity: 1;
    max-height: 200px;
    /* Umožní textu plynulo vyrolovať */
    transform: translateY(0);
}

/* PÄTIČKA */
footer {
    background-color: var(--header-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    z-index: 20;
    padding: 20px;
    text-align: center;
}

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

/* RESPONZIVITA (MOBILY A TABLETY) */
@media (max-width: 768px) {
    main {
        flex-direction: column;
        /* Preklopenie pod seba */
    }

    .column {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
    }

    .column:last-child {
        border-bottom: none;
    }

    /* Na mobile sa zväčšuje výška, nie šírka */
    .column:hover,
    .column:focus-within {
        flex: 3;
    }

    .column-title {
        font-size: 1.25rem;
    }

    .column-icon {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }
}