/* =========================================================
   AMFR INFORMATION CENTER
   Wspólny złoty szablon stron /informacje/
   ========================================================= */

:root{
    --gold:#d7a63c;
    --gold-light:#f1ca72;
    --gold-dark:#8f651d;

    --panel:rgba(5,5,5,.90);
    --panel-soft:rgba(10,9,6,.88);

    --line:rgba(215,166,60,.58);
    --line-soft:rgba(215,166,60,.28);

    --glow:rgba(215,166,60,.28);

    --text:#ffffff;
    --text-dim:#c8c8c8;

    --black:#050505;
}


/* =========================================================
   RESET
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:20px;

    min-height:100vh;

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    color:var(--text);

    line-height:1.7;

    background:
        linear-gradient(
            rgba(0,0,0,.70),
            rgba(0,0,0,.82)
        ),
        url("/images/tlo.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}


/* =========================================================
   GŁÓWNY OBSZAR STRONY
   ========================================================= */

#content,
.container{
    width:100%;
    max-width:1200px;

    margin:0 auto;
}


/* =========================================================
   GÓRNA NAWIGACJA
   ========================================================= */

.header-nav{
    width:100%;
    max-width:1200px;

    margin:0 auto 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
}


/* =========================================================
   PRZYCISK POWROTU
   ========================================================= */

.btn-back{
    display:inline-block;

    color:var(--gold-light);

    text-decoration:none;

    font-size:1.05rem;
    font-weight:700;

    padding:9px 14px;

    border:1px solid transparent;
    border-radius:9px;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.btn-back:hover{
    color:#fff;

    border-color:var(--line);

    background:rgba(215,166,60,.08);

    box-shadow:
        0 0 16px var(--glow);

    transform:translateY(-1px);
}


/* =========================================================
   LOGO / DODATKOWY TEKST W NAGŁÓWKU
   ========================================================= */

.logo{
    color:var(--text-dim);
    font-size:1rem;
}


/* =========================================================
   PRZEŁĄCZNIK JĘZYKA
   ========================================================= */

.lang-switcher{
    font-size:1.15rem;
    font-weight:700;

    color:var(--gold-light);

    user-select:none;
}

.lang-switcher span{
    cursor:pointer;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.lang-switcher span:hover{
    color:#fff;

    text-shadow:
        0 0 12px var(--glow);
}


/* =========================================================
   GŁÓWNE NAGŁÓWKI
   ========================================================= */

h1{
    text-align:center;

    color:var(--gold-light);

    font-size:clamp(2rem, 5vw, 3.2rem);

    line-height:1.15;

    margin:45px 0 50px;

    text-shadow:
        0 0 10px rgba(215,166,60,.40),
        0 0 28px rgba(215,166,60,.18);
}


/* =========================================================
   ZWYKŁE SEKCJE TREŚCI
   ========================================================= */

section{
    margin:0 0 28px;

    padding:30px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(10,9,6,.94),
            rgba(3,3,3,.91)
        );

    border:1px solid var(--line-soft);

    border-radius:16px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

section h2{
    color:var(--gold-light);

    font-size:clamp(1.45rem, 3vw, 1.9rem);

    line-height:1.25;

    margin:0 0 20px;

    text-shadow:
        0 0 10px rgba(215,166,60,.16);
}

section p{
    color:var(--text-dim);

    font-size:1.05rem;

    line-height:1.85;

    margin:0 0 18px;
}

section p:last-child{
    margin-bottom:0;
}

section strong{
    color:#fff;
    font-weight:700;
}


/* =========================================================
   LISTY
   ========================================================= */

section ul,
section ol{
    color:var(--text-dim);

    font-size:1.03rem;

    line-height:1.8;

    padding-left:26px;
}

section li{
    margin-bottom:8px;
}

section li::marker{
    color:var(--gold);
}


/* =========================================================
   LINKI W TREŚCI
   ========================================================= */

section a,
.section a{
    color:var(--gold-light);

    text-decoration:none;

    font-weight:650;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

section a:hover,
.section a:hover{
    color:#fff;

    text-shadow:
        0 0 12px var(--glow);
}


/* =========================================================
   SIATKA KAFELKÓW
   STRONA GŁÓWNA CENTRUM INFORMACJI
   ========================================================= */

.tiles-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:24px;

    width:100%;
    max-width:1200px;

    margin:0 auto 50px;
}


/* =========================================================
   KAFELKI
   ========================================================= */

.tile{
    position:relative;

    min-height:155px;

    padding:28px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(10,9,6,.94),
            rgba(3,3,3,.91)
        );

    border:1px solid var(--line-soft);

    border-radius:16px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.38);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.tile::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    opacity:.55;
}

.tile:hover{
    transform:translateY(-5px);

    border-color:var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(18,14,7,.96),
            rgba(4,4,4,.94)
        );

    box-shadow:
        0 14px 35px rgba(0,0,0,.48),
        0 0 22px rgba(215,166,60,.13);
}

.tile h2{
    color:var(--gold-light);

    font-size:1.25rem;

    line-height:1.3;

    margin:0 0 14px;

    text-shadow:
        0 0 10px rgba(215,166,60,.15);
}

.tile p{
    color:var(--text-dim) !important;

    font-size:.95rem;

    line-height:1.6;

    margin:0;
}

.tile a{
    color:var(--gold-light);

    text-decoration:none;
}

.tile a:hover{
    color:#fff;
}


/* =========================================================
   KAFELKI RESPONSYWNE
   ========================================================= */

