/* =========================================================
   EJO Articles
   Custom page stylesheet for ejoarticles/index.php
   Base: ejocreates_index.css structure
   Notes:
   - Does NOT reset body/theme (handled by theme.css/base.css/studio.css)
   - Fixes modal vertical scrolling for long articles
   ========================================================= */

/* ---------- Card grid ---------- */

.studio-wrap .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}

.studio-wrap a.card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.studio-wrap a.card:hover{
  transform:translateY(-2px);
  border-color:rgba(200,220,255,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

.studio-wrap .thumb{
  position:relative;
  height:150px; /* tuned for article thumbs */
  background:rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.studio-wrap .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* “Read” badge (reuses your inline class name) */
.studio-wrap .readBadge,
.studio-wrap .play{
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.20);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}

.studio-wrap .meta{
  padding:12px 12px 14px;
}

.studio-wrap .title{
  font-weight:650;
  font-size:14px;
  line-height:1.25;
  margin:0 0 6px 0;
}

.studio-wrap .desc{
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.35;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.studio-wrap .catpill{
  display:inline-block;
  margin-top:10px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  color:rgba(255,255,255,.70);
  background:rgba(255,255,255,.04);
}

/* ---------- Modal (scrollable) ---------- */

/* IMPORTANT:
   In ejocreates_index.css the modal uses display:flex + centering,
   which prevents vertical scrolling when content exceeds viewport.
   Here we use display:block and let the overlay scroll.
*/

.modal{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.75);
  padding:16px;
  z-index:1000;

  /* key: scroll overlay */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.modal.open{
  display:block;
}

.dialog{
  width:min(1000px,100%);
  margin:18px auto;
  background:#0e1020;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);

  /* keep header visible while scrolling */
  position:sticky;
  top:0;
  background:#0e1020;
  z-index:10;
}

.bar .name{
  font-weight:650;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bar .btns{
  display:flex;
  gap:8px;
  align-items:center;
}

.bar button{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}

.bar button:hover{
  background:rgba(255,255,255,.10);
}

.articleMeta{
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.72);
  font-size:12px;
  padding:10px 18px 0;
}

.articleBody{
  padding:18px;
  color:rgba(255,255,255,.92);
  font-size:15px;
  line-height:1.75;
}

.articleBody img{
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* Optional: make very wide tables/code blocks scroll inside article */
.articleBody pre,
.articleBody code,
.articleBody table{
  max-width:100%;
  overflow:auto;
}

/* ---------- Mobile tuning ---------- */
@media (max-width:720px){
  .studio-wrap .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
  .studio-wrap .thumb{height:140px;}
  .modal{padding:10px;}
  .dialog{margin:10px auto;border-radius:16px;}
  .articleBody{padding:14px;}
}