/* === CAST PAGE === */

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

/* Grid */
.cast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Card */
.cast-card{position:relative;overflow:hidden;border-radius:6px;background:#f7f7fb;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.cast-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(26,26,46,.12)}

/* Image */
.cast-card-img-wrap{position:relative;padding-top:120%;overflow:hidden}
.cast-card-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cast-card:hover .cast-card-img{transform:scale(1.06)}
.cast-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,46,.6) 100%);opacity:0;transition:opacity .4s}
.cast-card:hover .cast-card-overlay{opacity:1}

/* Genre badge */
.cast-card-genre{position:absolute;top:16px;left:16px;display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(233,30,140,.75);padding:4px 12px;border-radius:2px;font-weight:600;backdrop-filter:blur(4px);z-index:2;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
.cast-card:hover .cast-card-genre{opacity:1;transform:translateY(0)}

/* Body */
.cast-card-body{padding:20px 20px 24px}
.cast-card-name{font-size:1rem;font-weight:700;color:#1a1a2e;margin-bottom:2px;line-height:1.4}
.cast-card-name-en{font-family:'Cormorant Garamond',serif;font-size:.8rem;color:#e91e8c;letter-spacing:.08em;font-weight:400;margin-bottom:10px}
.cast-card-intro{font-size:.78rem;line-height:1.9;color:rgba(42,42,62,.5);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Card entrance animation */
@keyframes castCardIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* === MODAL === */
.cast-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:none;align-items:center;justify-content:center}
.cast-modal.active{display:flex}

/* Backdrop */
.cast-modal-backdrop{position:absolute;inset:0;background:rgba(26,26,46,.75);backdrop-filter:blur(6px)}

/* Content */
.cast-modal-content{position:relative;width:90%;max-width:800px;max-height:85vh;background:#fff;border-radius:8px;overflow:hidden;transform:translateY(30px) scale(.97);transition:transform .4s cubic-bezier(.16,1,.3,1);box-shadow:0 40px 80px rgba(0,0,0,.25)}
.cast-modal.active .cast-modal-content{transform:translateY(0) scale(1)}

/* Close */
.cast-modal-close{position:absolute;top:16px;right:16px;z-index:10;width:40px;height:40px;border:none;background:rgba(26,26,46,.7);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.cast-modal-close:hover{background:#e91e8c;transform:scale(1.1)}

/* Inner layout */
.cast-modal-inner{display:grid;grid-template-columns:320px 1fr;min-height:400px}

/* Modal image */
.cast-modal-img-wrap{position:relative;overflow:hidden}
.cast-modal-img{width:100%;height:100%;min-height:400px;background-size:cover;background-position:center top}
.cast-modal-genre{position:absolute;bottom:20px;left:20px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(233,30,140,.8);padding:5px 14px;border-radius:2px;font-weight:600}

/* Modal body */
.cast-modal-body{padding:40px 36px;overflow-y:auto;max-height:85vh}
.cast-modal-name{font-size:1.5rem;font-weight:700;color:#1a1a2e;margin-bottom:4px;line-height:1.3}
.cast-modal-name-en{font-family:'Cormorant Garamond',serif;font-size:1rem;color:#e91e8c;letter-spacing:.08em;font-weight:400;margin-bottom:24px}
.cast-modal-intro{font-size:.88rem;line-height:2.2;color:rgba(42,42,62,.65)}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .cast-grid{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media(max-width:768px){
  .cast-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cast-card-body{padding:14px 14px 18px}
  .cast-card-name{font-size:.9rem}
  .cast-card-intro{-webkit-line-clamp:2}
  .cast-modal-inner{grid-template-columns:1fr}
  .cast-modal-img{min-height:280px}
  .cast-modal-body{padding:24px 20px;max-height:50vh}
  .cast-modal-content{max-height:90vh}
}
@media(max-width:480px){
  .cast-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}
}