/* ==========================================================
   Maa Gayatri Hospital & Trauma Centre — shared styles (v2)
   Tailwind (CDN) handles layout and colour utilities.
   This file: language switch, buttons, banner & photo slots,
   slider, gallery, lightbox and forms.
   ========================================================== */

/* ---------- Language switching ---------- */
[data-l] { display: none; }
html[data-lang="en"] [data-l="en"],
html[data-lang="hi"] [data-l="hi"],
html[data-lang="hg"] [data-l="hg"] { display: inline; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Bricolage Grotesque", "Mukta", system-ui, sans-serif;
  background: #F5FAF8;
  color: #13201D;
  -webkit-font-smoothing: antialiased;
}
html[data-lang="hi"] body { font-family: "Mukta", "Bricolage Grotesque", system-ui, sans-serif; }
html[data-lang="hi"] h1, html[data-lang="hi"] h2, html[data-lang="hi"] h3 { line-height: 1.3; }
html[data-lang="hi"] p, html[data-lang="hi"] li, html[data-lang="hi"] dd { line-height: 1.7; }
.font-deva { font-family: "Mukta", sans-serif; }
.text-balance { text-wrap: balance; }
:focus-visible { outline: 3px solid #F2A81D; outline-offset: 2px; border-radius: 8px; }

.skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 100; background: #F2A81D; color: #13201D; padding: .6rem 1rem; border-radius: .6rem; font-weight: 600; }
.skip-link:focus { left: .5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.35rem; border-radius: 1rem;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn svg { flex-shrink: 0; }
.btn-alarm { background: linear-gradient(135deg, #EF4444, #D62828); color: #fff; box-shadow: 0 10px 24px -10px rgba(214,40,40,.7); }
.btn-alarm:hover { filter: brightness(1.07); }
.btn-marigold { background: linear-gradient(135deg, #FBBF24, #F59E0B 55%, #F97316); color: #1B1405; box-shadow: 0 10px 24px -12px rgba(245,158,11,.8); }
.btn-marigold:hover { filter: brightness(1.05); }
.btn-scrub { background: linear-gradient(135deg, #0F766E, #0E4D45); color: #fff; box-shadow: 0 10px 24px -12px rgba(14,77,69,.8); }
.btn-scrub:hover { filter: brightness(1.12); }
.btn-white { background: #fff; color: #13201D; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.btn-white:hover { background: #FFF7E6; }
.btn-glass { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.22); }
.btn-outline { color: #0E4D45; box-shadow: inset 0 0 0 1.5px #0E4D45; background: #fff; }
.btn-outline:hover { background: #0E4D45; color: #fff; }
.btn-whatsapp { background: linear-gradient(135deg, #25D366, #128C4A); color: #fff; }
.btn-whatsapp:hover { filter: brightness(1.06); }

/* ---------- Language switch ---------- */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.14); }
.lang-switch button { padding: .28rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.88); line-height: 1.15; }
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: #FBBF24; color: #1B1405; }

/* ---------- Live dot ---------- */
.pulse-dot { position: relative; display: inline-block; flex-shrink: 0; width: .55rem; height: .55rem; border-radius: 999px; background: #FF5A4E; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mgh-pulse 1.8s ease-out infinite; }
.pulse-dot.is-green { background: #34D399; }
@keyframes mgh-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }

.sign-name { line-height: 1.12; letter-spacing: -.01em; }

/* ---------- Banner & photo slots ----------
   Any element with an <img onload="…has-img"> child:
   - no image file → colourful gradient + artwork shows
   - image file present → photo shows, artwork hides, text gets a dark shade */
.banner-shade { opacity: 0; transition: opacity .3s ease; }
.has-img > .banner-shade {
  opacity: 1;
  background: linear-gradient(90deg, rgba(5,28,25,.9) 0%, rgba(5,28,25,.66) 45%, rgba(5,28,25,.18) 100%);
}
.has-img > .deco, .has-img .banner-art, .has-img > .photo-art { display: none !important; }
.photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.22) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}
.photo.has-img::before { display: none; }

/* ---------- Slider ---------- */
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
[data-dot] { width: .6rem; height: .6rem; border-radius: 999px; background: rgba(255,255,255,.5); transition: width .3s ease, background-color .3s ease; }
[data-dot][aria-current="true"] { width: 1.9rem; background: #FBBF24; }
[data-slider-pause] .icon-play { display: none; }
[data-slider-pause][aria-pressed="true"] .icon-pause { display: none; }
[data-slider-pause][aria-pressed="true"] .icon-play { display: block; }

/* ---------- Gallery ---------- */
.gal-item .photo:not(.has-img) ~ [data-open] { cursor: default; }
.gal-item .photo.has-img ~ [data-open] { cursor: zoom-in; }
.gal-item .photo:not(.has-img) ~ figcaption { background: linear-gradient(to top, rgba(0,0,0,.28), transparent); }
.gal-item img { transition: transform .5s ease; }
.gal-item:hover img { transform: scale(1.04); }
[data-filter] { transition: background-color .15s ease, color .15s ease; }
[data-filter][aria-pressed="true"] { background: #0E4D45; color: #fff; border-color: #0E4D45; }

/* ---------- Lightbox ---------- */
.lightbox { padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgba(4,18,16,.92); }
.lightbox .lb-stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 4.5rem 1rem; }
.lightbox img { max-width: min(1100px, 100%); max-height: 76vh; border-radius: 1rem; object-fit: contain; }
.lightbox figcaption { color: #fff; margin-top: 1rem; text-align: center; font-weight: 600; font-size: 1.1rem; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.lb-btn:hover { background: rgba(255,255,255,.26); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Menu icon swap ---------- */
[data-menu-toggle] .icon-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-open { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-close { display: block; }

/* ---------- FAQ ---------- */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icon { transition: transform .2s ease; }
.faq[open] .faq-icon { transform: rotate(45deg); }

/* ---------- Opening hours: today ---------- */
[data-dow].is-today { background: #059669; color: #fff; box-shadow: 0 8px 18px -8px rgba(5,150,105,.8); }
[data-dow].is-today span { color: #fff; }

/* ---------- Forms ---------- */
.label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.field { width: 100%; min-height: 3rem; border-radius: .9rem; border: 1.5px solid #C4D6CE; background: #fff; padding: .7rem .9rem; font-size: 1rem; color: #13201D; }
.field::placeholder { color: rgba(19,32,29,.45); }
.field:focus { outline: none; border-color: #0F766E; box-shadow: 0 0 0 4px rgba(15,118,110,.16); }
.field[aria-invalid="true"] { border-color: #D62828; }
textarea.field { min-height: 7rem; resize: vertical; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@media (max-width: 767px) { body { padding-bottom: 4.5rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot::after { animation: none; }
  .slide, .slide.is-active, [data-dot], .gal-item img, .btn, .banner-shade { transition: none; }
  .gal-item:hover img { transform: none; }
}