/* === WORKS PAGE === */

/* Works Intro */
.works-intro{padding-bottom:40px}

/* Filter Buttons */
.works-filter{display:flex;gap:12px;margin-bottom:48px;flex-wrap:wrap;justify-content:center;padding:24px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.works-filter-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 28px;border:1px solid rgba(0,0,0,.1);background:transparent;color:rgba(42,42,62,.5);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s;font-family:inherit;font-weight:500}
.works-filter-btn:hover{border-color:rgba(233,30,140,.4);color:#e91e8c}
.works-filter-btn.active{border-color:#e91e8c;background:#e91e8c;color:#fff}
.works-filter-btn svg{stroke:currentColor}

/* Works Grid */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Works Item */
.works-item{position:relative;height:340px;overflow:hidden;border-radius:4px;cursor:pointer}
.works-item-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.works-item:hover .works-item-img{transform:scale(1.08)}
.works-item-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,46,.15) 0%,rgba(26,26,46,.75) 60%,rgba(26,26,46,.92) 100%);transition:background .4s}
.works-item:hover .works-item-overlay{background:linear-gradient(180deg,rgba(233,30,140,.08) 0%,rgba(26,26,46,.75) 50%,rgba(26,26,46,.95) 100%)}

/* Works Item Content */
.works-item-content{position:absolute;bottom:0;left:0;right:0;padding:28px 24px;z-index:1}
.works-item-badge{display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(233,30,140,.7);padding:4px 12px;border-radius:2px;margin-bottom:12px;font-weight:600}
.works-item-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.4}
.works-item-client{font-size:.75rem;color:#e91e8c;letter-spacing:.1em;margin-bottom:8px;font-weight:500}
.works-item-desc{font-size:.75rem;line-height:1.8;color:rgba(255,255,255,.5);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.works-item:hover .works-item-desc{opacity:1;transform:translateY(0)}

/* Item animation */
@keyframes worksItemIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Strength Stats */
.works-strength-stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.works-strength-stat{text-align:center}
.works-strength-num{display:block;font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:300;color:#e91e8c;line-height:1;margin-bottom:8px}
.works-strength-label{font-size:.65rem;letter-spacing:.15em;color:rgba(255,255,255,.4);text-transform:uppercase}

/* === PAGINATION === */
.works-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;padding-top:32px}
.pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid rgba(0,0,0,.1);background:transparent;color:rgba(42,42,62,.5);font-size:.8rem;font-family:'Cormorant Garamond',serif;cursor:pointer;transition:all .3s;font-weight:500}
.pagination-btn:hover{border-color:rgba(233,30,140,.4);color:#e91e8c}
.pagination-btn.active{background:#e91e8c;border-color:#e91e8c;color:#fff}
.pagination-btn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.pagination-prev,.pagination-next{padding:0}
.pagination-prev svg,.pagination-next svg{stroke:currentColor}

/* Works item as link */
.works-item{text-decoration:none;display:block}

/* === WORK DETAIL PAGE === */
.work-detail{padding-top:60px;padding-bottom:80px}

/* Breadcrumb */
.work-breadcrumb{font-size:.75rem;color:rgba(42,42,62,.4);margin-bottom:40px;letter-spacing:.05em}
.work-breadcrumb a{color:#e91e8c;transition:opacity .3s}
.work-breadcrumb a:hover{opacity:.7}
.work-breadcrumb-sep{margin:0 10px;color:rgba(42,42,62,.2)}

/* Detail Grid */
.work-detail-grid{display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start}

/* Main content */
.work-detail-summary{font-size:.95rem;line-height:2.2;color:rgba(42,42,62,.65);margin-bottom:40px}

/* Gallery */
.work-gallery{display:grid;grid-template-columns:1fr;gap:16px}
.work-gallery-item{overflow:hidden;border-radius:4px}
.work-gallery-item img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.work-gallery-item:hover img{transform:scale(1.03)}

/* Sidebar */
.work-meta-card{background:#f7f7fb;border-radius:8px;padding:32px 28px;margin-bottom:24px}
.work-meta-item{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.work-meta-item:last-child{border-bottom:none}
.work-meta-item dt{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:#e91e8c;margin-bottom:4px;font-weight:600}
.work-meta-item dd{font-size:.88rem;color:#1a1a2e;font-weight:500}

.work-back-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:1px solid rgba(42,42,62,.15);color:rgba(42,42,62,.5);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;transition:all .3s;font-weight:500;width:100%;justify-content:center}
.work-back-btn:hover{border-color:#e91e8c;color:#e91e8c;opacity:1}

/* Prev / Next navigation */
.work-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:80px;padding-top:40px;border-top:1px solid rgba(0,0,0,.06)}
.work-nav-link{display:flex;flex-direction:column;gap:8px;padding:24px;background:#f7f7fb;border-radius:4px;transition:background .3s,transform .3s;text-decoration:none}
.work-nav-link:hover{background:#f0eef5;transform:translateY(-2px);opacity:1}
.work-nav-next{text-align:right;align-items:flex-end}
.work-nav-label{display:inline-flex;align-items:center;gap:6px;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#e91e8c;font-weight:600}
.work-nav-label svg{stroke:#e91e8c}
.work-nav-title{font-size:.9rem;font-weight:600;color:#1a1a2e;line-height:1.4}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .works-item{height:300px}
  .works-strength-stats{gap:40px}
  .work-detail-grid{grid-template-columns:1fr;gap:40px}
  .work-detail-sidebar{order:-1}
}
@media(max-width:768px){
  .works-filter{gap:8px}
  .works-filter-btn{padding:8px 16px;font-size:.65rem}
  .works-grid{grid-template-columns:1fr}
  .works-item{height:280px}
  .works-strength-stats{gap:24px}
  .works-strength-num{font-size:1.8rem}
  .work-nav{grid-template-columns:1fr;gap:12px}
  .work-nav-next{text-align:left;align-items:flex-start}
}