/* ═══════════════════════════════════════════════════════════════
   inner.css - styles for all inner/detail portfolio pages
   Extends the shared style.css with gallery, tabs, lightbox,
   process steps, and deliverable components.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── inner hero (compact) ───────────────────────── */
.inner-hero{
  padding-top:160px;padding-bottom:60px;text-align:center;
}
.inner-hero .eyebrow{opacity:0;animation:rise .8s .1s forwards}
.inner-hero h1{
  font-size:clamp(2.2rem,5.5vw,4rem);margin:22px auto 16px;max-width:18ch;
  opacity:0;animation:rise .9s .25s forwards;
}
.inner-hero .tagline{
  max-width:52ch;margin:0 auto;font-size:1.12rem;color:var(--ink-soft);
  opacity:0;animation:rise .9s .4s forwards;
}
.inner-hero .eyebrow,.inner-hero h1,.inner-hero .tagline{transform:translateY(26px)}

/* ───────────────────────── breadcrumb ───────────────────────── */
.breadcrumb{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-size:.88rem;color:var(--ink-faint);
  opacity:0;animation:rise .7s .05s forwards;transform:translateY(20px);
}
.breadcrumb a{
  color:var(--accent);text-decoration:none;font-weight:500;
  transition:color .25s;
}
.breadcrumb a:hover{color:var(--violet)}
.breadcrumb .sep{font-size:.7rem;opacity:.5}

/* ───────────────────────── overview section ───────────────────────── */
.overview{
  max-width:800px;margin:0 auto 60px;text-align:center;
}
.overview h2{
  font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:18px;
}
.overview p{
  color:var(--ink-soft);font-size:1.06rem;line-height:1.7;margin-bottom:12px;
}
.overview .sub-text{
  font-size:.95rem;color:var(--ink-faint);font-style:italic;margin-top:8px;
}

/* ───────────────────────── gallery tabs ───────────────────────── */
.gallery-tabs{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:40px;padding:0 20px;
}
.tab-btn{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:600;font-size:.9rem;color:var(--ink-soft);
  padding:11px 22px;border-radius:100px;border:1px solid var(--glass-border);
  background:var(--glass);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px rgba(170,120,200,.14);
  transition:all .3s cubic-bezier(.2,.7,.2,1);
  position:relative;overflow:hidden;isolation:isolate;
}
.tab-btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s ease;z-index:-1;
}
.tab-btn:hover{
  transform:translateY(-3px);color:var(--accent);
  background:var(--glass-strong);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px rgba(255,143,192,.24);
}
.tab-btn:hover::after{left:150%}
.tab-btn.active{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--violet));
  border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.5), inset 0 -3px 8px rgba(120,30,80,.25),
    0 10px 24px rgba(255,95,162,.38), 0 4px 8px rgba(150,40,95,.22);
  transform:translateY(-2px);
}
.tab-btn.active::after{display:none}

.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .5s ease forwards}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ───────────────────────── gallery grid (masonry-ish) ───────────────────────── */
.gallery-grid{
  columns:3;column-gap:18px;padding:0;
}
.gallery-item{
  break-inside:avoid;margin-bottom:18px;
  border-radius:20px;overflow:hidden;position:relative;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 16px rgba(168,120,190,.14), 0 18px 44px var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s;
}
.gallery-item:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 26px 56px rgba(168,120,190,.38), inset 0 1px 0 rgba(255,255,255,.9);
}
.gallery-item img{
  width:100%;display:block;border-radius:19px;
  transition:transform .5s ease;
}
.gallery-item:hover img{
  transform:scale(1.04);
}
/* glass overlay on hover */
.gallery-item::after{
  content:"";position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 50%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.gallery-item:hover::after{opacity:1}

/* lazy load fade */
.gallery-item img[data-src]{opacity:0;transition:opacity .5s ease}
.gallery-item img.loaded{opacity:1}

/* ───────────────────────── process steps ───────────────────────── */
.process-section{margin-bottom:80px}
.process-section .section-head{text-align:center;max-width:640px;margin:0 auto 46px}
.process-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;
}
.process-step{
  padding:28px 24px;text-align:center;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s, backdrop-filter .35s;
}
.process-step::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .7s ease;z-index:-1;
}
.process-step:hover{
  transform:translateY(-6px);
  background:var(--glass-strong);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 24px 50px rgba(168,120,190,.38), inset 0 1px 0 rgba(255,255,255,.9);
}
.process-step:hover::after{left:150%}
.step-num{
  width:48px;height:48px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-style:italic;font-size:1.3rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--violet));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.5), 0 8px 18px rgba(255,95,162,.35);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.process-step:hover .step-num{transform:translateY(-3px) scale(1.1) rotate(-8deg)}
