/* Visa „Apie gimnaziją“ sekcija – pilkšvas fonas, kad išsiskirtų nuo kitų dalių */
.about-section {
    background: #f3f4f6;  /* šviesiai pilkas fonas */
}

/* =================== KAIRĖ PUSĖ – DIDELĖ KORTA SU ISTORIJA =================== */

/* Pagrindinė balta korta kairėje (istorija + bullet'ai) */
.about-main-card {
    background: #ffffff;                             /* balta fono spalva */
    border-radius: 18px;                             /* suapvalinti kampai */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);  /* ryškesnis šešėlis – korta „pakelta“ */
    padding: 2rem 2.25rem;                           /* vidiniai tarpai – patogus skaitomumas */
}

/* Paprasti paragrafai kortos viduje – tarpeliai tarp eilučių/paragraphų */
.about-main-card p {
    margin-bottom: 0.75rem;   /* tarpas apačioje, kad tekstas nesuliptų */
}

/* =================== KAIRĖ PUSĖ – BULLET'AI SU ICON'OMIS =================== */

/* Vienas bullet'o elementas (ikonėlė + tekstas) */
.about-bullets li {
    display: flex;             /* ikonėlė ir tekstas eina vienoje eilėje */
    align-items: flex-start;   /* ikonėlė ir tekstas lygiuojami nuo viršaus */
    gap: 0.75rem;              /* tarpelis tarp ikonėlės ir teksto bloko */
    margin-top: 0.75rem;       /* tarpas tarp atskirų bullet'ų */
}

/* Ikonėlės „burbuliukas“ kairėje bullet'o pusėje */
.about-bullet-icon {
    flex-shrink: 0;            /* neleisti ikonėlei susitraukti, kai trūksta vietos */
    width: 32px;
    height: 32px;
    border-radius: 999px;      /* pilnai apvalus burbuliukas */
    background: #e0f2f1;       /* švelniai žalsvas fonas */
    display: flex;
    align-items: center;
    justify-content: center;   /* ikonėlė centruojama burbuliuke */
    font-size: 1.1rem;         /* ikonėlės dydis */
    color: #0c764a;            /* tavo gimnazijos žalia spalva */
}

/* =================== DEŠINĖ PUSĖ – GRIDAS IŠ 4 KORTELIŲ =================== */

/* Konteineris, kuris korteles išdėlioja grid'e (2x2) */
.about-features-grid {
    display: grid;                                        /* CSS grid išdėstymas */
    grid-template-columns: repeat(2, minmax(0, 1fr));     /* dvi kolonos po lygiai */
    gap: 1.25rem;                                         /* tarpai tarp kortelių */
}

/* Kiekviena atskira kortelė dešinėje (pvz. „Neformalus ugdymas“, „Emocinė gerovė“) */
.about-feature-card {
    background: #ffffff;                                  /* balta fono spalva */
    border-radius: 18px;                                  /* suapvalinti kampai */
    padding: 1.5rem;                                      /* vidiniai tarpai */
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);       /* švelnesnis šešėlis nei pagrindinės kortos */
    transition: transform 0.15s ease-out,                 /* švelni animacija pakylėjimui */
                box-shadow 0.15s ease-out;                /* ir šešėlio pokyčiui */
}

/* Kortelės antraštė (pavadinimas) */
.about-feature-card h3 {
    font-size: 1rem;          /* vidutinio dydžio šriftas */
    font-weight: 600;         /* paryškintas */
    margin-bottom: 0.5rem;    /* tarpas po pavadinimu */
}

/* Kortelės tekstas */
.about-feature-card p {
    font-size: 0.95rem;       /* šiek tiek mažesnis nei pavadinimas */
    margin-bottom: 0;         /* jokio papildomo tarpo apačioje */
}

/* Ikona kortelės viršuje (pvz. skrybėlė, medelis ir pan.) */
.about-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;      /* apvalus burbuliukas */
    background: #ecfdf3;       /* šviesiai žalsvas fonas */
    display: flex;
    align-items: center;
    justify-content: center;   /* ikonėlė centruojama viduje */
    margin-bottom: 0.75rem;    /* tarpas tarp ikonos ir pavadinimo */
    color: #15803d;            /* sodresnė žalia spalva pačiai ikonai */
    font-size: 1.2rem;         /* didesnė ikona */
}

/* Hover efektas – kortelė švelniai pakyla ir šešėlis sustiprėja */
.about-feature-card:hover {
    transform: translateY(-4px);                           /* pajudinam kortelę 4px aukštyn */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);        /* ryškesnis šešėlis */
}

/* =================== RESPONSIVE – MAŽESNIEMS EKRANAMS =================== */

@media (max-width: 992px) {
    /* Kai ekranas siauresnis (planšetės, telefonai) – vietoje 2 kolonų darom 1 */
    .about-features-grid {
        grid-template-columns: 1fr;   /* visos kortelės viena po kitos */
    }

    /* Pagrindinė kairės pusės korta atsiranda su tarpu apačioje,
       kad nuo dešinės kortų grid'o atskirtume */
    .about-main-card {
        margin-bottom: 1.5rem;
    }
}