/* Галерея с одним акцентным фото */
.photo-grid-featured {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.story-mosaic {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

.photo-featured-item {
    width: min(100%, 760px);
    min-width: 0;
    position: relative;
    padding: clamp(8px, 1.8vw, 12px);
    background: #fff;
    border: 1px solid rgba(33, 75, 58, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 36px rgba(28, 51, 41, 0.16);
    transform: rotate(-1.2deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photo-featured-item:hover {
    transform: rotate(0deg) scale(1.01);
    box-shadow: 0 24px 44px rgba(28, 51, 41, 0.2);
}

.photo-featured-item img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    will-change: transform;
}

.story-main-photo {
    min-height: 540px;
}

.story-side-photo {
    min-height: 540px;
    transform: rotate(1deg);
}

.story-side-photo:hover {
    transform: rotate(0deg) scale(1.01);
}

.photo-featured-item::before,
.photo-featured-item::after {
    content: '';
    position: absolute;
    width: clamp(20px, 6vw, 42px);
    height: clamp(20px, 6vw, 42px);
    border: 2px solid var(--gold);
    opacity: 0.55;
    transition: 0.35s ease;
}

.photo-featured-item::before {
    top: -9px;
    left: -9px;
    border-right: none;
    border-bottom: none;
}

.photo-featured-item::after {
    right: -9px;
    bottom: -9px;
    border-left: none;
    border-top: none;
}

.photo-featured-item:hover::before {
    top: 12px;
    left: 12px;
}

.photo-featured-item:hover::after {
    right: 12px;
    bottom: 12px;
}

@media (max-width: 768px) {
    .story-mosaic {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .story-main-photo,
    .story-side-photo {
        min-height: 420px;
    }

    .photo-featured-item {
        transform: none;
        border-radius: 16px;
    }

    .photo-featured-item:hover {
        transform: none;
    }

    .photo-featured-item::before {
        top: 8px;
        left: 8px;
    }

    .photo-featured-item::after {
        right: 8px;
        bottom: 8px;
    }
}