/*
 * DEPO Album pages (OpenSpec merge-album-into-frontphp). site.css / site-header.css already carry
 * the album design (they were copied from album/public/css/album.css); this file has only what the
 * album pages add or do differently. Loaded on album pages only (`styles` => pages/album).
 */

/* Album sections under the site header (Home, Albums, Photos, My albums). */
.album-subnav { border-bottom: 1px solid var(--line); background: rgb(24 23 26 / 0.35); }
.album-subnav__inner { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.album-subnav__inner::-webkit-scrollbar { display: none; }
.album-subnav__link {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14px;
    transition: color var(--trans), background var(--trans);
}
.album-subnav__link .icon { width: 16px; height: 16px; }
.album-subnav__link:hover { color: var(--text); background: rgb(255 255 255 / 0.05); }
.album-subnav__link.is-active { color: var(--bg); background: var(--yellow); }
/* The row is the first thing inside <main> (the album app had it between header and main):
   cancel main's top padding above it and keep it below, as before. Hero pages have no padding. */
.main > .album-subnav:first-child { margin-top: -24px; margin-bottom: 24px; }
.has-hero .main > .album-subnav:first-child { margin-top: 0; margin-bottom: 0; }

/* The album keeps its yellow primary buttons (the site's are green). */
.btn--primary { background: var(--yellow); color: #18171a; box-shadow: 0 2px 3px rgb(0 0 0 / 0.1), 0 8px 3px rgb(0 0 0 / 0.1); }
.btn--primary:hover { background: #ffc533; }

/* ── album pages: list, cards, owner tools, sharing (moved from site.css) ── */
.albums-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); gap: 20px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; }
.albums-row > * { scroll-snap-align: start; }
.albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.album-card { position: relative; display: block; padding-top: 10px; }
.album-card__stack,
.album-card__stack::before {
    position: absolute; left: 8%; right: 8%; top: 0; height: 30px; border-radius: var(--radius); background: var(--surface-3);
    transition: transform var(--trans);
}
.album-card__stack::before { content: ""; left: 6%; right: 6%; top: 5px; background: #45444b; }
.album-card__cover { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.album-card:hover .album-card__cover img { transform: scale(1.05); }
.album-card:hover .album-card__stack { transform: translateY(-4px); }
.album-card__badge {
    position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgb(0 0 0 / 0.55); backdrop-filter: blur(6px);
}
.album-card__badge.is-private { color: var(--yellow); }
.album-card__body { display: block; padding: 12px 2px 0; }
.album-card__title { display: block; font: 600 16px/1.3 var(--font-head); }
.album-card__meta { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.album-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 28px; margin-bottom: 24px; }
.album-head__info { max-width: 720px; }
.album-head__desc { color: var(--muted); margin: 4px 0 16px; }
.album-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card__select { position: absolute; top: 10px; left: 10px; z-index: 3; cursor: pointer; }
.card__select input { position: absolute; opacity: 0; }
.card__select span {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #fff; background: rgb(0 0 0 / 0.35); color: transparent; transition: background var(--trans), color var(--trans);
}
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.badge--shared { background: rgb(83 245 126 / 0.12); color: rgb(var(--spot)); }
.owner-tools { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.owner-tools__row { display: flex; gap: 8px; flex-wrap: wrap; }
.owner-tools__row form { margin: 0; }
.share-result { padding: 20px; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; border-color: var(--yellow); }
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .segmented--3 { grid-template-columns: 1fr; } }
.share-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.share-list__item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.share-list__item form { margin: 0 0 0 auto; }
.share-list__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-list__meta { font-size: 13px; }
.field--wide { grid-column: 1 / -1; }