/* ============================= */
/* PHOTO VIEWER */
/* ============================= */

.photo-main-image-box{

position:relative;

overflow:hidden;

border-radius:22px;

}


/* ============================= */
/* GRADIENT EDGES */
/* ============================= */

.photo-main-image-box::before,
.photo-main-image-box::after{

content:"";

position:absolute;

top:0;

width:140px;

height:100%;

opacity:0;

transition:opacity .35s ease;

pointer-events:none;

z-index:2;

}

.photo-main-image-box::before{

left:0;

background:linear-gradient(
to right,
rgba(0,0,0,0.65),
rgba(0,0,0,0.25),
transparent
);

}

.photo-main-image-box::after{

right:0;

background:linear-gradient(
to left,
rgba(0,0,0,0.65),
rgba(0,0,0,0.25),
transparent
);

}


/* εμφανίζονται στο hover */

.photo-main-image-box:hover::before,
.photo-main-image-box:hover::after{

opacity:1;

}


/* ============================= */
/* IMAGE */
/* ============================= */

.photo-main-image{

width:100%;

border-radius:22px;

object-fit:cover;

display:block;

max-height:720px;

transition:transform .45s ease;

}

.photo-main-image-box:hover .photo-main-image{

transform:scale(1.03);

}


/* ============================= */
/* ARROWS */
/* ============================= */

.photo-arrow{

position:absolute;

top:50%;

transform:translateY(-50%) scale(.92);

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:34px;

font-weight:700;

color:#ffffff;

background:transparent;

border-radius:50%;

opacity:0;

pointer-events:none;

z-index:3;

transition:

opacity .25s ease,
transform .25s ease,
color .25s ease,
text-shadow .25s ease;

}


/* εμφανίζονται στο hover */

.photo-main-image-box:hover .photo-arrow{

opacity:1;

pointer-events:auto;

transform:translateY(-50%) scale(1);

}


/* hover effect */

.photo-arrow:hover{

color:#00f7ff;

transform:translateY(-50%) scale(1.08);

text-shadow:

0 0 10px rgba(0,247,255,0.7),
0 0 24px rgba(0,247,255,0.5);

}


/* θέσεις */

.photo-arrow-left{

left:18px;

}

.photo-arrow-right{

right:18px;

}


/* disabled */

.photo-arrow-disabled{

opacity:0;

pointer-events:none;

}

.photo-main-image-box:hover .photo-arrow-disabled{

opacity:.28;

pointer-events:none;

}


/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width:768px){

.photo-main-image-box::before,
.photo-main-image-box::after{

opacity:.55;

}

.photo-arrow{

opacity:1;

pointer-events:auto;

transform:translateY(-50%) scale(1);

width:46px;

height:46px;

font-size:24px;

}

.photo-arrow-left{

left:10px;

}

.photo-arrow-right{

right:10px;

}

.photo-arrow-disabled{

opacity:.35;

pointer-events:none;

}

}


/* =====================================
   PHOTO PAGE - MOBILE STACK FIX
===================================== */

@media (max-width: 768px){
    .photo-page-wrap{
        padding: 0 14px;
        margin: 20px auto 40px;
    }

    .photo-view-card,
    .photo-comments-section{
        padding: 18px;
        border-radius: 20px;
    }

    .photo-view-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .photo-main-image-box{
        width: 100%;
        order: 1;
    }

    .photo-side-content{
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .photo-main-image{
        width: 100%;
        max-height: none;
        border-radius: 18px;
        object-fit: cover;
    }

    .photo-meta-top{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .photo-author-label{
        font-size: 12px;
        letter-spacing: 1px;
    }

    .photo-author-name{
        font-size: 34px;
        line-height: 1.1;
        word-break: break-word;
    }

    .photo-owner-actions{
        width: 100%;
    }

    .photo-owner-actions .outline-btn{
        width: 100%;
        justify-content: center;
    }

    .photo-status-row{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .photo-date{
        font-size: 15px;
        line-height: 1.5;
    }

    .photo-description-box h3{
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .photo-description-text{
        font-size: 18px;
        line-height: 1.85;
        word-break: break-word;
    }

    .photo-like-section{
        padding: 18px;
        border-radius: 18px;
    }

    .likes-counter{
        display: inline-block;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
    }

    .photo-like-section .muted{
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 12px;
    }

    .photo-like-section .outline-btn,
    .photo-like-section .neon-btn{
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        font-size: 17px;
        justify-content: center;
    }

    .comments-header-row{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 18px;
    }

    .comments-header-row h2{
        font-size: 32px;
        line-height: 1.15;
    }

    .comments-count{
        font-size: 16px;
    }

    .comment-form{
        gap: 12px;
    }

    .comment-form textarea{
        min-height: 120px;
        font-size: 17px;
        line-height: 1.7;
        padding: 14px;
    }

    .comment-form .neon-btn{
        width: 100%;
        min-height: 48px;
        font-size: 17px;
        justify-content: center;
    }

    .comments-list{
        gap: 12px;
    }

    .comment-card{
        padding: 16px;
        border-radius: 16px;
    }

    .comment-top{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 15px;
        line-height: 1.5;
    }

    .comment-card p{
        font-size: 17px;
        line-height: 1.75;
        word-break: break-word;
    }

    .empty-comments{
        font-size: 16px;
        line-height: 1.7;
    }
}


@media (max-width: 768px){
    .photo-arrow{
        width: 48px;
        height: 48px;
        font-size: 26px;
        opacity: 1;
        pointer-events: auto;
    }

    .photo-arrow-left{
        left: 10px;
    }

    .photo-arrow-right{
        right: 10px;
    }
}