/* --- Vienos naujienos puslapis (news_detail.html) --- */

/* Straipsnio (article) bendras viršutinis tarpas */
.news-detail-article {
    margin-top: 1rem;
}

/* Blokas, kuriame yra pagrindinis tekstas ir nuotrauka */
.news-main-content {
    position: relative;
    margin-bottom: 1.5rem;  /* tarpas apačioje nuo kitų elementų */
}

/* Kad float'intas paveikslėlis (nuotrauka kairėje) nesugriautų konteinerio aukščio */
.news-main-content::after {
    content: "";
    display: block;
    clear: both;  /* išvalom float'us */
}

/* Pagrindinė naujienos kortelė (balta dėžutė vidury ekrano) */
.news-detail-card {
    max-width: 960px;  /* ribojam kortelės plotį */
    margin: 0 auto;    /* centruojam horizontaliai */
    background: #ffffff;   /* balta fono spalva */
    border-radius: 18px;   /* suapvalinti kampai */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); /* stipresnis šešėlis – „kortelė pakelta“ */
    padding: 1.75rem 2rem; /* vidiniai tarpai (vertikalūs, horizontalūs) */
    display: grid;         /* naudojam CSS grid išdėstymui */
    grid-template-columns: 220px 1fr; /* kairė kolona 220px (nuotrauka), dešinė – visa likusi vieta */
    gap: 1.5rem;           /* tarpas tarp kairės ir dešinės kolonų */
    align-items: flex-start; /* kolonų turinį lygiuojame nuo viršaus */
}

/* Kairė kortelės pusė – nuotraukai */
.news-detail-left {
    display: flex;
    justify-content: center; /* centruojame nuotrauką horizontaliai kairėje kolonoje */
}

/* Dešinėje pusėje esantis paragrafas: malonesnis tarpas tarp eilučių */
.news-detail-right p {
    line-height: 1.6;
}

/* Pagrindinė nuotrauka:
   - ~200 px pločio
   - „float left“, kad tekstas ją apeitų
   - su šešėliu */
.news-main-photo {
    width: 200px;              /* fiksuotas nuotraukos plotis */
    max-width: 100%;           /* jei ekranas mažas, neviršyti konteinerio */
    float: left;               /* nuotrauka „prilipdoma“ kairėje, tekstas apeina iš dešinės */
    margin: 0 1rem 0.5rem 0;   /* dešinėje ir apačioje tarpeliai, kad tekstas „neliptų“ */
    border-radius: 14px;       /* suapvalinti nuotraukos kampai */
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25); /* ryškesnis šešėlis */
}

/* Visa naujienos detalės sekcija:
   - stumiama žemyn nuo header'io
   - pilkai melsvas fonas aplink kortelę */
.news-detail-page {
    margin-top: 90px;   /* atstumas nuo fiksuoto header'io (jei mažai – galima didinti iki 110–120px) */
    background: #f3f4f6;
}

/* Meta eilutė (pvz. data, autorius) – jei naudoji .news-detail-header .news-meta */
.news-detail-header .news-meta {
    font-size: 0.85rem;
    color: #6b7280; /* pilkai, kad nebūtų per ryšku */
}

/* Kortelė, kurioje – nuotraukų galerija (thumbnail'ai) */
.news-gallery-card {
    max-width: 960px;  /* toks pats plotis kaip pagrindinės kortelės */
    margin: 0 auto;    /* centruojam vidury */
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    padding: 1.25rem 2rem; /* vidiniai tarpai */
}

/* Miniatiūros (thumbnail) paveikslėliai galerijoje */
.thumb-img {
    width: 110px;
    height: 110px;
    object-fit: cover;      /* užpildo kvadratą neiškraipant proporcijų */
    border-radius: 10px;    /* apvalinti kampai */
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18); /* švelnus šešėlis po kiekviena miniatiūra */
    cursor: pointer;        /* „rankutės“ kursorius – matosi, kad paspaudžiama */
}

/* Mygtukas aplink miniatiūrą:
   - be fono
   - be rėmelio
   kad atrodytų kaip paprastas paveikslėlis */
