/* =================== HERO SEKCIJA (viršutinis baneris) =================== */

.hero {
    position: relative; /* kad viduje esantys absoliučiai pozicionuoti elementai (pvz. .hero-card) orientuotųsi į šitą bloką */
    min-height: 75vh;  /* hero sekcija užima bent 75% ekrano aukščio */
    display: flex;      /* naudojam flex, kad turinys galėtų vertikaliai centruotis */
    align-items: center;/* vertikaliai centruojame vidinį turinį hero viduje */
    color: #fff;        /* tekstas hero sekcijoje baltas */
    padding-bottom: 72px; /* šiek tiek papildomo tarpo apačioje */
    /* Fonas: pusiau permatomas žalias gradientas ant viršaus + nuotrauka */
    background:
        linear-gradient(120deg, rgba(12, 118, 74, 0.50), rgba(7, 82, 54, 0.18)),
        url("../img/hero-1.jpg") center/cover no-repeat;
}

/* Teksto blokas hero viduje */
.hero-content {
    max-width: 1500px; /* ribojame, kad tekstas nesitęstų per visą ekraną labai plačiai */
}

/* Maža „ženkliuko“ juosta virš pagrindinės antraštės */
.badge-hero {
    background-color: rgba(246, 198, 71, 0.15); /* švelnus geltonas fonas */
    color: var(--accent);                       /* geltona teksto spalva */
    border-radius: 999px;                       /* pilnai „tabletės“ forma */
    padding: 6px 14px;                          /* vertikalus ir horizontalus tarpeliai */
    font-size: 0.8rem;                          /* mažas šrifto dydis */
    letter-spacing: .06em;                      /* praretintos raidės */
    text-transform: uppercase;                  /* tekstas didžiosiomis raidėmis */
    font-weight: 600;                           /* paryškintas tekstas */
}

/* Pagrindinė hero antraštė */
.hero h1 {
    font-weight: 700;                                           /* stipriai paryškintas */
    font-size: clamp(2.4rem, 4vw, 3.4rem);                      /* sklandžiai prisitaikantis dydis: tarp 2.4rem ir 3.4rem */
    line-height: 1.1;                                           /* nedidelis tarpas tarp eilučių */
    margin-top: 18px;                                           /* tarpas viršuje nuo badge */
}

/* Hero aprašomasis tekstas */
.hero p {
    margin-top: 16px;   /* tarpas po h1 */
    color: #E5E7EB;     /* šviesiai pilkas tekstas (kad būtų minkštesnis nei gryna balta) */
    font-size: 1rem;    /* bazinis šrifto dydis */
}

/* Bendras hero mygtuko stilius */
.btn-hero {
    margin-top: 24px;        /* tarpas virš mygtuko */
    padding: 0.8rem 1.8rem;  /* vertikalus ir horizontalus padding */
    border-radius: 999px;    /* pilnai apvalios kapsulės formos mygtukas */
    font-weight: 600;        /* paryškintas tekstas */
    letter-spacing: 0.03em;  /* šiek tiek praretintos raidės */
}

/* Konkreti hero mygtuko spalvinė tema */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--accent), #FFD56C); /* geltonas gradientas */
    border: none;             /* be kraštinės */
    color: #1F2933;           /* tamsus tekstas ant šviesaus geltono fono */
}

/* Hover efektas hero mygtukui – truputį patamsinam */
.btn-hero-primary:hover {
    filter: brightness(0.95);
}

/* Stiklinė statistikos kortelė hero dešinėje pusėje */
.hero-card {
    position: absolute;         /* absoliučiai pozicionuojama hero viduje */
    right: 18%;                 /* atitraukta nuo dešinio krašto 18% */
    bottom: 40%;                /* atitraukta nuo apačios 40% (pakelta aukščiau) */
    max-width: 480px;           /* kortelės maksimalus plotis */

    background: rgba(255, 255, 255, 0.12);          /* permatomas baltas fonas */
    border-radius: 22px;                            /* suapvalinti kampai */
    padding: 1.4rem 1.6rem;                         /* vidinis tarpas */
    backdrop-filter: blur(12px);                    /* stiklo tipo blur efektas */
    border: 1px solid rgba(255, 255, 255, 0.25);    /* šviesi, pusiau permatoma kraštinė */
}

