/* =========================================================
   ARAM MIZURI ARCHITECTURE — saved.css
   The saved list (/saved), on top of project.css (tokens, top bar,
   footer, buttons and project cards) and engage.css (the hearts).
   ========================================================= */

.sv-page {
    max-width: var(--wide); margin: 0 auto;
    padding: clamp(110px, 18vh, 170px) var(--gutter) clamp(72px, 12vh, 130px);
}

/* Whose list it is was decided in the page's head (html.sv-own): the
   visitor's own shortlist, or one someone shared with them. */
.sv-title--own, .sv-intro--own, .sv-own .sv-title--shared, .sv-own .sv-intro--shared, .sv-own .sv-keep { display: none; }
.sv-own .sv-title--own, .sv-own .sv-intro--own { display: block; }

.sv-title {
    font-size: clamp(36px, 5.6vw, 74px); font-weight: 200; color: #fff;
    letter-spacing: -.025em; line-height: 1.06;
}
[dir="rtl"] .sv-title { letter-spacing: 0; line-height: 1.3; font-weight: 400; }
.sv-intro { margin-top: 20px; max-width: 58ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; font-weight: 300; color: rgba(255,255,255,.7); }

.sv-grid {
    list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px; margin-top: clamp(40px, 7vh, 72px);
}
.sv-card { position: relative; transition: opacity .35s; }
/* taken off their own list: still there, to put back */
.sv-card.is-off { opacity: .38; }
.sv-heart {
    position: absolute; top: 12px; inset-inline-end: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(9,9,9,.55); color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: border-color .25s, color .25s;
}
.sv-heart:hover { border-color: var(--gold); color: var(--gold); }
.sv-heart.is-saved { border-color: rgba(245,197,24,.5); }
.sv-heart .icon-heart { width: 17px; height: 17px; }

.sv-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: clamp(44px, 8vh, 80px); padding-top: 32px; border-top: 1px solid var(--line);
}
.sv-actions .pp-btn.is-disabled { opacity: .4; pointer-events: none; }
.sv-actions .pp-act { height: 52px; padding: 0 22px; }
.sv-keep:disabled { opacity: .6; cursor: default; border-color: rgba(245,197,24,.4); color: var(--gold); }

.sv-empty { margin-top: 36px; max-width: 52ch; }
.sv-empty p { font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--muted); margin-bottom: 30px; }

@media (max-width: 900px) {
    .sv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .sv-grid { grid-template-columns: 1fr; }
    .sv-actions > * { flex: 1 1 100%; justify-content: center; }
}