/* ===========================
   Variables (theme)
   =========================== */
:root{
  --bg:#0f1c2b;
  --panel:#1b2c44;
  --border:#23354f;
  --text:#e6e6e6;
  --muted:#a9b3c4;
  --accent:#3498db;
}

/* ===========================
   Base (minimal reset to avoid admin breakage)
   =========================== */
* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: #66aaff; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* ===========================
   Header
   =========================== */
.header { text-align: center; margin-bottom: 22px; }
.brand { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.banner { font-size: 14px; color: var(--muted); }

/* ===========================
   Topbar / search
   =========================== */
.topbar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 22px; flex-wrap: wrap;
}
.search input[type="text"], .search select{
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: #142235; color: var(--text); outline: none;
}
.search .btn { margin-left: 6px; }

/* ===========================
   Grid / cards (FRONT-END)
   =========================== */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  justify-content: center;
}
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.card:hover { transform: translateY(-3px); }

/* ? Uniform thumbnail area (works even when no image) */
.card .thumb{
  display:block;
  height:160px;           /* fixed thumbnail height */
  overflow:hidden;        /* crop overflow */
  background:#0e1a28;     /* subtle bg while loading / no image */
}
/* Image fills the thumb box perfectly */
.card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* In case a post has NO image, keep card tidy */
.card .pad { padding: 12px; }
.card .title { font-size: 18px; margin: 8px 0; }
.card .meta {
  font-size: 12px; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.badge {
  display: inline-block; background: var(--accent); color: #001b33;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.btn-link { display: inline-block; margin-top: 8px; color: #66aaff; }

/* ===========================
   Buttons
   =========================== */
.btn{
  background: var(--accent); color: #001b33; border: none; border-radius: 6px;
  padding: 9px 14px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .06s ease, filter .15s ease; display: inline-block; text-decoration: none;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }
a.btn{ text-decoration: none; }

/* ===========================
   Pagination
   =========================== */
.pagination{
  margin: 22px 0; display: flex; gap: 10px; justify-content: center; align-items: center;
}
.pagination .badge{
  background: #2c3e50; color: #cfe3ff; border-radius: 999px; padding: 6px 12px; font-size: 14px;
}

/* ===========================
   Article page
   =========================== */
.article { margin: 20px auto; max-width: 800px; }
.article .meta { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.article h1 { font-size: 28px; margin-bottom: 12px; }

/* Featured image in article: same look as grid (320x160 centered) */
.article img.main{
  width: 320px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto 20px;
}
/* Any inline images in body stay safe/responsive */
.article .body img{ max-width:100%; height:auto; }

.article img.inline {
  max-width: 50%;       /* or whatever size you prefer */
  height: auto;
  display: block;
  margin: 12px auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth effect */
  cursor: zoom-in; /* changes cursor icon */
}

.article img.inline:hover {
  transform: scale(1.05); /* zoom in slightly */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* optional drop shadow */
}




/* ===========================
   ADMIN styles (scoped gently)
   =========================== */
.form-field{ margin:12px 0; }
.form-field label{
  display:block; font-size:13px; color:var(--muted); margin-bottom:6px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%; padding:10px 12px;
  border-radius:8px; border:1px solid var(--border);
  background:#142235; color:var(--text); outline:none; font-size:14px;
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field input[type="file"]{
  padding:8px; background:#0f2034; border:1px dashed #2b4266; cursor:pointer;
}
.admin-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-bottom:10px; }
.admin-panel{ background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; }
.admin-table{
  width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.admin-table th, .admin-table td{
  padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px;
}
.admin-table th{ background:#18273d; color:#cfe3ff; font-weight:700; }
.admin-table tr:last-child td{ border-bottom:0; }
.notice{
  background:rgba(52,152,219,.12); border:1px solid rgba(52,152,219,.4);
  color:#cfe3ff; padding:8px 10px; border-radius:8px; margin:8px 0;
}

/* ===========================
   Footer
   =========================== */
.footer{
  text-align:center; margin-top:36px; padding-top:18px; font-size:13px; color:var(--muted);
  border-top:1px solid var(--border);
}

/* ===========================
   Mobile
   =========================== */
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
  .card{ max-width: 100%; }
  .article { max-width: 100%; }
  .article img.main{
    width: 100%;
    max-width: 100%;
    height: 200px;      /* keep a nice banner on phones */
    object-fit: cover;
  }
}

/* The link wraps the image and spans full width so % sizing works */
.zoom-link{
  position: relative;
  display: block;
  width: 100%;
  margin: 12px auto;            /* spacing around the image block */
  text-align: center;           /* helps center inline content if needed */
}

/* Inline image: centered, limited to 50% of the article width */
.article img.inline{
  max-width: 50%;               /* <- tweak to 60/70% if you want bigger */
  height: auto;
  display: block;
  margin: 0 auto;               /* centers the image */
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: zoom-in;
}

.article img.inline:hover{
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* Single “Click to enlarge” badge (no emoji icon) */
.zoom-link::after{
  content: "Click to enlarge";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 6px);
  font-size: 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 5px 8px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.zoom-link:hover::after,
.zoom-link:focus-visible::after{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Remove the magnifier icon that was showing as “??” */
.zoom-link::before{ content:none; }








/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}



.lightbox {
  cursor: zoom-out; /* indicates you can click to close */
}





/* Author byline */
.byline{
  display:flex; gap:10px; align-items:center;
  margin: 10px 0 14px;
}
.byline .avatar{
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; border:1px solid var(--border);
  background:#142235;
}
.byline .by{ font-weight:700; }
.byline .date{ font-size:12px; color:var(--muted); }

/* Card-sized byline */
.byline.small{ gap:8px; margin-top:8px; }
.byline.small .avatar{ width:24px; height:24px; }
.byline.small span{ font-size:12px; color:var(--muted); }

/* Lightbox + inline image (from earlier) */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85);
  z-index:9999; justify-content:center; align-items:center; cursor: zoom-out; }
.lightbox img { max-width:90%; max-height:90%; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.6); }
.zoom-link{ position:relative; display:block; width:100%; margin:12px auto; text-align:center; }
.article img.inline{ max-width:50%; height:auto; display:block; margin:0 auto;
  border:1px solid rgba(255,255,255,.06); border-radius:8px; transition:transform .3s ease, box-shadow .3s ease; cursor:zoom-in; }
.article img.inline:hover{ transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.zoom-link::after{ content:"Click to enlarge"; position:absolute; left:50%; bottom:10px; transform:translate(-50%,6px);
  font-size:12px; background:rgba(0,0,0,.65); color:#fff; padding:5px 8px; border-radius:999px; opacity:0;
  transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.zoom-link:hover::after, .zoom-link:focus-visible::after{ opacity:1; transform:translate(-50%,0); }