/* Dideli skaičiai hero kortelėje (pvz. 500+ mokiniai) */
.hero-stat {
    font-size: 1.8rem;  /* didesnis šriftas */
    font-weight: 700;   /* stipriai paryškintas */
}

/* Aprašomasis tekstas po skaičiumi (pvz. „Mokiniai“) */
.hero-stat-label {
    font-size: 0.85rem; /* mažesnis tekstas */
    color: #E5E7EB;     /* šviesiai pilkas tekstas */
}

/* =================== BENDRAS SEKCIONAVIMAS =================== */

/* Visoms <section> – vienodi vertikalūs tarpai */
section {
    padding: 72px 0; /* 72px viršuje ir apačioje */
}

/* Kad scrollinant į #apie, #naujienos ir pan.,
   turinys nepasislėptų po fiksuotu headeriu */
#apie,
#naujienos,
#nuorodos,
#prisijungimas {
    scroll-margin-top: 100px; /* „užrezervuoja“ vietos viršuje scroll pozicijai */
}

/* Bendras sekcijų antraščių stilius */
.section-title {
    font-weight: 700;       /* paryškinta */
    margin-bottom: 10px;    /* tarpas po pavadinimu */
}

/* Paaiškinantis tekstas po sekcijos antrašte */
.section-subtitle {
    color: var(--text-muted); /* prislopinta teksto spalva */
    max-width: 560px;         /* kad tekstas nebūtų labai platus – lengviau skaityti */
}

/* =================== ABOUT SEKCIJA (ikonos, kortelės) =================== */

/* Apvali ikona su fonu, naudojama šalia teksto */
.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;        /* daro apskritimą */
    display: inline-flex;      /* flex, kad ikona viduje būtų centruota */
    align-items: center;
    justify-content: center;
    background: rgba(12, 118, 74, 0.08); /* švelnus žalsvas fonas */
    color: var(--bg-primary);           /* žalia ikonų spalva */
    font-size: 1.4rem;                  /* šiek tiek didesnė ikona */
}

/* Bendras blokas privalumų/ypatumų kortelėms */
.feature-card {
    border-radius: 18px;                 /* suapvalinti kampai */
    border: 1px solid #E5E7EB;           /* šviesi riba */
    padding: 1.6rem;                     /* vidinis tarpas */
    background-color: #fff;              /* balta fono spalva */
    transition: transform 0.18s ease,    /* sklandus pakėlimo efektas */
                box-shadow 0.18s ease,
                border-color 0.18s ease;
}

/* Užvedus ant feature kortelės, ji subtiliai pakyla ir patamsėja kraštai/šešėlis */
.feature-card:hover {
    transform: translateY(-4px);                      /* šiek tiek pakeliam į viršų */
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);   /* švelnus šešėlis */
    border-color: rgba(12, 118, 74, 0.28);            /* truputį žalesnė riba */
}

/* =================== NAUJIENŲ SEKCIJA =================== */

/* Naujienų sekcijai duodam šviesų foną (kad išsiskirtų nuo kitų) */
#naujienos {
    background-color: var(--light-bg);
}

/* Vienos naujienos kortelė */
.news-card {
    border-radius: 18px;                   /* suapvalinti kampai */
    overflow: hidden;                      /* nuotrauka ar turinys neperlipinėtų */
    border: 1px solid #E5E7EB;             /* šviesi riba */
    background-color: #fff;                /* balta fono spalva */
    transition: transform 0.18s ease,      /* sklandus pakilimas */
                box-shadow 0.18s ease;
    height: 100%;                          /* kad kortelė užimtų pilną stulpelio aukštį */
}

/* Užvedus naujienos kortelę – šiek tiek pakeliam ir užmetam šešėlį */
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

/* Viršutinė kortelės dalis, kur bus fono paveikslėlis (per background-image) */
.news-img {
    height: 190px;             /* fiksuotas aukštis */
    background-size: cover;    /* paveikslėlis užpildo bloką išlaikydamas proporcijas */
    background-position: center;
    background-repeat: no-repeat;
}

