/* ============================
   CLASSES PAGE - Styling design
============================ */

.sc-grid{
 width:80%;
 margin:50px auto;
 display:flex;
 flex-direction:column;
 gap:48px;
}

/* CARD */
.sc-classes-card{
 background: radial-gradient(circle at 50% 0%, #3b2a18, #1a1209);
 border:2px solid #c49b4a;
 border-radius:18px;
 padding:28px 32px;
 color:#f4e8c8;
 box-shadow:
  0 14px 28px rgba(0,0,0,.85),
  inset 0 0 18px rgba(0,0,0,.55);
}

/* Header */
.sc-classes-header{
 display:flex;
 align-items:center;
 gap:24px;
 margin-bottom:18px;
}

.sc-imgwrap{
 width:120px;
 height:120px;
 border-radius:14px;
 overflow:hidden;
 box-shadow:0 0 10px rgba(0,0,0,.9);
}

.sc-imgwrap img{
 width:100%;
 height:100%;
 object-fit:cover;
}

/* Title */
.sc-name{
 font-family:"Cinzel",serif;
 font-size:1.9rem;
 color:#f4d891;
 text-shadow:0 0 12px rgba(255,214,139,.5);
 position:relative;
 display:inline-block;
}

.sc-name::after{
 content:"";
 display:block;
 width:100%;
 max-width:160px;
 height:3px;
 margin-top:10px;
 background:linear-gradient(to right,transparent,#f4d891,#fff1c1,#f4d891,transparent);
 box-shadow:0 0 14px rgba(255,215,120,.6);
}

/* Meta */
.sc-meta{
 display:flex;
 gap:10px;
}

.sc-badge{
 padding:6px 12px;
 border-radius:999px;
 border:1px solid rgba(255,220,150,.6);
 background:rgba(0,0,0,.4);
}

/* Body */
.sc-body{ 
 font-size:1rem; 
 line-height:1.6; 
}

/* 🔥 QUOTE BUTTON 🔥 */
.sc-quote-button{
 margin:18px auto;
 display:block;
 padding:12px 18px;
 font-style:italic;
 background: radial-gradient(circle,#5b431e,#24180c);
 border:1px solid #ffd778;
 border-radius:14px;
 color:#ffe8b4;
 cursor:pointer;
 text-shadow:0 0 6px rgba(255,220,150,.6);
 box-shadow:0 0 18px rgba(255,215,120,.35), inset 0 0 12px rgba(255,200,100,.25);
 transition:.2s;
}

.sc-quote-button:hover{
 transform:scale(1.03);
 box-shadow:0 0 25px rgba(255,215,120,.7);
}

/* ===================== Description Box ===================== */
.sc-desc-box{
 margin:12px auto;
 padding:16px 22px;
 max-width:85%;
 line-height:1.55;
 background: radial-gradient(circle at 50% 0%, rgba(255,215,120,.18), rgba(0,0,0,.75));
 border:1px solid rgba(255,215,120,.6);
 border-radius:14px;
 color:#f8e6bc;
 box-shadow:
  0 0 18px rgba(255,215,120,.35),
  inset 0 0 12px rgba(255,200,100,.25);
}

/* ================= FOOTER TAGS ================= */
.sc-footer{
 margin-top:18px;
}

.sc-tags{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
}

.sc-tag{
 padding:6px 12px;
 border-radius:999px;
 border:1px solid rgba(255,220,150,.6);
 background:rgba(0,0,0,.4);
 color:#ffe8b4;
 font-size:0.85rem;
}

/* ================= MODERN FANTASY MODAL ================= */
.class-modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.85);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:9999;
}

.class-modal.show{ display:flex; }

.class-modal-box{
 background: radial-gradient(circle,#3b2a18,#120b06);
 border:2px solid #c49b4a;
 border-radius:18px;
 padding:26px 26px;
 width:620px;
 max-height:85vh;
 color:#ffe8c5;
 text-align:center;
 box-shadow:
   0 0 40px rgba(0,0,0,.9),
   inset 0 0 20px rgba(255,200,120,.12);
 overflow:hidden;
}

/* Scroll Container */
.modal-scroll{
 max-height:72vh;
 overflow-y:auto;
 padding-right:8px;
 padding-left:4px;
}

.modal-scroll::-webkit-scrollbar{
 width:8px;
}
.modal-scroll::-webkit-scrollbar-thumb{
 background:#c49b4a;
 border-radius:10px;
}
.modal-scroll::-webkit-scrollbar-track{
 background:#1a1209;
}

/* Title */
.class-modal-box h2{
 font-family:"Cinzel",serif;
 letter-spacing:.08em;
 margin-top:6px;
 margin-bottom:6px;
 color:#ffdf9a;
 text-shadow:0 0 16px rgba(255,200,120,.6);
}

/* Thick Gold Divider */
.modal-divider{
 width:92%;
 height:3px;
 margin:12px auto 12px;
 background:linear-gradient(
   to right,
   transparent,
   #f4d891,
   #fff1c1,
   #f4d891,
   transparent
 );
 box-shadow:0 0 10px rgba(255,215,120,.7);
 border-radius:10px;
}

/* Stronger Section Divider */
.modal-dash{
 width:85%;
 height:2px;
 margin:16px auto 18px;
 background:linear-gradient(
   to right,
   transparent,
   rgba(255,215,120,.75),
   transparent
 );
 opacity:1;
}

/* Section Titles */
.modal-section{
 font-family:"Cinzel",serif;
 color:#ffdf9a;
 letter-spacing:.04em;
 margin-top:16px;
 margin-bottom:10px;
 text-shadow:0 0 10px rgba(255,210,120,.6);
}

/* Text */
.class-modal-box p{
 margin:10px 0 14px 0;
 line-height:1.7;
 color:#fff2cf;
 font-size:16px;
}

/* Close Button */
.closeModal{
 margin-top:18px;
 padding:8px 14px;
 border-radius:999px;
 border:1px solid #ffdca0;
 background:rgba(0,0,0,.55);
 color:#ffe5b8;
 cursor:pointer;
 transition:.15s;
}

.closeModal:hover{
 transform:scale(1.05);
 box-shadow:0 0 18px rgba(255,215,120,.6);
}
/* ================= MOBILE Classes page ================= */

@media (max-width: 900px){

  html, body{
    overflow-x:hidden !important;
    width:100%;
  }

  .sc-container{
    max-width:100%;
    overflow-x:hidden;
  }

  .sc-grid{
    width:100%;
    max-width:100%;
    padding:0 12px;
    box-sizing:border-box;
  }

  .sc-classes-card{
    width:100%;
    box-sizing:border-box;
    padding:22px 16px;
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .sc-classes-body{
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .sc-desc-box{
    max-width:100%;
    width:100%;
    height:auto;
    max-height:none;
    overflow:visible;
    box-sizing:border-box;
  }

  .sc-classes-header{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .sc-imgwrap{
    width:90px;
    height:90px;
  }

  .sc-name{
    font-size:1.6rem;
  }

  .sc-meta{
    justify-content:center;
    flex-wrap:wrap;
  }

  .sc-tags{
    justify-content:center;
  }
}