.thumb-btn {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Fokusavus (klaviatūra ar mouse) – pridedamas outline, kad būtų prieinamumas */
.thumb-btn:focus {
    outline: 2px solid #198754; /* žalias rėmelis */
    outline-offset: 2px;        /* tarpelis tarp rėmelio ir paveiksliuko */
}

/* Responsyvus vaizdas – kai ekranas < 768px (telefonai/mažos planšetės) */
@media (max-width: 768px) {
    /* Kortelę iš dviejų kolonų suverčiam į vieną (image + tekstas vienas po kitu) */
    .news-detail-card {
        grid-template-columns: 1fr;    /* viena kolona */
        padding: 1.25rem 1.5rem;      /* šiek tiek mažesni vidiniai tarpai */
    }

    /* Kairėje nuotrauką pradedam nuo kairės, o ne centruojam */
    .news-detail-left {
        justify-content: flex-start;
    }
}

/* =================== LIGHTBOX langas nuotraukų peržiūrai =================== */

.gallery-lightbox {
    position: fixed;      /* fiksuota pozicija virš viso puslapio */
    inset: 0;             /* top: 0, right: 0, bottom: 0, left: 0 – apima visą ekraną */
    display: none;        /* pradžioje nerodomas */
    align-items: center;  /* vertikalus centruojimas (kai display:flex) */
    justify-content: center; /* horizontalus centruojimas */
    z-index: 1050;        /* virš daugumos kitų elementų (modal lygio) */
}

/* Kai pridedama klasė .is-open – šis langas pasirodo kaip flex konteineris */
.gallery-lightbox.is-open {
    display: flex;
}

/* Tamsus fonas už nuotraukos (uždengia puslapį) */
.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75); /* tamsus permatomas sluoksnis */
}

/* Vidinis lightbox blokas, kuriame yra nuotrauka ir rodyklės */
.gallery-lightbox-inner {
    position: relative;
    max-width: 90%;   /* maks. plotis 90% ekrano */
    max-height: 85%;  /* maks. aukštis 85% ekrano */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pagrindinis rodomas paveikslėlis lightbox'e */
.gallery-lightbox-img {
    max-width: 100%;          /* neperžengia inner pločio */
    max-height: 80vh;         /* neperžengia 80% viewport aukščio */
    border-radius: 12px;      /* užapvalinti kampai */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.6); /* stiprus šešėlis – iškeltas efektas */
    position: relative;
    z-index: 1;               /* virš backdrop ir po mygtukų */
}

/* „X“ mygtukas, uždarantis lightbox */
.gallery-close {
    position: absolute;
    top: 10px;        /* atitraukiam nuo viršaus */
    right: 14px;      /* ir nuo dešinio krašto */
    z-index: 2;       /* virš nuotraukos */
    background: rgba(15, 23, 42, 0.8); /* tamsus fonas */
    color: #fff;      /* balta ikona „X“ */
    border: none;
    border-radius: 999px; /* apvalus mygtukas */
    width: 32px;
    height: 32px;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

/* Bendras stilius rodyklių mygtukams (kairė ir dešinė) */
.gallery-arrow {
    position: absolute;
    top: 50%;                        /* per vidurį vertikaliai */
    transform: translateY(-50%);     /* tiksliai centruojam pagal aukštį */
    z-index: 2;                      /* virš nuotraukos */
    background: rgba(15, 23, 42, 0.8); /* tamsus fonas */
    color: #fff;                     /* balta rodyklė */
    border: none;
    border-radius: 999px;            /* apvalus mygtukas */
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kairioji rodyklė – prie kairio lightbox krašto */
.gallery-prev {
    left: 10px;
}

/* Dešinioji rodyklė – prie dešinio krašto */
.gallery-next {
    right: 10px;
}

/* Hover efektas „X“ ir rodyklėms – šiek tiek žalesnis fonas */
.gallery-close:hover,
.gallery-arrow:hover {
    background: rgba(21, 128, 61, 0.9);
}