/* ==========================================================================
   Hospital23 — custom CSS layered on top of Tailwind CDN.
   Includes the spotlight "glow card" ported from card.md.
   ========================================================================== */

/* ---- Buttons (backed by --brand so admin colour changes propagate) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:9999px; padding:.7rem 1.4rem; line-height:1;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; cursor:pointer; }
.btn:active { transform:translateY(1px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 10px 24px -10px var(--brand); }
.btn-primary:hover { box-shadow:0 14px 30px -8px var(--brand); transform:translateY(-1px); }
.btn-outline { color:var(--brand-dark); background:transparent; border:1.5px solid var(--brand); }
.btn-outline:hover { background:color-mix(in srgb, var(--brand) 10%, transparent); }
.btn-white { color:var(--brand-dark); background:#fff; box-shadow:0 10px 24px -12px rgba(0,0,0,.4); }
.btn-white:hover { transform:translateY(-1px); }

.text-brand { color:var(--brand); }
.bg-brand { background:var(--brand); }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:9999px;
  font-size:.8rem; font-weight:600; background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand-dark); }

/* ---- Scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---- Navbar (floating pill, from navbar.md) ---- */
.nav-shell{ transition:all .3s ease; }

/* ---- Banner carousel ---- */
.banner-track{ display:flex; transition:transform .8s cubic-bezier(.4,0,.2,1); will-change:transform; }
.banner-slide{ min-width:100%; }

/* ---- Testimonials horizontal scroller ---- */
.hscroll{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:1rem; -ms-overflow-style:none; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ---- Marquee (partners / logos) ---- */
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee{ display:flex; width:max-content; gap:3rem; animation:marquee 28s linear infinite; }
.marquee:hover{ animation-play-state:paused; }

/* ==========================================================================
   Spotlight Glow Card — ported from card.md (React) to plain CSS/JS.
   Pointer coordinates (--x/--y/--xp) are set by app.js on pointermove.
   ========================================================================== */
.glow-card{
  --base: 210; --spread: 200; --radius: 16; --border: 2; --size: 200;
  --outer: 1;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));
  --backdrop: hsl(0 0% 60% / 0.10);
  position:relative; border-radius:calc(var(--radius)*1px);
  border:var(--border-size) solid var(--backdrop);
  background-color:var(--backdrop);
  background-image: radial-gradient(
      var(--spotlight-size) var(--spotlight-size) at
      calc(var(--x,0)*1px) calc(var(--y,0)*1px),
      hsl(var(--hue) 90% 70% / .12), transparent);
  background-size: calc(100% + (2*var(--border-size))) calc(100% + (2*var(--border-size)));
  background-position:50% 50%; background-attachment:fixed;
  backdrop-filter: blur(4px);
  box-shadow:0 1rem 2rem -1rem rgba(2,6,23,.5);
  touch-action:none;
}
.glow-card[data-glow-color="blue"]   { --base:220; --spread:200; }
.glow-card[data-glow-color="purple"] { --base:280; --spread:300; }
.glow-card[data-glow-color="green"]  { --base:120; --spread:200; }
.glow-card[data-glow-color="red"]    { --base:0;   --spread:200; }
.glow-card[data-glow-color="orange"] { --base:30;  --spread:200; }

.glow-card::before,
.glow-card::after{
  content:""; position:absolute; inset:calc(var(--border-size)*-1); pointer-events:none;
  border:var(--border-size) solid transparent; border-radius:calc(var(--radius)*1px);
  background-attachment:fixed; background-repeat:no-repeat; background-position:50% 50%;
  background-size: calc(100% + (2*var(--border-size))) calc(100% + (2*var(--border-size)));
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  -webkit-mask-clip:padding-box,border-box; mask-clip:padding-box,border-box;
  -webkit-mask-composite:source-in,xor; mask-composite:intersect;
}
.glow-card::before{
  background-image: radial-gradient(
      calc(var(--spotlight-size)*.75) calc(var(--spotlight-size)*.75) at
      calc(var(--x,0)*1px) calc(var(--y,0)*1px),
      hsl(var(--hue) 90% 55% / 1), transparent 100%);
  filter:brightness(1.5);
}
.glow-card::after{
  background-image: radial-gradient(
      calc(var(--spotlight-size)*.5) calc(var(--spotlight-size)*.5) at
      calc(var(--x,0)*1px) calc(var(--y,0)*1px),
      hsl(0 100% 100% / .8), transparent 100%);
}

/* Dark surface for cards on light sections */
.glow-card.on-dark{ --backdrop: hsl(222 47% 11% / .9); color:#e2e8f0; }

/* ---- Lightbox (gallery) ---- */
.lightbox{ position:fixed; inset:0; z-index:80; display:none; place-items:center;
  background:rgba(2,6,23,.9); padding:1.5rem; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:.75rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee, .animate-floaty { animation:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}