/* Профиль художника */
.artist-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0;
    align-items: flex-start;
}

.artist-photo {
    flex: 1 1 300px; /* Фотография занимает минимум 300px, но может расти */
}

.artist-photo img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.artist-bio {
    flex: 2 1 500px;
}

.artist-bio h2 {
    margin-top: 0;
    font-size: 2rem;
    color: #2c3e50;
}

.order-info {
    background-color: #f1f8e9; /* Легкий акцент для информации о заказе */
    padding: 15px;
    border-left: 4px solid #7cb342;
    margin-top: 20px;
}

/* Галерея Masonry */
.artist-gallery h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.masonry-grid {
    column-count: 3; /* 3 колонки на десктопе */
    column-gap: 20px;
}

.gallery-item {
    margin: 0 0 20px;
    break-inside: avoid; /* Запрещает разрыв карточки на две колонки */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02); /* Легкое увеличение при наведении */
}

.gallery-item img {
    width: 100%;
    display: block;
}

.gallery-item figcaption {
    padding: 15px;
    font-size: 0.9rem;
    color: #555;
    background: #fff;
}

/* Модальное окно (Lightbox) */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
}

#lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1002;
    transition: 0.3s;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Кнопки навигации (вперед/назад) */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.3);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Адаптивность для телефонов и планшетов */
@media (max-width: 900px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
    .artist-profile {
        flex-direction: column;
    }
}
/* Specific styles for the writer page (amzorov) */
/* Increase container width for better reading experience */
.container {
    max-width: 1400px; /* Increased from default 1200px */
}

.literary-works {
    margin-top: 40px;
}

/* Desktop: Split layout (Master-Detail) */
@media (min-width: 992px) {
    .literary-works {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
    }

    .works-sidebar {
        box-sizing: border-box;
        background: #f9f9f9;
        padding: 15px; 
        border-radius: 8px;
        border: 1px solid #eee;
        flex: 0 0 280px; /* Keep sidebar strictly at 280px width */
        max-height: 90vh; 
        overflow-y: auto;
    }

    #data_frame {
        box-sizing: border-box;
        margin-top: 0 !important; 
        height: 85vh; 
        min-height: 1000px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: -5px 0 15px -10px rgba(0,0,0,0.05); 
        flex: 1; /* Take up all the remaining horizontal space */
        margin-left: 25px; /* Spacing between sidebar and iframe */
        width: auto;
    }
}

.works-category {
    margin-bottom: 30px;
}

.works-category h3 {
    font-size: 1.3rem; 
    color: #2c3e50;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-family: 'PT Serif', serif;
}

/* Adjusted for sidebar usage */
.works-list {
    list-style: none;
    padding: 0;
    display: grid;
    /* On mobile/tablet, stick to grid cards. On desktop sidebar, 1 column */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 10px;
}

@media (min-width: 992px) {
    .works-list {
        grid-template-columns: 1fr; /* Single column in sidebar */
    }
}

.works-list li {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all 0.2s;
}

.works-list li:hover {
    transform: translateX(5px); /* Slide right instead of up */
    border-color: #bbdefb;
    background-color: #fafdff;
}

.works-list a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #34495e;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.works-list a:before {
    content: '\1F4D6'; /* Changed to open book */
    margin-right: 12px;
    font-size: 1.1em;
    opacity: 0.7;
}

/* Reading frame styling */
#data_frame {
    display: none;
    width: 100%;
    height: 600px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 20px;
    background: #fff;
}

@media (min-width: 992px) {
    #data_frame {
        display: block; /* Always visible on desktop */
        margin-top: 0;
    }
}

/* Placeholder styling if frame is empty/initially */
iframe[src=""] {
   background: #fafafa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="%23ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>') no-repeat center center;
}

/* Highlight active link script helper */
.works-list a.active {
    background-color: #e3f2fd;
    color: #1565c0;
    border-left: 4px solid #1565c0;
    border-radius: 4px 0 0 4px; /* Maintain rounded on right, square on left for border */
}