/* ============================================================
   NEXOLLY — LANDSCAPE CONTENT CARDS + RESPONSIVE SLIDER
   One central stylesheet for: LandscapeMediaThumbnail,
   ProblemLandscapeCard, SolutionLandscapeCard, ResponsiveContentSlider.
   Change the card look HERE and it changes everywhere.

   IMAGE RULE (spec §3/§28): the uploaded image is ALWAYS shown
   complete -- object-fit:contain, never cover, never stretched,
   never zoomed. Leftover space in the 16:9 frame is filled with a
   blurred, darkened copy of the same picture (decorative only).
   ============================================================ */
:root{
  --nxl-surface: var(--nx-tm-surface, #101A2A);
  --nxl-surface2: var(--nx-tm-bg2, #08111D);
  --nxl-border: var(--nx-tm-border, rgba(255,255,255,.09));
  --nxl-text: var(--nx-tm-text, #fff);
  --nxl-muted: var(--nx-tm-muted, #A7B0C0);
  --nxl-green: var(--nx-tm-green, #16A34A);
  --nxl-green-bright: var(--nx-tm-green-bright, #4ADE80);
  --nxl-gap: 16px;
}

/* ---------- Wide container used by slider sections ---------- */
.nx-wide{ width:100%; max-width:1680px; margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .nx-wide{ padding-inline:24px; } }

/* ---------- LandscapeMediaThumbnail (16:9, complete image) ---------- */
.nx-lt{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0B1624; isolation:isolate; }
.nx-lt::before{ content:""; position:absolute; inset:-14%; z-index:0; background:var(--nx-lt-bg, none) center/cover no-repeat; filter:blur(22px) saturate(1.15) brightness(.62); transform:translateZ(0); }
.nx-lt img.nx-lt-img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:transparent; }
.nx-lt-ph{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0A5636,#08111D 70%); }
.nx-lt-ph img{ width:34%; max-width:140px; height:auto; opacity:.9; object-fit:contain; }
.nx-lt-locked{ background:linear-gradient(135deg,#3b0d0d,#08111D 75%); }
.nx-lt-locked::before{ display:none; }
.nx-lt-lock{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; }
.nx-lt-lock i{ font-size:38px; color:#fca5a5; }
.nx-lt-lock span{ font-weight:800; letter-spacing:.14em; font-size:12px; color:#fecaca; }

/* ---------- Card shell shared by Problem & Solution ---------- */
.nx-lc{ display:flex; flex-direction:column; height:100%; background:linear-gradient(145deg,var(--nxl-surface),var(--nxl-surface2)); border:1px solid var(--nxl-border); border-radius:16px; overflow:hidden; color:var(--nxl-text); box-shadow:0 10px 30px rgba(0,0,0,.22); transition:transform .15s ease, box-shadow .15s ease; }
.nx-lc:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.32); }
.nx-lc-media{ position:relative; display:block; text-decoration:none; }
.nx-lc-body{ display:flex; flex-direction:column; flex:1 1 auto; gap:8px; padding:14px 16px 16px; }
.nx-lc-cat{ align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nxl-green-bright); background:rgba(22,163,74,.16); padding:3px 10px; border-radius:999px; }
.nx-lc-title{ margin:0; font-size:16.5px; line-height:1.3; font-weight:800; color:var(--nxl-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-transform:none; }
.nx-lc-title a{ color:inherit!important; text-decoration:none; }
.nx-lc-excerpt{ margin:0; font-size:13.5px; line-height:1.5; color:var(--nxl-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nx-lc-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:700; }
.nx-pill{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.nx-pill-free{ background:rgba(22,163,74,.2); color:var(--nxl-green-bright); }
.nx-pill-paid{ background:rgba(245,158,11,.18); color:#FBBF24; }
.nx-pill-urgent{ background:rgba(239,68,68,.2); color:#FCA5A5; }
.nx-lc-price{ color:var(--nxl-text); }
.nx-lc-price .old{ text-decoration:line-through; color:var(--nxl-muted); font-weight:500; margin-right:6px; }
.nx-lc-actions{ display:flex; gap:8px; margin-top:auto; padding-top:6px; flex-wrap:nowrap; }
.nx-lc-btn{ flex:1 1 0; min-width:0; text-align:center; padding:9px 6px; border-radius:10px; font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; text-decoration:none!important; border:1px solid transparent; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:filter .15s ease, background .15s ease; }
.nx-lc-btn-primary{ background:linear-gradient(135deg,var(--nxl-green),#0D9488); color:#fff!important; }
.nx-lc-btn-primary:hover{ filter:brightness(1.1); }
.nx-lc-btn-ghost{ background:var(--nxl-ghost,rgba(255,255,255,.06)); border-color:var(--nxl-border); color:var(--nxl-text)!important; }
.nx-lc-btn-ghost:hover{ background:var(--nxl-ghost-hover,rgba(255,255,255,.12)); }
.nx-lc-urgent-badge{ position:absolute; top:10px; left:10px; z-index:3; }
.nx-lc-locked .nx-lc-title{ font-size:15.5px; }

/* ---------- Plain responsive grid of the same cards (Problems / Solutions pages) ---------- */
.nx-lc-grid{ display:grid; gap:var(--nxl-gap); grid-template-columns:1fr; }
@media (min-width:600px){ .nx-lc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .nx-lc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1400px){ .nx-lc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- ResponsiveContentSlider ----------
   Slider EVERYWHERE (desktop, tablet, mobile). Cards per view follow the
   slider's own width (container queries): 1 (mobile) -> 2 -> 3 -> 4 -> 5 -> 6.
   Cards never shrink below ~270px so the landscape thumbnail stays readable. */
.nx-slider{ position:relative; container-type:inline-size; width:100%; min-width:0; --nx-pv:1; }
.nx-slider-track{ display:flex; gap:var(--nxl-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; padding:4px 2px 10px; cursor:grab; }
.nx-slider-track::-webkit-scrollbar{ display:none; }
.nx-slider-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.nx-slider-track.is-dragging a{ pointer-events:none; }
.nx-slide{ flex:0 0 calc((100% - (var(--nx-pv) - 1) * var(--nxl-gap)) / var(--nx-pv)); min-width:0; scroll-snap-align:start; }
/* mobile: ONE card, almost full width, a sliver of the next one hints at swiping */
.nx-slider{ --nx-pv:1.08; }
@container (min-width:560px){ .nx-slider-track{ --nx-pv:2; } }
@container (min-width:900px){ .nx-slider-track{ --nx-pv:3; } }
@container (min-width:1200px){ .nx-slider-track{ --nx-pv:4; } }
@container (min-width:1560px){ .nx-slider-track{ --nx-pv:5; } }
@container (min-width:1900px){ .nx-slider-track{ --nx-pv:6; } }

.nx-slider-arrow{ position:absolute; top:calc(50% - 40px); z-index:5; width:42px; height:42px; border-radius:50%; border:1px solid var(--nxl-border); background:rgba(8,17,29,.88); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.4); transition:opacity .15s ease, background .15s ease; }
.nx-slider-arrow:hover{ background:var(--nxl-green); }
.nx-slider-arrow[disabled]{ opacity:0; pointer-events:none; }
.nx-slider-prev{ left:-8px; } .nx-slider-next{ right:-8px; }
@media (max-width:599px){ .nx-slider-arrow{ width:36px; height:36px; top:calc(50% - 60px); } .nx-slider-prev{ left:2px; } .nx-slider-next{ right:2px; } }
.nx-slider-dots{ display:flex; justify-content:center; gap:7px; margin-top:4px; flex-wrap:wrap; }
.nx-slider-dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.25); cursor:pointer; }
.nx-slider-dots button.active{ background:var(--nxl-green-bright); width:22px; border-radius:6px; }

/* ---------- Section heading row ---------- */
.nx-lsec{ margin-top:56px; }
.nx-lsec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.nx-lsec-head h2{ margin:0; font-size:clamp(20px,3vw,28px); font-weight:800; color:var(--nxl-text); }
.nx-lsec-head p{ margin:4px 0 0; color:var(--nxl-muted); font-size:14px; }
.nx-lsec-more{ font-weight:800; font-size:14px; color:var(--nxl-green-bright)!important; text-decoration:none; white-space:nowrap; }
.nx-lsec-more:hover{ color:#fff!important; }

/* ---------- Feature-image upload preview (admin / submit forms) ---------- */
.nx-fi{ border:1px dashed var(--nxl-border); border-radius:14px; padding:12px; background:rgba(255,255,255,.03); max-width:560px; }
.nx-fi .nx-lt{ border-radius:10px; }
.nx-fi-status{ margin:10px 0 0; font-size:13px; font-weight:700; color:var(--nxl-green-bright); }
.nx-fi-status.err{ color:#FCA5A5; }
.nx-fi-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

@media (prefers-reduced-motion:reduce){ .nx-slider-track{ scroll-behavior:auto; } .nx-lc{ transition:none; } }

/* Let a slider section break out of a narrower parent .container (large screens show 5-6 cards). */
.nx-bleed{ --nx-bw:min(calc(100vw - 48px), 1680px); width:var(--nx-bw); max-width:none; margin-left:calc(50% - var(--nx-bw) / 2); }
@media (max-width:767px){ .nx-bleed{ --nx-bw:calc(100vw - 24px); } }

/* Dashboard shell: .nx-main is a content-sized flex item; a slider (zero intrinsic width by design)
   must not let it collapse. Let it take the free space. */
.nx-shell > .nx-main{ flex:1 1 auto; min-width:0; }
.nx-content{ min-width:0; }

/* The site layout wraps page content in .main-inner (py-5 mt-5 = ~96px of air). Pull the new
   Problem pages up so the content starts closer to the header, like a modern content site. */
.main-inner .nx-pagetop{ margin-top:-40px; }
@media (min-width:768px){ .main-inner .nx-pagetop{ margin-top:-24px; } }