/* Страниците на проектите - /projects/<адрес>. */

/* ---- Страницата на проект ---- */
.project-main {
    background: var(--light-gray);
    padding: 24px 0 70px;
}

/* Заглавието стои върху свободното синьо поле в лявата част на снимката */
.project-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;     /* и без снимка хедърът е със същата височина */
    max-height: 300px;       /* като в „Летописна книга“; без width: 100% щеше да се свие */
    container-type: inline-size;   /* подзаглавието мери ширината си спрямо хедъра */
    line-height: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--primary-blue);
    box-shadow: 0 8px 26px rgba(26, 54, 93, .10);
    margin: 24px 0 28px;     /* като в „Летописна книга“ */
}

/* Височината е колкото на хедъра на „Летописна книга“ (4:1, най-много 300px).
   Снимка с друга пропорция се изрязва отгоре и отдолу, не се разтяга. */
.project-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Без корица: логото на училището вдясно, текстът остава вляво */
.project-banner .project-banner-logo {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 72%;
    object-fit: contain;
}

.project-banner-text {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 55%;
    color: #fff;
    text-shadow: 0 2px 12px rgba(10, 30, 70, .55);   /* да се чете и върху светла корица */
}

.project-banner h1 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.8rem, 6vw, 4.5rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.project-banner p {
    max-width: 40cqw;        /* да не покрива средата и дясната част на корицата */
    margin: .4em 0 0;
    font-size: clamp(.75rem, 1.7vw, 1.4rem);
    font-weight: 300;
    line-height: 1.3;
}

.project-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(26, 54, 93, .07);
}

.project-card h2 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    margin: 0 0 12px;
}

.project-empty {
    text-align: center;
    color: var(--text-light);
    padding: 60px 24px;
}

/* ---- Трите колони ---- */
.pj-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    align-items: start;
}

.pj-column {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px 22px;
    box-shadow: 0 4px 16px rgba(26, 54, 93, .07);
    min-width: 0;
}

.pj-column-head,
.pj-view-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pj-column-head h2 {
    color: var(--primary-blue);
    font-size: 1.25rem;
    margin: 0;
}

.pj-view-head h2 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin: 0;
}

.pj-column-head a,
.pj-view-head a {
    flex-shrink: 0;
    color: var(--primary-blue);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

.pj-column-head a:hover,
.pj-view-head a:hover {
    color: var(--primary-green);
}

/* Бутонът за връщане към проекта - видът е като в „Летописна книга“ */
.pj-back {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--primary-green);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.pj-back:hover {
    background: #3d9140;
    color: #fff;
    transform: translateY(-1px);
}

.pj-article-top {
    max-width: 820px;
    margin: 24px auto 14px;
}

.pj-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Новина */
.pj-news {
    display: flex;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
    color: inherit;
    text-decoration: none;
}

.pj-list .pj-news:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pj-news-img {
    flex: 0 0 110px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
}

.pj-news-img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pj-news-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pj-news-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pj-news-date {
    color: var(--text-light);
    font-size: .78rem;
}

.pj-news strong {
    color: var(--primary-blue);
    font-size: .95rem;
    line-height: 1.3;
}

.pj-news:hover strong {
    color: var(--primary-green);
}

.pj-news-text {
    color: var(--text-light);
    font-size: .85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Документ */
.pj-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #f2f6fb;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.pj-doc:hover {
    background: #e6eef8;
}

.pj-doc-type {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 9px 5px;
    border-radius: 6px;
    background: #64748b;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
}

.pj-doc-pdf { background: #e53935; }
.pj-doc-doc { background: #1e6fd9; }
.pj-doc-xls { background: #1e9e62; }
.pj-doc-ppt { background: #e8710a; }

.pj-doc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pj-doc-body strong {
    color: var(--primary-blue);
    font-size: .92rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pj-doc-body span {
    color: var(--text-light);
    font-size: .78rem;
}

.pj-doc-get {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--primary-blue);
}

/* Галерия */
.pj-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pj-photos-all {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.pj-photo {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f7;
}

.pj-photo picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pj-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.pj-photo:hover img {
    transform: scale(1.04);
}

/* Преглед на снимка на цял екран - видът е като в публичната галерия */
.pj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 100px;
    background: rgba(0, 0, 0, .95);
}

.pj-lightbox[hidden] {
    display: none;
}

.pj-lb-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;        /* черно лого върху прозрачен PNG иначе не се вижда */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.pj-lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.pj-lb-btn[hidden] {
    display: none;
}

.pj-lb-btn:hover,
.pj-lb-btn:focus-visible {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .6);
}

.pj-lb-btn svg {
    width: 26px;
    height: 26px;
}

.pj-lb-close { top: 20px; right: 24px; }
.pj-lb-prev { left: 24px; top: calc(50% - 28px); }
.pj-lb-next { right: 24px; top: calc(50% - 28px); }

.pj-lb-count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    text-align: center;
    pointer-events: none;
}

/* Страницата на новина */
.pj-article {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(26, 54, 93, .10);
}

/* Височината е ограничена, за да се вижда и текстът без скролиране.
   Снимката не се изрязва: висока снимка стои в средата с фон отстрани. */
.pj-article > img,
.pj-article > picture img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    background: #f2f6fb;
}

.pj-article-body {
    padding: 26px 30px 30px;
}

.pj-article-body h1 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    line-height: 1.25;
    margin: 6px 0 16px;
}

.pj-article-text {
    line-height: 1.7;
}

.pj-article-text p {
    margin: 0 0 14px;
}

.pj-article-text p:last-child {
    margin-bottom: 0;
}

.pj-article-text a {
    color: var(--primary-green);
}

@media (max-width: 700px) {
    .pj-lightbox { padding: 76px 0 44px; }
    .pj-lb-img { border-radius: 0; }
    .pj-lb-btn { width: 44px; height: 44px; }
    .pj-lb-btn svg { width: 22px; height: 22px; }
    .pj-lb-close { top: 16px; right: 12px; }
    .pj-lb-prev { left: 12px; top: auto; bottom: 8px; }
    .pj-lb-next { right: 12px; top: auto; bottom: 8px; }
    .pj-lb-count { bottom: 20px; }
    .project-banner { border-radius: 12px; }
    .project-banner-text { max-width: 86%; }
    .project-banner:has(.project-banner-logo) .project-banner-text { max-width: 66%; }
    /* Хедърът е нисък (90px): с подзаглавие и заглавието става по-малко */
    .project-banner-text:has(p) h1 { font-size: 1.3rem; }
    .project-banner p {
        max-width: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: .2em;
    }
    .pj-article > img,
    .pj-article > picture img { max-height: 260px; }
    .pj-article-body { padding: 20px 18px 24px; }
    .pj-article-body h1 { font-size: 1.4rem; }
    .project-card { padding: 20px 18px; }
    .project-empty { padding: 40px 18px; }
}