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

:root{
  --header-h: 60px;
  --sidebar-w: 220px;
  --menu-btn-size: 45px;
  --menu-btn-gap: 12px;

  --brand: #111c4e;
  --brand-hover: #0e173d;

  --card-img: url('/Main_Images/imgs/placeholder-card-orange.svg');

  --nf-panel: #0f141a;
  --nf-text: #e5e7eb;
}

html, body{ max-width:100%; overflow-x:hidden; }
body{ background:#f5f5f5; line-height:1.6; padding-top: var(--header-h); }
.container{ display:flex; min-height: calc(100vh - var(--header-h)); }

.main-content{
  font-family: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  flex:1; margin-left: var(--sidebar-w); padding:30px; background:#f5f5f5; transition: margin-left .3s ease;
  -webkit-user-select:text; user-select:text;
}

.sidebar .nav-links a.active,
.sidebar .nav-links a.selected{ color:#fff !important; font-weight:700; }
.sidebar .nav-links a.active i,
.sidebar .nav-links a.selected i{ color:#fff !important; }

.content-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.content-header--hero{ margin-top:6px; margin-bottom:12px; }

.page-title{ font-size:28px; font-weight:800; color:#2c3e50; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.action-group{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }

/* ===================== See All button ===================== */
.see-all-btn, .see-all-btn:link, .see-all-btn:visited{
  background:var(--brand); color:#fff; padding:10px 20px; border:none; border-radius:25px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition: all .3s ease;
  display:flex; align-items:center; gap:8px; margin-left:auto; white-space:nowrap;
}
.see-all-btn:hover{ background:var(--brand-hover); transform: translateY(-2px); }

@media (min-width: 769px){
  .see-all-btn .see-all-text{ display:inline; }
  .see-all-btn .see-all-icon{ display:inline; }
}
@media (max-width: 768px){
  .see-all-btn{ padding:10px; width:44px; height:44px; border-radius:12px; justify-content:center; }
  .see-all-btn .see-all-text{ display:none; }
  .see-all-btn .see-all-icon{ display:inline-block; }
}

/* Carousel controls */
.carousel-btn{
  width:40px; height:40px; border:none; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease; box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.carousel-btn i{ font-size:14px; }
.carousel-btn:hover{ background:var(--brand-hover); transform: translateY(-1px); }
.carousel-btn.is-disabled{ opacity:.4; pointer-events:none; }

/* ===================== RECOMMENDED (hero) ===================== */
.nf-spotlight{
  position:relative; border-radius:16px; overflow:hidden; background:var(--nf-panel);
  height: clamp(320px, 42vw, 520px);
  margin-bottom: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.nf-spotlight::before{
  content:""; position:absolute; inset:0; background-image: var(--bg, var(--card-img)); background-size: cover; background-position:center;
  filter: brightness(.9) saturate(1.05); transform: scale(1.02);
}
.nf-spotlight__scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.75) 100%), radial-gradient(120% 80% at 10% 10%, rgba(17,28,78,.55) 0%, rgba(17,28,78,0) 60%);
}

/* TOP-LEFT placement of content */
.nf-spotlight__inner{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding: clamp(16px, 3vw, 28px);
}
.nf-spotlight__text{ color:#fff; max-width: 1100px; }
.nf-spotlight__kicker{ font-weight:800; letter-spacing:.2em; text-transform:uppercase; opacity:.9; }

.nf-spotlight__title{
  font-size: clamp(22px, 4.4vw, 46px);
  line-height:1.04; font-weight:900; text-shadow: 0 6px 22px rgba(0,0,0,.5); margin: 6px 0 8px;
}
.nf-spotlight__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.nf-spotlight__tags span{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-size:12px; letter-spacing:.4px; }

/* IMPORTANT: preserve DB spacing + justify on desktop */
.nf-spotlight__desc{
  color:var(--nf-text);
  max-width: 84ch;
  margin-top: 14px;
  /* show DB newlines and justify text */
  white-space: pre-line;
  text-align: justify;
  /* clamp for long blurbs */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero footer (CTA / More Info) */
.nf-spotlight__footer{
  position:absolute; right: clamp(16px, 3vw, 28px); bottom: clamp(12px, 2.4vw, 20px); z-index:3;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.nf-cta, .nf-cta:link, .nf-cta:visited{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; min-height:44px;
  background: var(--brand); color:#fff; text-decoration:none !important; border-radius:10px;
  font-weight:900; letter-spacing:.3px; font-size:13px;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nf-cta:hover{ transform:translateY(-2px); background: var(--brand-hover); text-decoration:none !important; }
.nf-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; min-height:44px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:10px; font-weight:800; font-size:13px; cursor:pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nf-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }

/* Hero arrows */
.nf-spotlight__ctrl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:42px; height:42px;
  border:none; border-radius:12px; display:grid; place-items:center; color:#fff; cursor:pointer;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0; transition:opacity .18s ease, background .18s ease, transform .18s ease;
}
.nf-spotlight:hover .nf-spotlight__ctrl,
.nf-spotlight:focus-within .nf-spotlight__ctrl{ opacity:1; }
.nf-spotlight__ctrl:hover,
.nf-spotlight__ctrl:focus-visible,
.nf-spotlight__ctrl:active{ background:rgba(0,0,0,.38); transform:translateY(-50%) scale(1.04); }
.nf-spotlight__ctrl.prev{ left:12px; }
.nf-spotlight__ctrl.next{ right:12px; }

/* Empty state */
.nf-empty{ background:#fff; border:1px dashed #cbd5e1; border-radius:12px; padding:20px; color:#475569; margin-bottom:18px; }

/* ===================== Cards ===================== */
.cards-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:25px; margin-bottom:40px; min-width:0;
}
.card{
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.08); transition: all .3s ease; border:1px solid #e5e7eb; min-width:0;
}
.card:hover{ transform: translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.12); }

.card-image{ position:relative; height:180px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0b0b0b; }
.card-image::before{ content:""; position:absolute; inset:0; background-image: var(--thumb, var(--card-img)); background-position:center; background-repeat:no-repeat; background-size: cover; filter: blur(24px) saturate(1.05) brightness(.92); transform: scale(1.2); z-index:0; }
.card-image::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.26), transparent 18%, transparent 82%, rgba(0,0,0,.26)); pointer-events:none; z-index:1; }
.card-image img{ position:relative; z-index:2; width:100%; height:100%; object-fit: contain; object-position: center; display:block; }

