/* ============================================================
   HBCU CONNECT Magazine — reader overlay + library styles
   ============================================================ */

/* ---------- Reader overlay ---------- */
.mag-reader{ position:fixed; inset:0; background:rgba(18,18,24,.97); z-index:9999; display:none; flex-direction:column; }
.mag-reader.open{ display:flex; }

.mr-bar{ display:flex; align-items:center; gap:10px; padding:10px 16px; color:#fff; background:#111; }
.mr-bar .mr-title{ font-weight:bold; font-size:16px; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-bar .mr-page{ color:#aeb8c4; font-size:14px; min-width:64px; text-align:right; }
.mr-bar button, .mr-bar .mr-dl{ background:#0069ed; color:#fff; border:none; border-radius:5px; padding:7px 12px;
   cursor:pointer; font-size:14px; text-decoration:none; line-height:1; }
.mr-bar .mr-close{ background:#3a3a44; }
.mr-bar .mr-rail-toggle{ display:none; background:#3a3a44; }

.mr-body{ flex:1; display:flex; min-height:0; }
/* overflow:auto + top-align so a zoomed (scale>1) page can be scrolled/panned */
.mr-stage{ flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:14px; }
.mr-pg{ background:#e9e9e9; }
.mr-bar .mr-zoom{ color:#aeb8c4; font-size:13px; min-width:44px; text-align:center; }

.mr-rail{ width:158px; overflow-y:auto; background:#1b1b22; padding:8px 10px; flex:none; }
.mr-railhead{ color:#8fa3bd; font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin:12px 4px 6px; }
.mr-thumb{ width:100%; margin-bottom:9px; border:2px solid transparent; border-radius:3px; cursor:pointer; display:block; }
.mr-thumb.active{ border-color:#0069ed; }
.mr-thumb:hover{ border-color:#5a9bff; }

@media(max-width:800px){
  .mr-bar .mr-rail-toggle{ display:inline-block; }
  .mr-rail{ position:absolute; right:0; top:52px; bottom:0; width:130px; transform:translateX(100%); transition:transform .2s; z-index:2; box-shadow:-6px 0 20px rgba(0,0,0,.4); }
  .mr-rail.show{ transform:none; }
}

/* ---------- Hero ---------- */
/* Background image hook: drop a file at /magazine/images/hero-bg.jpg and it
   appears automatically (until then the hero stays white). Recommended size
   ~1800 x 500 px landscape JPG; it is scaled to cover and center-cropped. */
.mag-hero{ display:flex; gap:24px; align-items:center; }
/* Compound selector beats omega's inline `.content_box{background:white}` which
   is declared after magazine.css in the head and would otherwise reset this. */
.content_box.mag-hero{ background:#fff url('/magazine/images/hero-bg.jpg') center/cover; }
/* Frosted panel behind the copy so it stays legible over ANY part of the
   background image, at any width. `center/cover` re-crops as the viewport
   narrows, sliding darker/busier image regions under the text on mobile —
   this backing removes that dependency on where the image is light. */
.mag-hero-body{ flex:1; background:rgba(255,255,255,.62); padding:18px 22px; border-radius:10px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.mag-hero-cover{ width:200px; max-width:40%; border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.mag-kicker{ color:#0069ed; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.mag-hero-body h1{ font-size:38px; margin:6px 0 12px; line-height:1.08; }
.mag-hero-body p{ color:#111; font-size:18px; line-height:1.45; margin:0 0 16px; max-width:48ch; }
.mag-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:600px){ .mag-hero{ flex-direction:column; text-align:center; } .mag-hero-cover{ max-width:62%; }
  .mag-hero-body h1{ font-size:30px; }
  .mag-hero-actions{ justify-content:center; } }

/* ---------- Buttons ---------- */
.btn{ background:#0069ed; color:#fff; border:none; border-radius:5px; padding:9px 18px; cursor:pointer;
  font-size:15px; font-weight:600; text-decoration:none; display:inline-block; }
.btn.ghost{ background:#fff; color:#0069ed; border:1px solid #0069ed; }
.mag-admin-btns{ float:right; font-size:13px; }
.mag-admin-btns .btn{ padding:5px 12px; font-size:13px; }

/* ---------- Library grid ---------- */
.mag-cat{ font-size:15px; font-weight:700; margin:6px 0 14px; padding-bottom:6px; border-bottom:2px solid #0069ed; display:inline-block; }
.mag-cat.second{ margin-top:28px; }
.mag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.mag-card{ cursor:pointer; text-align:center; }
.mag-cov{ position:relative; overflow:hidden; border-radius:4px; box-shadow:0 3px 10px rgba(0,0,0,.16); }
.mag-cov img{ width:100%; display:block; transition:transform .15s; }
.mag-card:hover .mag-cov img{ transform:scale(1.04); }
.mag-cov::after{ content:"Read"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,105,237,.82); color:#fff; font-weight:700; opacity:0; transition:opacity .15s; }
.mag-card:hover .mag-cov::after{ opacity:1; }
.mag-card-t{ font-weight:bold; font-size:13px; margin-top:6px; }

/* ---------- Forms / schedule ---------- */
.fr{ display:grid; gap:12px; margin-bottom:12px; }
.fr.two{ grid-template-columns:1fr 1fr; }
.fr.three{ grid-template-columns:1fr 1fr 1fr; }
.content_box label{ display:block; font-size:13px; font-weight:600; }
.mag-sched td{ border-bottom:1px solid #eee; padding:7px 8px; font-size:13px; }
@media(max-width:600px){ .fr.two,.fr.three{ grid-template-columns:1fr; } }