/* =========================================================
   PHOTOS PAGE
   ========================================================= */

.photos-page {
    background: #f7f4fb;
}

/* HEADER */

.gallery-header {
    padding: 40px 60px 20px;
}

.gallery-header h1 {
    margin-bottom: 8px;
    font-size: 42px;
    color: #4b3b63;
}

.gallery-header p {
    color: #7a6b91;
}

/* BACK BUTTON */

.back-button {
    display: inline-block;
    margin-bottom: 25px;
    text-decoration: none;
    color: #7c5fb2;
    font-weight: 500;
}

.back-button:hover {
    opacity: 0.7;
}

/* =========================================================
   GOOGLE PHOTOS STYLE GRID
   ========================================================= */

.photo-grid {
    column-count: 5;
    column-gap: 12px;
    width: 100%;
    padding: 0 60px 60px;
}

.photo-card {
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: 18px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 10px rgba(130, 90, 180, 0.08);
    transition: all 0.25s ease;
}

.photo-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(130, 90, 180, 0.16);
}

.photo-card img {
    width: 100%;
    display: block;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .photo-grid { column-count: 3; }
}

@media (max-width: 700px) {
    .photo-grid { column-count: 2; }
}

@media (max-width: 500px) {
    .photo-grid { column-count: 1; }
    .gallery-header { padding: 30px 20px; }
}