/* Google Photos Gallery – Frontend */
:root {
    --gpg-accent: #4285f4;
    --gpg-radius: 12px;
    --gpg-shadow: 0 4px 20px rgba(0,0,0,.08);
    --gpg-shadow-h: 0 8px 32px rgba(0,0,0,.15);
}
.gpg-root * { box-sizing: border-box; }

/* Albums grid */
.gpg-albums-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 4px 0;
}
@media (max-width: 860px) { .gpg-albums-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .gpg-albums-grid { grid-template-columns: 1fr; } }

.gpg-album-card {
    border-radius: var(--gpg-radius);
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: var(--gpg-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .2s;
}
.gpg-album-card:hover { transform: translateY(-4px); box-shadow: var(--gpg-shadow-h); border-color: var(--gpg-accent); }

.gpg-album-thumb { aspect-ratio: 4/3; overflow: hidden; background: #e8edf5; position: relative; }
.gpg-album-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gpg-album-card:hover .gpg-album-thumb img { transform: scale(1.06); }
.gpg-album-thumb-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.4; }
.gpg-album-count { position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;backdrop-filter:blur(4px); }

.gpg-album-info { padding: 14px 16px 16px; }
.gpg-album-name { font-size:15px;font-weight:700;color:#1a202c;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.gpg-album-date { font-size:13px;color:#718096; }

/* Single album */
.gpg-view-single { animation: gpg-fadein .25s ease; }
@keyframes gpg-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.gpg-back-btn { background:none;border:1px solid #e2e8f0;color:#718096;font-size:14px;padding:7px 16px;border-radius:8px;cursor:pointer;margin-bottom:18px;transition:all .18s; }
.gpg-back-btn:hover { background:#f8f9fc;color:#1a202c;border-color:var(--gpg-accent); }

.gpg-album-header { display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap; }
.gpg-single-title { font-size:24px;font-weight:800;color:#1a202c;margin:0; }
.gpg-single-meta  { font-size:14px;color:#718096; }

/* Photos grid */
.gpg-photos-grid { display:grid;gap:5px; }
.gpg-photos-grid[data-cols="2"] { grid-template-columns: repeat(2,1fr); }
.gpg-photos-grid[data-cols="3"] { grid-template-columns: repeat(3,1fr); }
.gpg-photos-grid[data-cols="4"] { grid-template-columns: repeat(4,1fr); }
.gpg-photos-grid[data-cols="5"] { grid-template-columns: repeat(5,1fr); }
@media (max-width: 700px) {
    .gpg-photos-grid[data-cols="4"],
    .gpg-photos-grid[data-cols="5"] { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
    .gpg-photos-grid { grid-template-columns: repeat(2,1fr) !important; }
}

.gpg-photo-item { aspect-ratio:1;overflow:hidden;cursor:pointer;position:relative;background:#e8edf5;border-radius:3px; }
.gpg-photo-item img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,filter .2s; }
.gpg-photo-item:hover img { transform:scale(1.05);filter:brightness(.85); }
.gpg-photo-hover { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:22px; }
.gpg-photo-item:hover .gpg-photo-hover { opacity:1; }

/* Loading */
.gpg-loading { display:flex;align-items:center;gap:12px;padding:48px 20px;color:#718096;font-size:15px; }
.gpg-spinner { width:28px;height:28px;border:3px solid #e2e8f0;border-top-color:var(--gpg-accent);border-radius:50%;animation:gpg-spin .7s linear infinite;flex-shrink:0; }
@keyframes gpg-spin { to{transform:rotate(360deg)} }

/* Lightbox */
.gpg-lightbox { position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;animation:gpg-fadein .18s ease; }
.gpg-lb-overlay { position:absolute;inset:0;background:rgba(0,0,0,.92);cursor:pointer; }
.gpg-lb-content { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:92vw; }
.gpg-lb-media { display:flex;align-items:center;justify-content:center;min-width:160px;min-height:120px; }
.gpg-lb-media img,.gpg-lb-media video { max-width:86vw;max-height:82vh;border-radius:8px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);display:block; }
.gpg-lb-close,.gpg-lb-prev,.gpg-lb-next { position:fixed;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .18s;backdrop-filter:blur(6px); }
.gpg-lb-close:hover,.gpg-lb-prev:hover,.gpg-lb-next:hover { background:rgba(255,255,255,.25); }
.gpg-lb-close { top:18px;right:18px; }
.gpg-lb-prev  { left:16px;top:50%;transform:translateY(-50%); }
.gpg-lb-next  { right:16px;top:50%;transform:translateY(-50%); }
.gpg-lb-info  { display:flex;gap:14px;align-items:center;margin-top:10px; }
.gpg-lb-caption { color:rgba(255,255,255,.85);font-size:13px; }
.gpg-lb-date    { color:rgba(255,255,255,.5);font-size:12px; }

.gpg-empty { color:#718096;font-size:14px;padding:20px 0; }