@media (min-width:768px){

    .tiles-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (min-width:1024px){

    .tiles-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


/* =========================================================
   KLASA .SECTION
   DLA STARSZYCH STRON INFORMACJI
   ========================================================= */

.section{
    margin-bottom:28px;

    padding:30px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(10,9,6,.94),
            rgba(3,3,3,.91)
        );

    border:1px solid var(--line-soft);

    border-radius:16px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.38);
}


/* =========================================================
   WAŻNE INFORMACJE
   ========================================================= */

.important-box{
    margin:30px 0;

    padding:25px 28px;

    background:
        linear-gradient(
            145deg,
            rgba(25,18,5,.94),
            rgba(6,5,3,.94)
        );

    border:1px solid var(--line);

    border-radius:16px;

    box-shadow:
        0 0 22px rgba(215,166,60,.10);
}


/* =========================================================
   WYRÓŻNIENIA / OSTRZEŻENIA
   ========================================================= */

.highlight{
    padding:16px 18px;

    border-left:3px solid var(--gold);

    background:rgba(215,166,60,.07);

    border-radius:0 8px 8px 0;
}

.warning{
    padding:16px 18px;

    border:1px solid rgba(215,166,60,.45);

    background:rgba(143,101,29,.12);

    border-radius:10px;

    color:#f1dba8 !important;
}


/* =========================================================
   PRZYCISKI W SEKCJACH
   np. REZYDENT / COMMUNITY SHOWCASE
   ========================================================= */

.info-action{
    margin-top:22px;
}

.info-action a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:11px 20px;

    color:var(--gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(215,166,60,.12),
            rgba(143,101,29,.06)
        );

    border:1px solid var(--line);

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    box-shadow:
        0 6px 18px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.info-action a:hover{
    color:#fff;

    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(215,166,60,.20),
            rgba(143,101,29,.10)
        );

    border-color:var(--gold-light);

    box-shadow:
        0 8px 22px rgba(0,0,0,.32),
        0 0 18px var(--glow);
}


/* =========================================================
   COMMUNITY SHOWCASE ACTION
   ZACHOWUJEMY KLASĘ ZE STAREGO CSS
   ========================================================= */

.showcase-action{
    margin:45px auto;

    padding:30px;

    max-width:700px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(15,11,5,.95),
            rgba(4,4,4,.94)
        );

    border:1px solid var(--line);

    border-radius:18px;

    box-shadow:
        0 12px 32px rgba(0,0,0,.42),
        0 0 20px rgba(215,166,60,.10);
}

.showcase-btn{
    display:inline-block;

    margin-top:20px;

    padding:13px 26px;

    background:
        linear-gradient(
            180deg,
            rgba(215,166,60,.17),
            rgba(143,101,29,.10)
        );

    color:var(--gold-light);

    text-decoration:none;

    font-weight:700;

    font-size:1.05rem;

    border:1px solid var(--line);

    border-radius:10px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.30);

    transition:
        transform .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.showcase-btn:hover{
    color:#fff;

    transform:translateY(-2px);

    border-color:var(--gold-light);

    box-shadow:
        0 8px 22px rgba(0,0,0,.35),
        0 0 20px var(--glow);
}


/* =========================================================
   DOLNA NAWIGACJA
   CENTRUM INFORMACJI / STRONA GŁÓWNA
   ========================================================= */

.bottom-navigation{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:15px;

    margin:45px 0 25px;

    padding:28px 0 0;

    border-top:1px solid var(--line-soft);
}

.bottom-navigation a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:11px 20px;

    color:var(--gold-light);

    background:rgba(5,5,5,.82);

    border:1px solid var(--line);

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    box-shadow:
        0 6px 18px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.bottom-navigation a:hover{
    color:#fff;

    transform:translateY(-2px);

    background:rgba(215,166,60,.10);

    box-shadow:
        0 8px 22px rgba(0,0,0,.32),
        0 0 18px var(--glow);
}


/* =========================================================
   LINIA HR
   ========================================================= */

hr{
    border:0;

    height:1px;

    margin:40px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--line),
            transparent
        );
}


/* =========================================================
   STANDARDOWE LINKI
   ========================================================= */

a{
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   TELEFON / TABLET
   ========================================================= */

@media (max-width:768px){

    body{
        padding:14px;

        background-attachment:scroll;

        background-position:center top;
    }

    .header-nav{
        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        margin-bottom:20px;
    }

    h1{
        font-size:2.05rem;

        margin:32px 0 34px;
    }

    section,
    .section{
        padding:22px 19px;

        margin-bottom:20px;

        border-radius:13px;
    }

    section h2{
        font-size:1.45rem;

        margin-bottom:16px;
    }

    section p{
        font-size:1rem;

        line-height:1.75;
    }

    .tile{
        min-height:auto;

        padding:22px;
    }

    .lang-switcher{
        font-size:1.1rem;
    }

    .bottom-navigation{
        flex-direction:column;

        align-items:stretch;

        margin-top:35px;
    }

    .bottom-navigation a,
    .info-action a,
    .showcase-btn{
        width:100%;

        text-align:center;
    }

}


/* =========================================================
   MAŁE TELEFONY
   ========================================================= */

@media (max-width:480px){

    body{
        padding:11px;
    }

    h1{
        font-size:1.8rem;

        margin:28px 0 30px;
    }

    section,
    .section{
        padding:19px 16px;
    }

    section h2{
        font-size:1.3rem;
    }

    section p{
        font-size:.97rem;
    }

    .btn-back{
        font-size:.96rem;

        padding:8px 10px;
    }

    .tiles-grid{
        gap:16px;
    }

}