.card-content{ padding:20px; }
.card-meta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.card-meta .tag{ padding:6px 10px; border-radius:999px; background:#EEF2FF; color:#1E3A8A; font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.card-title{ font-size:18px; font-weight:800; color:#0f172a; margin-bottom:8px; letter-spacing:.3px; }

/* Hidden raw description container (used by modal). Keep justify in case this is revealed elsewhere. */
.card-desc{
  white-space: pre-line;
  text-align: justify;
}

/* Card actions */
.card-actions{ display:flex; gap:10px; margin-top:auto; margin-bottom:12px; min-width:0; }
.learn-more-btn, .learn-more-btn:link, .learn-more-btn:visited, .view-details-btn{
  flex:1 1 50%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 12px; min-height:30px; border-radius:8px; font-size:13px;
  font-weight:800; letter-spacing:.3px; line-height:1; width:auto; margin-top:15px;
}
.learn-more-btn, .learn-more-btn:link, .learn-more-btn:visited{
  background:var(--brand); color:#fff; border:none; text-decoration:none; transition: all .25s ease;
}
.learn-more-btn:hover{ background:var(--brand-hover); transform: translateY(-1px); }
.view-details-btn{
  background:#ffffff; color:#0f172a; border:1px solid #d6dbe5; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.view-details-btn:hover{ background:#f8fafc; transform: translateY(-1px); box-shadow:0 6px 18px rgba(2,6,23,.08); }

/* Back to top theme */
.back-to-top, .to-top, .scroll-to-top, #backToTop, #toTopBtn, #toTop{
  background:var(--brand) !important; color:#fff !important; text-decoration:none !important; border:none; border-radius:999px; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.back-to-top:hover, .to-top:hover, .scroll-to-top:hover, #backToTop:hover, #toTopBtn:hover, #toTop:hover{ background:var(--brand-hover) !important; }

/* ===================== SweetAlert (Details) – Theme ===================== */
.swal2-container .swal2-popup{ font-family:'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }

.lr-swal{
  position:relative;
  width:min(860px, 92vw) !important;
  max-width:100%;
  max-height: calc(100dvh - 32px);
  border-radius:16px;
  padding:22px;
  background:#ffffff;
  box-shadow:0 28px 70px rgba(2,6,23,.28);
  animation: lr-pop .18s ease-out;
}
.lr-swal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, var(--brand), #2c3e50);
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.lr-swal--show{ animation: lr-pop .18s ease-out; }
.lr-swal--hide{ animation: lr-fade .14s ease-in; }
.swal2-container{ backdrop-filter: blur(2px); }

/* Layout content */
.lrm{
  display:grid; grid-template-columns: 1fr; grid-template-areas:
  "media"
  "content"; gap:14px; align-items:start;
}
.lrm__media{ grid-area: media; border-radius:12px; overflow:hidden; background:#f1f5f9; }
.lrm__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

.lrm__content{ grid-area: content; }
.lrm__header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lrm__icon{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--brand); background:#f7f9ff; border:1px solid #e8eefc; flex:0 0 auto;
}
.lrm__title{ font-size:20px; font-weight:900; color:#0f172a; margin:0; line-height:1.25; }

.lrm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.lrm-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; background:#EEF2FF; color:#1E3A8A; font-size:12px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
}

.lrm__section-title{
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.14em;
  color:var(--brand); margin:35px 0 6px; opacity:.95;
}

/* IMPORTANT: justify description text; allow natural line breaks from DB */
.lrm__desc{
  color:#334155;
  line-height:1.68;
  font-size:15px;
  max-height: min(58vh, 520px);
  overflow:auto;
  padding-right:6px;
  text-align: justify;
  white-space: pre-line;
  scrollbar-width: thin; scrollbar-color: #c7cdd7 transparent;
}
.lrm__desc::-webkit-scrollbar{ width:8px; }
.lrm__desc::-webkit-scrollbar-thumb{ background:#c7cdd7; border-radius:8px; }
.lrm__desc::-webkit-scrollbar-track{ background:transparent; }

.lr-swal .swal2-actions{ margin-top:14px; }

/* Bottom "Close" (mobile) */
.lr-swal__confirm,
.lr-swal__confirm.swal2-styled,
.swal2-confirm.lr-swal__confirm{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand) !important; color:#fff !important;
  font-weight:900; border-radius:10px; border:1px solid var(--brand);
  padding:12px 18px; min-height:44px;
  box-shadow:0 10px 20px rgba(17,28,78,.25);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lr-swal__confirm:hover{ background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; transform: translateY(-1px); }

/* Top-right X (desktop) */
.lr-swal__close{
  width:44px !important; height:44px !important; aspect-ratio:1 / 1;
  border-radius:10px !important; border:1px solid var(--brand) !important;
  background:var(--brand) !important; color:#fff !important;
  display:grid !important; place-items:center !important; padding:0 !important;
  line-height:1 !important; font-size:22px !important; font-weight:800 !important; text-align:center;
  top:10px !important; right:10px !important;
  box-shadow:0 10px 20px rgba(17,28,78,.25);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lr-swal__close:hover{ background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; transform: translateY(-1px); }

/* Desktop: two-column */
@media (min-width: 720px){
  .lrm{ grid-template-columns: 1.1fr 1.4fr; grid-template-areas: "media content"; gap:18px; }
  .lrm__title{ font-size:22px; }
}

/* === MOBILE (COMPACT like latest.*) === */
@media (max-width: 768px){
  .swal2-container{
    align-items: flex-start !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    z-index: 10000 !important;
  }

  /* tighter popup */
  .lr-swal{
    width:min(90vw, 480px) !important;
    padding:14px 14px 16px;
    border-radius:12px;
    box-shadow:0 20px 48px rgba(2,6,23,.24);
  }

  .lrm{ gap:10px; }
  .lrm__media img{ aspect-ratio:16/9; max-height:180px; }
  .lrm__icon{ width:30px; height:30px; font-size:16px; }
  .lrm__title{ font-size:17px; }
  .lrm-chip{ padding:5px 8px; font-size:10.5px; }
  .lrm__section-title{ margin:16px 0 6px; font-size:11px; }
  .lrm__desc{ font-size:13.5px; max-height:38vh; }

  .lr-swal .swal2-actions{ margin-top:12px; }
  .lr-swal__close{ display:none !important; }           /* hide X on mobile */
  .lr-swal__confirm{ display:flex !important; width:100%; min-height:40px; padding:10px 14px; border-radius:8px; }
}

/* === DESKTOP (keep X, hide bottom button) === */
@media (min-width: 769px){
  .lr-swal__confirm{ display:none !important; }
  .lr-swal__close{ display:grid !important; }
}

/* Animations */
@keyframes lr-pop { from { opacity:0; transform: scale(.96) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }
@keyframes lr-fade{ from { opacity:1; transform: scale(1); } to { opacity:0; transform: scale(.98); } }

/* ======= Mobile hero tweaks ======= */
@media (max-width: 768px){
  .nf-spotlight__desc{ display:none !important; } /* keep hero compact on mobile */
  body{ padding-top: var(--header-h); }
  .main-content{ margin-left:0; padding:20px 15px; padding-top: calc(20px + var(--menu-btn-gap) + var(--menu-btn-size) + 8px); }
  .nf-spotlight{ height: clamp(260px, 50vw, 360px); }

  .nf-spotlight__ctrl{
    width:34px; height:34px;
    top:auto; bottom:12px; transform:none;
    opacity:1;
  }
  .nf-spotlight__ctrl.prev{ left:12px; }
  .nf-spotlight__ctrl.next{ right:auto; left: calc(12px + 34px + 8px); }

  .nf-spotlight__ctrl:hover,
  .nf-spotlight__ctrl:focus-visible,
  .nf-spotlight__ctrl:active{
    background:rgba(0,0,0,.38);
    transform: scale(1.06);
  }

  .nf-spotlight__footer .btn-label{ display:none !important; }
  .nf-spotlight__footer .nf-cta, .nf-spotlight__footer .nf-ghost{
    padding:10px; min-width:44px; min-height:44px; width:44px; height:44px; justify-content:center; gap:0; border-radius:12px; text-decoration:none !important;
  }
  .card-actions .btn-label{ display:none !important; }
  .card-actions .learn-more-btn, .card-actions .view-details-btn{
    padding:10px; min-width:44px; min-height:44px; width:44px; height:44px; justify-content:center; gap:0; border-radius:12px;
  }
}

@media (min-width: 1024px){ .nf-spotlight__footer .nf-ghost{ display:none !important; } }
@media (max-width: 480px){ .nf-spotlight__footer{ right: 12px; bottom: 12px; gap:8px; } }
@media (max-width: 380px){ .nf-spotlight__footer{ flex-direction: column; align-items: flex-end; } }

/* --- Fix: keep card buttons aligned to bottom regardless of title/desc length --- */
.cards-grid{ align-items: stretch; }                 /* make grid rows equal height */
.card{
  display: flex;                                      /* stack sections vertically */
  flex-direction: column;
  height: 100%;                                       /* fill grid track */
}
.card-image{ flex: 0 0 180px; }                       /* keep media height fixed */
.card-content{
  flex: 1 1 auto;                                     /* take remaining space */
  display: flex;                                      /* allow pushing footer down */
  flex-direction: column;
  min-height: 0;                                      /* fix overflow issues */
}
/* .card-actions already has margin-top:auto above to pin it at the bottom */