/* ==========================================================================
   Patil Super Speciality Hospital & IVF — corporate UI (navy + pink accent).
   Layered on top of Tailwind CDN.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:.6rem; padding:.7rem 1.35rem; line-height:1.1;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; cursor:pointer; }
.btn:active { transform:translateY(1px); }
.btn-sm { padding:.5rem 1rem; font-size:.85rem; }
/* Primary CTA = pink/crimson accent (like the reference's red) */
.btn-primary { color:#fff; background:var(--accent); box-shadow:0 10px 22px -12px var(--accent); }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
/* Navy solid */
.btn-navy { color:#fff; background:var(--brand); }
.btn-navy:hover { background:var(--brand-dark); transform:translateY(-1px); }
/* Outlines */
.btn-outline { color:var(--brand); background:#fff; border:1.5px solid color-mix(in srgb,var(--brand) 35%, #fff); }
.btn-outline:hover { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 6%, #fff); }
.btn-outline-accent { color:var(--accent); background:#fff; border:1.5px solid color-mix(in srgb,var(--accent) 40%, #fff); }
.btn-outline-accent:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-white { color:var(--brand); background:#fff; box-shadow:0 10px 24px -12px rgba(0,0,0,.35); }
.btn-white:hover { transform:translateY(-1px); }

/* ---- Colour helpers ----------------------------------------------------- */
.text-brand { color:var(--brand); }
.text-accent { color:var(--accent); }
.bg-brand { background:var(--brand); }
.bg-accent { background:var(--accent); }
.grad-brand { background:linear-gradient(120deg,var(--brand),var(--brand-dark)); }
.grad-accent-brand { background:linear-gradient(120deg,var(--accent),var(--brand)); }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:9999px;
  font-size:.78rem; font-weight:600; background:color-mix(in srgb,var(--accent) 12%, #fff); color:var(--accent-dark); }
.chip-navy { background:color-mix(in srgb,var(--brand) 10%, #fff); color:var(--brand); }

/* Section eyebrow (small pink uppercase label like the reference) */
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }

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

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

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

/* ---- Marquee (partners) ------------------------------------------------- */
@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; }

/* ---- Tabs (specialities / packages) ------------------------------------- */
.tab-btn{ padding:.55rem 1.15rem; border-radius:.55rem; font-weight:600; font-size:.9rem;
  color:#334155; background:#fff; border:1px solid #e2e8f0; transition:all .15s ease; cursor:pointer; white-space:nowrap; }
.tab-btn:hover{ border-color:color-mix(in srgb,var(--brand) 30%,#fff); }
.tab-btn.active{ color:#fff; background:var(--brand); border-color:var(--brand); }

/* ---- Specialty icon card (reference "centers of excellence") ------------ */
.spec-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem;
  padding:1.5rem 1rem; background:#fff; border:1px solid #eef1f6; border-radius:1rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.spec-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(15,35,80,.4); border-color:color-mix(in srgb,var(--accent) 30%,#fff); }
.spec-ico{ display:grid; place-items:center; width:4.25rem; height:4.25rem; border-radius:9999px;
  color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,#fff); transition:all .2s ease; }
.spec-card:hover .spec-ico{ color:#fff; background:var(--accent); }

/* ---- Lightbox ----------------------------------------------------------- */
.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; }

/* ---- Utilities ---------------------------------------------------------- */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

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