/* Ženkliukas datai ar kategorijai naujienose */
.news-badge {
    font-size: 0.75rem;                         /* smulkus tekstas */
    background-color: rgba(12, 118, 74, 0.08);  /* švelnus žalias fonas */
    color: var(--bg-primary);                   /* žalias tekstas */
    border-radius: 999px;                       /* apvali kapsulė */
}

/* =================== KONTAKTŲ SEKCIJA =================== */

/* Kontaktų sekcijai (jei naudoji id="kontaktai") – balta fono spalva */
#kontaktai {
    background-color: #fff;
}

/* Kortelė su kontaktų forma ir informacija */
.contact-card {
    border-radius: 18px;            /* suapvalinti kampai */
    border: 1px solid #E5E7EB;      /* šviesi riba */
    padding: 1.8rem;                /* vidinis tarpas */
    background-color: #ffffff;      /* balta fono spalva */
}

/* Konteineris žemėlapiui (Google Maps iframe) */
.map-container {
    min-height: 320px;                      /* minimalus aukštis, kad žemėlapis nebūtų labai plokščias */
    border-radius: 18px;                    /* suapvalinti kampai */
    overflow: hidden;                       /* kad žemėlapis neišeitų už kampų */
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); /* gražus šešėlis */
}

/* Formos laukelių ir select stilius */
.form-control,
.form-select {
    border-radius: 10px;   /* suapvalinti kampai */
    border-color: #E5E7EB; /* šviesi riba */
}

/* Fokusavus laukelį – žalias akcentas ir švelnus glow */
.form-control:focus,
.form-select:focus {
    border-color: var(--bg-primary);
    box-shadow: 0 0 0 0.15rem rgba(12, 118, 74, 0.18);
}

/* Pagrindinis mygtukas (Bootstrap .btn-primary) priderintas prie mokyklos dizaino */
.btn-primary {
    background-color: var(--bg-primary);      /* pagrindinė žalia */
    border-color: var(--bg-primary);
    border-radius: 999px;                     /* kapsulės forma */
    font-weight: 600;                         /* paryškintas tekstas */
}

/* Užvedus mygtuką – tamsesnė žalia */
.btn-primary:hover {
    background-color: var(--bg-primary-dark);
    border-color: var(--bg-primary-dark);
}

/* NUORODŲ KORTELĖS  -------------------------------------------------- */

.link-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* kad viršuje kampai būtų gražiai užapvalinti */
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.14);
}

/* Paveikslėlio blokas – be fiksuoto aukščio, plotis = kortelės plotis */
.link-card-img-wrapper {
    width: 100%;
    overflow: hidden;
}


/* Pats <img> prisitaiko prie kortelės pločio, aukštis automatinis */
.link-card-img {
    display: block;
    width: 100%;     /* VISADA tiek, kiek kortelė */
    height: auto;    /* aukštį paskaičiuoja pagal proporciją */
    border-radius: 22px 22px 0 0;  /* kad sutaptų su kortelės kampais */
    object-fit: contain;      /* gali palikti arba išvis ištrinti */
}

/* Jei nėra nuotraukos – paprastas placeholderis */
.link-card-img-placeholder {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    background: #e5f3ec;
    color: #0C764A;
}

/* Tekstas kortelės viduje */
.link-card-body {
    padding: 1rem 1.25rem 0.5rem;
}

.link-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;        /* pavadinimas be background, per vidurį */
    margin-bottom: 0.35rem;
    color: #111827;
}

.link-card-text {
    font-size: 0.92rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

/* Apačia su „Atidaryti“ – mažesnė ir centre */
.link-card-footer {
    padding: 0.6rem 1rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0C764A;
}


/* =================== RESPONSIVE NUSTATYMAI (HERO/SEKCIONS) =================== */

@media (max-width: 991.98px) {
    /* Planšetėms ir mažesniems ekranams – hero tekstas centruojamas */
    .hero {
        text-align: center;
    }

    /* Hero kortelė mažesniuose ekranuose numetama žemiau (ne absoliučiai) */
    .hero-card {
        margin-top: 32px;
    }
}

@media (max-width: 575.98px) {
    /* Mažuose telefonuose pridedam daugiau viršutinio padding hero sekcijai,
       kad logotipas/headeris neuždengtų viršutinės dalies */
    .hero {
        padding-top: 86px;
    }
}