/* ZMĚNA – společný vzhled veřejných SEO a informačních stránek Vareborgu */

:root {
    --public-bg:
        #090b09;

    --public-surface:
        rgb(21 27 21 / 96%);

    --public-surface-soft:
        rgb(31 36 29 / 94%);

    --public-border:
        rgb(185 132 54 / 58%);

    --public-border-soft:
        rgb(185 132 54 / 28%);

    --public-gold:
        #d8ad62;

    --public-gold-light:
        #f0ce8c;

    --public-text:
        #eee6d2;

    --public-text-muted:
        #bbb5a5;

    --public-shadow:
        rgb(0 0 0 / 48%);
}


* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;
    background:
        var(--public-bg);
    color-scheme:
        dark;
}


body {
    min-height:
        100vh;
    margin:
        0;
    background:
        radial-gradient(circle at top,
            rgb(77 49 25 / 32%),
            transparent 38%),
        linear-gradient(180deg,
            #15110d 0%,
            #090c09 46%,
            #070907 100%);
    color:
        var(--public-text);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    line-height:
        1.65;
}


a {
    color:
        var(--public-gold-light);
}


a:hover {
    color:
        #fff0bd;
}


.public-page {
    width:
        min(100%, 1120px);
    margin:
        0 auto;
    padding:
        24px max(18px, env(safe-area-inset-right)) 54px max(18px, env(safe-area-inset-left));
}


.public-page__header {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        18px;
    margin-bottom:
        28px;
    padding:
        14px 18px;
    border:
        1px solid var(--public-border-soft);
    border-radius:
        14px;
    background:
        rgb(10 13 10 / 84%);
    box-shadow:
        0 12px 28px var(--public-shadow);
}


.public-page__brand {
    color:
        var(--public-gold-light);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(22px, 4vw, 30px);
    font-weight:
        700;
    text-decoration:
        none;
}


.public-page__home-link {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        42px;
    padding:
        8px 15px;
    border:
        1px solid var(--public-border);
    border-radius:
        10px;
    background:
        linear-gradient(180deg,
            rgb(116 74 35 / 94%),
            rgb(67 40 22 / 98%));
    color:
        var(--public-text);
    font-size:
        13px;
    font-weight:
        700;
    text-decoration:
        none;
}


.public-page__home-link:hover,
.public-page__home-link:focus-visible {
    border-color:
        var(--public-gold-light);
    color:
        #fff;
}


.public-page__hero {
    margin-bottom:
        30px;
    padding:
        clamp(24px, 5vw, 46px);
    border:
        1px solid var(--public-border);
    border-radius:
        18px;
    background:
        linear-gradient(145deg,
            rgb(48 38 25 / 96%),
            rgb(17 23 18 / 97%));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 5%),
        0 18px 36px var(--public-shadow);
}


.public-page__eyebrow {
    margin:
        0 0 8px;
    color:
        var(--public-gold);
    font-size:
        12px;
    font-weight:
        800;
    letter-spacing:
        0.1em;
    text-transform:
        uppercase;
}


.public-page__hero h1 {
    margin:
        0;
    color:
        var(--public-text);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(31px, 6vw, 54px);
    line-height:
        1.08;
}


.public-page__lead {
    max-width:
        780px;
    margin:
        16px 0 0;
    color:
        var(--public-text-muted);
    font-size:
        clamp(16px, 2.4vw, 19px);
}


.public-page__cta {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        10px;
    margin-top:
        22px;
}


.public-page__button {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        44px;
    padding:
        9px 17px;
    border:
        1px solid var(--public-border);
    border-radius:
        10px;
    background:
        linear-gradient(180deg,
            rgb(128 81 37 / 96%),
            rgb(75 43 23 / 98%));
    color:
        #fff4dc;
    font-weight:
        700;
    text-decoration:
        none;
}


.public-page__button--secondary {
    background:
        rgb(21 28 22 / 94%);
}


.public-page__content {
    display:
        grid;
    gap:
        20px;
}


.public-page__section {
    padding:
        clamp(20px, 4vw, 30px);
    border:
        1px solid var(--public-border-soft);
    border-radius:
        15px;
    background:
        var(--public-surface);
    box-shadow:
        0 10px 24px rgb(0 0 0 / 22%);
}


.public-page__section h2 {
    margin:
        0 0 12px;
    color:
        var(--public-gold-light);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(23px, 4vw, 32px);
    line-height:
        1.2;
}


.public-page__section h3 {
    margin:
        22px 0 8px;
    color:
        var(--public-text);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        20px;
}


.public-page__section p {
    margin:
        0;
}


.public-page__section p+p {
    margin-top:
        13px;
}


.public-page__section ul,
.public-page__section ol {
    margin:
        12px 0 0;
    padding-left:
        24px;
}


.public-page__section li+li {
    margin-top:
        7px;
}


.public-page__cards {
    display:
        grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap:
        16px;
}


.public-page__card {
    padding:
        18px;
    border:
        1px solid var(--public-border-soft);
    border-radius:
        13px;
    background:
        var(--public-surface-soft);
}


.public-page__card h2,
.public-page__card h3 {
    margin-top:
        0;
}


.public-page__links {
    display:
        grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap:
        10px;
    margin:
        0;
    padding:
        0;
    list-style:
        none;
}


.public-page__links a {
    display:
        flex;
    align-items:
        center;
    min-height:
        46px;
    padding:
        9px 12px;
    border:
        1px solid var(--public-border-soft);
    border-radius:
        9px;
    background:
        rgb(12 17 13 / 88%);
    color:
        var(--public-text);
    font-size:
        13px;
    text-decoration:
        none;
}


.public-page__links a:hover,
.public-page__links a:focus-visible {
    border-color:
        var(--public-gold);
    color:
        var(--public-gold-light);
}


.public-page__footer {
    margin-top:
        26px;
    padding:
        20px;
    border-top:
        1px solid var(--public-border-soft);
    color:
        var(--public-text-muted);
    font-size:
        12px;
    text-align:
        center;
}


.public-page__footer-nav {
    display:
        flex;
    flex-wrap:
        wrap;
    justify-content:
        center;
    gap:
        12px 18px;
    margin-bottom:
        10px;
}


.public-page__footer-nav a {
    color:
        var(--public-text-muted);
}


@media (max-width: 720px) {
    .public-page {
        padding-top:
            12px;
    }

    .public-page__header {
        margin-bottom:
            14px;
        padding:
            10px 12px;
    }

    .public-page__brand {
        font-size:
            20px;
    }

    .public-page__home-link {
        min-height:
            38px;
        padding:
            6px 10px;
        font-size:
            11px;
    }

    .public-page__hero {
        padding:
            22px 18px;
    }

    .public-page__cards,
    .public-page__links {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .public-page__section {
        padding:
            18px;
    }
}