/* site.css - compact, production friendly */

/* Reset-ish */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:Inter,Arial,sans-serif;background:#fbfbfc;color:#111;line-height:1.5}
a{text-decoration:none;color:inherit}
.container{width:92%;max-width:1200px;margin:0 auto}

/* Header */
.header{background:#fff;border-bottom:1px solid #efefef;position:sticky;top:0;z-index:50}
.header .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img { display: none; } /* remove image if it exists */
.brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.5px;
}
.header .nav{display:flex;gap:10px;align-items:center}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:#0f172a;color:#fff;font-weight:600}
.btn.secondary{background:transparent;border:1px solid #0f172a;color:#0f172a}

/* Hero */
.hero{background:linear-gradient(120deg,#0b1220 0,#10203a 60%);color:#fff;border-radius:12px;padding:28px;margin:20px 0;display:flex;gap:20px;align-items:center;overflow:hidden}
.hero .left{flex:1}
.hero h1{font-size:1.9rem;margin-bottom:8px}
.hero p{color:#d1e3ff;margin-bottom:12px}
.hero .cta{display:flex;gap:10px}

/* Carousel */
.carousel{position:relative;overflow:hidden;border-radius:12px}
.carousel-track{display:flex;transition:transform .45s ease}
.carousel-slide{min-width:100%;position:relative}
.carousel-slide img{width:100%;height:320px;object-fit:cover;display:block}
.carousel-controls{position:absolute;left:12px;right:12px;top:50%;display:flex;justify-content:space-between;transform:translateY(-50%)}
.carousel-dotwrap{display:flex;gap:8px;position:absolute;left:50%;transform:translateX(-50%);bottom:10px}

/* Grid */
/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 420px; /* fixed min-height for uniformity */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}

.card .thumb {
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .thumb img {
  transform: scale(1.05);
}

.card .body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.card h3 {
  font-size: 1.05rem;
  margin: 8px 0 6px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.card p {
  font-size: 0.95rem;
  color: #444;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

/* Article meta */
.author-pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.author-name {
  font-weight: 600;
  font-size: 0.95rem;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 680px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .card {
    min-height: auto;
  }
}

/* Dashboard / Profile small styles */
.row{display:flex;gap:18px}
.sidebar{width:280px}
.panel{background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 20px rgba(15,23,42,0.06)}
.profile-avatar{width:90px;height:90px;border-radius:999px;object-fit:cover;border:3px solid #0f172a}

/* Form */
.form{display:flex;flex-direction:column;gap:10px}
.label{font-weight:600;margin-bottom:6px}
.input,textarea,select{padding:10px;border:1px solid #e6e6e6;border-radius:8px;font-size:0.95rem}
textarea{min-height:150px;resize:vertical}

/* Buttons */
.btn-primary{background:#0f172a;color:#fff;padding:10px 14px;border-radius:8px;font-weight:600}
.btn-ghost{background:transparent;border:1px solid #e6e6e6;padding:8px 12px;border-radius:8px}

/* Footer */
/* Footer improvements */
.footer {
  padding: 18px 0;
  margin-top: 40px;
  border-top: 1px solid #efefef;
  background: #fff;
  color: #555;
  font-size: 0.9rem;
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer .right {
  display: none;
  font-weight: 300;
  color: #0f172a;
}

.footer .powered {
  display: none;
  color: #111;
  font-weight: 300;
}

/* Small helpers */
.text-muted{color:#6b6f76;font-size:.95rem}
.kicker{font-size:.85rem;color:#6b6f76;text-transform:uppercase;letter-spacing:.09em}

/* responsive */
@media (max-width:880px){.hero{flex-direction:column}.carousel-slide img{height:220px}}

/* view_article */
/* layout: article + right column (gap 10px) */
.view-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 10px; /* <-- requested 10px gap */
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 980px){
  .view-layout { grid-template-columns: 1fr; }
  .right-column { order: -1; margin-bottom: 18px; } /* status/ads stack above */
}

/* Article column */
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0;
  font-size: 1.05rem;
  color: #111;
  min-width: 0; /* allow shrinking inside grid to prevent overflow */
}
.article-body h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1.08;
  overflow-wrap: break-word; /* wrap long titles */
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.article-meta { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #555; }
.article-meta img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; border:2px solid #fff; }
.feature-img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 12px; margin: 18px 0; }

/* right column wrapper (holds either status panel or ads) */
.right-column { min-width: 0; }

/* status panel (NOT sticky) */
.status-panel {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  padding: 16px;
  height: fit-content;
  position: relative; /* not sticky */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .36s ease, transform .36s ease;
}
.status-panel.show { opacity: 1; transform: translateY(0); }
.status-panel.hide { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* status badge */
.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
}
.status-draft { background:#f3f4f6;color:#111;border:1px solid #eee }
.status-under_review { background:#fffbeb;color:#92400e;border:1px solid rgba(146,64,14,0.06) }
.status-rejected { background:#fff5f5;color:#7f1d1d;border:1px solid rgba(127,29,29,0.06) }

/* notice styles */
.notice { padding:10px 12px;border-radius:10px;margin-bottom:10px;font-size:.95rem;text-align:left; }
.notice-draft { background:#f8fafc;border:1px solid #e6e6e6;color:#111 }
.notice-review { background:#fffbeb;border:1px solid #fef3c7;color:#92400e }
.notice-rejected { background:#fff5f5;border:1px solid #fee2e2;color:#7f1d1d }

/* edit button */
.edit-btn {
  display:inline-block;margin-top:8px;padding:10px 14px;background:#0f172a;color:#fff;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none;
  transition: transform 160ms ease, background 160ms ease;
}
.edit-btn:hover{ transform: translateY(-2px); background:#111827; }

/* ads container (initially hidden) */
.ads-panel { display:none; }
.ads-panel.show { display:block; }
.ad-slot {
  background:#f8faf8;
  border:1px dashed #e6e6e6;
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
  min-height:110px;
  display:none;
  align-items:center;
  justify-content:center;
  color:#111;
  font-weight:600;
  text-align:center;
}

/* make ads sticky once visible (desktop only) */
@media (min-width: 900px) {
  .ads-panel.sticky { position: sticky; top: 100px; }
}

/* small screens: ads become normal flow */
@media (max-width: 900px) {
  .ad-slot { min-height:80px; }
}

/* content area */
.content { line-height:1.75; margin-top:16px; color:#111; white-space:pre-wrap; }

/* utility */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }