/* ============================================================
   METIS Design — portofolio album interior (halaman /design)
   ============================================================ */
.design-hero{
  padding:128px 0 42px;
  background:linear-gradient(180deg,#f3e9da 0%,var(--cream) 100%);
  border-bottom:1px solid var(--sand);
}
.design-hero .eyebrow{display:inline-block;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--wood);font-weight:600;margin-bottom:12px}
.design-hero h1{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;color:var(--wood-dark);margin:0 0 14px}
.design-hero p{max-width:660px;color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0}
.design-hero .design-hero-cta{margin-top:24px}
.design-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding-bottom:8px}
.design-card{display:block;background:var(--white);border:1px solid var(--sand);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 14px rgba(74,47,29,.05);transition:transform .25s ease,box-shadow .25s ease}
.design-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(74,47,29,.14)}
.design-cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eae0d0}
.design-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.design-card:hover .design-cover img{transform:scale(1.045)}
.design-cover .num{position:absolute;right:12px;bottom:12px;background:rgba(34,26,18,.74);color:#fff;font-size:.72rem;letter-spacing:.05em;padding:5px 11px;border-radius:999px}
.design-card-body{padding:17px 20px 20px}
.design-card-body .meta{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--wood-light);font-weight:600;margin-bottom:7px}
.design-card-body h2{font-family:var(--font-serif);font-size:1.3rem;margin:0 0 5px;color:var(--wood-dark);line-height:1.3}
.design-card-body p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.design-card-more{margin-top:12px;font-size:.8rem;font-weight:600;color:var(--wood)}
.design-card-more span{transition:transform .2s ease;display:inline-block}
.design-card:hover .design-card-more span{transform:translateX(4px)}
/* --- detail album --- */
.design-back{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:var(--wood);text-decoration:none;margin-bottom:18px}
.design-back:hover{color:var(--wood-dark)}
.design-album-head{padding:112px 0 8px}
.design-album-head h2{font-family:var(--font-serif);font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.15;color:var(--wood-dark);margin:6px 0 0}
.design-album-meta{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.design-chip{font-size:.75rem;padding:5px 13px;border-radius:999px;border:1px solid var(--sand);background:var(--white);color:var(--wood)}
.design-album-desc{max-width:720px;color:var(--muted);line-height:1.8;margin:18px 0 0}
.design-photos{columns:3;column-gap:18px;margin-top:26px}
.design-photo{break-inside:avoid;margin:0 0 18px;border-radius:14px;overflow:hidden;background:#eae0d0;cursor:zoom-in;position:relative}
.design-photo img{width:100%;display:block;height:auto;transition:transform .4s ease}
.design-photo:hover img{transform:scale(1.02)}
.design-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-size:.78rem;color:#fff;background:linear-gradient(180deg,transparent,rgba(20,14,9,.72));opacity:0;transition:opacity .25s ease}
.design-photo:hover figcaption{opacity:1}
/* --- lightbox --- */
.design-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(16,11,7,.95);display:none;align-items:center;justify-content:center;padding:46px 18px}
.design-lightbox.open{display:flex}
.design-lightbox img{max-width:min(96vw,1400px);max-height:84vh;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.design-lightbox .lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#e9dfd2;font-size:.86rem;padding:0 20px}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:18px;right:18px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
/* --- cta + status --- */
.design-cta{margin:54px 0 6px;padding:32px 30px;border-radius:20px;background:var(--wood-dark);color:#fff;display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.design-cta h3{font-family:var(--font-serif);font-size:1.5rem;margin:0 0 6px;color:#fff}
.design-cta p{margin:0;color:#d9c8b2;font-size:.92rem;line-height:1.6;max-width:560px}
.design-status{padding:40px 0;color:var(--muted);text-align:center}
.design-skel{height:320px;border-radius:18px;background:linear-gradient(100deg,#efe6d8 30%,#f7f0e5 50%,#efe6d8 70%);background-size:200% 100%;animation:design-shimmer 1.2s infinite}
@keyframes design-shimmer{to{background-position:-200% 0}}
@media(max-width:900px){.design-photos{columns:2}}
@media(max-width:600px){
  .design-hero{padding-top:100px}
  .design-albums{grid-template-columns:1fr;gap:18px}
  .design-photos{columns:1}
  .design-photo figcaption{opacity:1}
  .design-cta{padding:26px 22px}
  .lb-prev{left:6px}.lb-next{right:6px}
}