.process-step h3{font-size:1.15rem;margin-bottom:8px}
.process-step p{color:var(--ink-soft);font-size:.9rem;line-height:1.5}

/* ───────────────────────── deliverables grid ───────────────────────── */
.deliverables-section{margin-bottom:80px}
.deliverables-section .section-head{text-align:center;max-width:640px;margin:0 auto 36px}
.deliverables{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.deliverable{
  font-weight:500;color:var(--ink);padding:12px 22px;border-radius:100px;font-size:.95rem;
  background:var(--glass-strong);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -4px 8px rgba(180,140,210,.12),
    0 8px 18px rgba(170,120,200,.16);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, color .25s;
  display:inline-flex;align-items:center;gap:8px;
}
.deliverable::before{
  content:"✦";font-size:.7rem;color:var(--accent);
}
.deliverable:hover{
  transform:translateY(-3px) scale(1.04);color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px rgba(255,143,192,.26);
}

/* ───────────────────────── services list (for inner pages) ───────────────────────── */
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
  margin-bottom:60px;
}
.service-card{
  padding:26px 24px;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s ease, box-shadow .35s, background .35s;
}
.service-card::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .7s ease;z-index:-1;
}
.service-card:hover{
  transform:translateY(-6px);background:var(--glass-strong);
  box-shadow:0 24px 50px rgba(168,120,190,.36), inset 0 1px 0 rgba(255,255,255,.9);
}
.service-card:hover::after{left:150%}
.service-card .service-icon{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:14px;
  background:linear-gradient(140deg,var(--blush),var(--lavender));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(168,120,190,.22);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-icon{transform:translateY(-3px) rotate(-8deg) scale(1.08)}
.service-card h3{font-size:1.15rem;margin-bottom:6px}
.service-card p{color:var(--ink-soft);font-size:.9rem}

/* ───────────────────────── lightbox ───────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(74,43,80,.6);
  backdrop-filter:blur(30px) saturate(120%);-webkit-backdrop-filter:blur(30px) saturate(120%);
  animation:lbIn .35s ease forwards;
}
.lightbox.open{display:flex}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

.lightbox-content{
  position:relative;max-width:90vw;max-height:88vh;
}
.lightbox-content img{
  max-width:90vw;max-height:85vh;object-fit:contain;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(74,43,80,.5), 0 10px 30px rgba(0,0,0,.2);
}
.lightbox-close{
  position:absolute;top:-18px;right:-18px;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--glass-strong);color:var(--ink);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(168,120,190,.3);
  border:1px solid var(--glass-border);
  transition:transform .25s ease, box-shadow .25s, background .25s;
  z-index:10;
}
.lightbox-close:hover{
  transform:scale(1.12) rotate(90deg);
  background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;
  box-shadow:0 12px 28px rgba(255,95,162,.4);
}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--glass-strong);color:var(--ink);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(168,120,190,.3);
  border:1px solid var(--glass-border);
  transition:transform .25s ease, box-shadow .25s, background .25s;
}
.lightbox-nav:hover{
  transform:translateY(-50%) scale(1.12);
  background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;
  box-shadow:0 12px 28px rgba(255,95,162,.4);
}
.lightbox-prev{left:-70px}
.lightbox-next{right:-70px}

.lightbox-counter{
  text-align:center;margin-top:16px;
  font-size:.88rem;color:rgba(255,255,255,.7);font-weight:500;
  letter-spacing:.06em;
}

/* ───────────────────────── responsive inner ───────────────────────── */
@media(max-width:1024px){
  .gallery-grid{columns:2}
  .lightbox-prev{left:12px}
  .lightbox-next{right:12px}
}
@media(max-width:680px){
  .gallery-grid{columns:2;column-gap:12px}
  .gallery-item{margin-bottom:12px;border-radius:14px}
  .gallery-item img{border-radius:13px}
  .inner-hero{padding-top:130px;padding-bottom:40px}
  .process-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .lightbox-content img{border-radius:12px;max-width:94vw}
  .lightbox-close{top:-14px;right:-8px;width:38px;height:38px}
  .lightbox-nav{width:40px;height:40px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}
@media(max-width:420px){
  .gallery-grid{columns:2;column-gap:10px}
  .gallery-item{margin-bottom:10px;border-radius:12px}
  .gallery-tabs{gap:8px}
  .tab-btn{padding:9px 16px;font-size:.82rem}
}

@media(prefers-reduced-motion:reduce){
  .tab-panel.active{animation:none}
  .gallery-item img[data-src]{opacity:1}
}