/* ==================================================
   SHORT STORY INDEX
================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#f8f8f8;
  color:#222;
  font-family:'Noto Serif Bengali', serif;
  line-height:1.8;
}

/* ==================================================
   COVER
================================================== */

/* ==================================================
   COVER
================================================== */

.story-cover{
  max-width:1200px;
  margin:20px auto;
  padding:0 20px;
}

.cover-image{
  display:block;

  width:100%;
  height:auto;

  aspect-ratio:3/1;
  object-fit:cover;

  border-radius:12px;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.12);
}

/* Mobile */

@media (max-width:767px){

  .story-cover{
    padding:0 12px;
    margin:12px auto;
  }

  .cover-image{
    aspect-ratio:3/1;
  }

}

/* ==================================================
   HEADER
================================================== */

.story-header{
  max-width:1000px;
  margin:30px auto 10px;
  padding:0 16px;
  text-align:center;
}

.story-title{
  font-size:2.6rem;
  line-height:1.2;
  margin-bottom:10px;
}

.story-author{
  font-size:1rem;
  color:#666;
}

.story-author a{
  color:#00695c;
  text-decoration:none;
  font-weight:600;
}

/* ==================================================
   META
================================================== */

.story-meta{
  max-width:700px;
  margin:25px auto;
  padding:0 16px;

  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

.meta-item{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:12px 20px;
  min-width:140px;
  text-align:center;
}

.meta-item strong{
  display:block;
  font-size:.9rem;
  color:#666;
  margin-bottom:4px;
}

.meta-item span{
  font-weight:600;
}


/* ==== tag ==== */

.short-story-tag{
  display:inline-block;

  margin:8px 0 10px;

  padding:4px 12px;

  background:#0b6b3a;
  color:#ffffff;

  font-size:0.85rem;
  font-weight:600;
  line-height:1;

  border-radius:999px;

  letter-spacing:.3px;

  box-shadow:
    0 2px 6px rgba(11,107,58,.18);
}
/* ==== tag over ==== */



/* ==================================================
   INTRO
================================================== */

.story-intro {
  max-width: 760px;
  margin: 12px auto 26px auto;
  padding: 14px 18px;

  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;

  text-align: center;
  font-style: italic;

  background: #ffffff;
  border-radius: 10px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .story-intro {
    max-width: 100%;
    margin: 12px 20px 26px 20px;
  }

  .story-title {
  font-size: 2.3rem;
  margin-bottom: 6px;
}
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .story-intro {
    margin: 12px 19px 22px 19px;
    font-size: 1rem;
    padding: 12px 14px;
  }

  .story-title {
  font-size: 2rem;
  margin-bottom: 4px;
}
}

/* ===== Episode Grid ===== */
.episode-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-auto-rows: min-content;
  align-items: start;
}

/* Desktop */
@media (min-width: 1200px) {
  .episode-grid {
    max-width: 900px;
    margin: 0 auto;

    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  .episode-grid {
    max-width: 900px;
    margin: 0 auto;

    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .episode-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Episode Card ===== */
.episode-card {
  display: flex;
  flex-direction: column;

  background: #d7d7d7;

  border-radius: 10px;
  overflow: hidden;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

  transition:
    transform 0.18s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

.episode-card:hover {
  transform: scale(1.01);

  background: #000000;

  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}


/* 16:9 image */
.episode-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
.episode-info {
  padding: 5px 8px;
  text-align: center;
}

.episode-info h3 {
  margin: 15px 0px 0px 0px;
  padding: 0;
  line-height: 1.2;
  font-size: 1.2rem;
  font-weight: 600;
  color: #240000;

  transition: color 0.22s ease;
}


.episode-info p {
  font-size: 0.85rem;
  color: #700000;
  line-height: 1.2;
  margin-bottom: 20px;

  transition: color 0.22s ease;
}

.episode-card:hover .episode-info h3,
.episode-card:hover .episode-info p {
  color: #ffffff;
}

/* Force remove underline everywhere */
a, a:hover, a:focus, a:active {
  text-decoration: none !important;
}

/* ============= Mouse Pointer Default Start ================ */

/* ===== Disable Text Selection ===== */
body {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* ===== Disable cursor change on text ===== */
span, h1, h2, h4, h5, h6 {
  cursor: default;
}


/* ===== Allow pointer only on links & buttons ===== */
a, button {
  cursor: pointer !important;
  user-select: auto;
}

.episode-card:hover {
  cursor: pointer;
}

/* ============== Mouse Pointer Default End ================= */



/* ==================================================
   TABLET
================================================== */

@media (max-width:1024px){

  .story-title{
    font-size:2rem;
  }

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width:768px){

  .story-header{
    margin-top:20px;
  }

  .story-title{
    font-size:1.7rem;
  }

  .story-meta{
    gap:10px;
  }

  .meta-item{
    flex:1;
    min-width:120px;
  }

  .story-intro h2,
  .story-episodes h2{
    font-size:1.3rem;
  }
}


/* =========================================================
   MINI NAV
========================================================= */

.mini-episode-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  padding: 12px 10px;
  margin-bottom: 0;

  background-color: #0f0f0f; /* footer match */
}

/* ===== Single Item ===== */
.mini-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 72px;           /* 👈 desktop smaller */
  padding: 6px 12px;         /* 👈 compact */

  background-color: #1e1e1e;
  color: #ffffff;

  font-size: 0.85rem;        /* 👈 desktop smaller text */
  font-weight: 500;
  line-height: 1.2;

  border-radius: 5px;
  text-decoration: none;

  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease;
}



/* ===== Hover Effect ===== */
.mini-nav-item:hover {
  color: #2f80ff;
  background-color: #e6e6e6;

  box-shadow:
    0 0 0 1px rgba(47, 128, 255, 0.35),
    0 0 8px rgba(47, 128, 255, 0.3);

  transform: translateY(-1px);
}

/* ================= Tablet ================= */
@media (max-width: 1000px) {
  .mini-episode-nav {
    gap: 8px;
    padding: 10px 8px;
  }

  .mini-nav-item {
    min-width: 68px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/* ================= Mobile ================= */
@media (max-width: 600px) {
  .mini-episode-nav {
    gap: 6px;
    padding: 8px 6px;
  }

  .mini-nav-item {
    min-width: auto;       /* text-based width */
    padding: 5px 9px;
    font-size: 0.78rem;
    border-radius: 4px;
  }
}


/* =========================
   Story Information Boxes
========================= */

.info-box {
  max-width: 900px;
  margin: 22px auto;
  padding: 20px 24px;

  background: #ffffff;
  border-radius: 12px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.info-box h2 {
  margin-bottom: 14px;

  font-size: 1.35rem;
  font-weight: 700;
  color: #0b6b3a;

  text-align: center;
}

.info-box p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;

  text-align: justify;
}

@media (max-width: 1199px) {
  .info-box {
    margin: 20px;
  }
}

@media (max-width: 767px) {
  .info-box {
    margin: 16px;
    padding: 16px;
  }

  .info-box h2 {
    font-size: 1.15rem;
  }

  .info-box p {
    font-size: 1rem;
    line-height: 1.75;
  }
}