/* ==========================================================================
   WS-C2 core pages family CSS (2026-10-30)
   contact.php, gallery.php, news-and-updates.php, testimonials.php, videos.php
   Uses --jv-* tokens from assets/css/jeevisha-ui.css. Loaded after page-local CSS
   (link sits right after head-common.php), so equal-specificity rules here win.
   ========================================================================== */

/* ---- shared: page hero (contact / gallery / news / testimonials) ---------- */
.vc_row.fullheight h1.text-white { font-family: var(--jv-font-head); }
/* hero H1 must always be visible (split-text intro animation left it at opacity 0) */
.vc_row.fullheight h1.text-white, .vc_row.fullheight h1.text-white * { opacity: 1 !important; visibility: visible !important; }

/* ---- shared: YouTube click-to-load facade --------------------------------- */
.yt-lite { position: relative; cursor: pointer; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.yt-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s, transform .3s; }
.yt-lite:hover img { opacity: 1; transform: scale(1.03); }
.yt-lite .video-play-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(13, 27, 74, .88); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: background-color .2s, transform .2s; }
.yt-lite:hover .video-play-icon { background: var(--jv-green-700); transform: scale(1.08); }
.yt-lite .video-play-icon svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.yt-lite:focus-visible { outline: 3px solid var(--jv-green); outline-offset: -3px; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; display: block; }

/* ---- testimonials + videos: card grid ------------------------------------- */
.jp-testimonials, .video-gallery-section { background: var(--jv-bg-soft) !important; }
.video-gallery-section { padding-top: clamp(110px, 12vw, 150px) !important; padding-bottom: var(--jv-section) !important; }
.jp-testimonials { padding-top: var(--jv-section) !important; padding-bottom: var(--jv-section) !important; }
.video-gallery-section .container, .jp-testimonials .container { max-width: var(--jv-container) !important; }
.testimonial-header { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 4vw, 44px); }
.testimonial-header h2 { font-family: var(--jv-font-head); font-size: var(--jv-fs-h2); line-height: 1.2; font-weight: 700; color: var(--jv-navy); margin: 0 0 .5em; }
.testimonial-header p { font-size: var(--jv-fs-lead); line-height: 1.6; color: var(--jv-muted); margin: 0; }
.video-gallery-header { margin-bottom: clamp(24px, 4vw, 40px); }
.video-gallery-title { font-family: var(--jv-font-head) !important; font-size: var(--jv-fs-h1) !important; line-height: 1.15 !important; font-weight: 700 !important; color: var(--jv-blue) !important; margin: 0 !important; text-align: center; }

.video-grid-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin: 0 0 clamp(16px, 2.5vw, 28px) !important; }
.video-grid-row::before, .video-grid-row::after { display: none !important; }
.video-grid-row > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
@media (max-width: 991.98px) { .video-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .video-grid-row { grid-template-columns: 1fr; } }

.video-card { border-radius: var(--jv-radius) !important; border: 1px solid var(--jv-line) !important; box-shadow: var(--jv-shadow) !important; background: #fff !important; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.video-card-inner { display: flex; flex-direction: column; height: 100%; }
.video-card:hover, .video-card:focus-within { transform: translateY(-4px) !important; box-shadow: var(--jv-shadow-lg) !important; border-color: var(--jv-green) !important; }
.video-card-frame-wrap { flex: none; }
.video-card iframe { height: 100% !important; }
.video-card-body { flex: 1 1 auto; background: #fff !important; color: var(--jv-ink) !important; padding: 18px 20px 20px !important; margin-top: 0 !important; }
.video-card-body::before { display: none !important; }
.video-badge { background: var(--jv-green-50) !important; color: var(--jv-green-700) !important; font-size: .75rem !important; font-weight: 600; letter-spacing: .06em !important; padding: 5px 12px !important; margin-bottom: 10px !important; }
.video-badge-dot { background: var(--jv-green-700) !important; }
.video-card-title { font-family: var(--jv-font-head); font-size: 1.05rem !important; line-height: 1.4 !important; font-weight: 600; color: var(--jv-navy) !important; margin: 0 0 6px !important; }
.video-card-meta { font-size: .875rem !important; line-height: 1.5; color: var(--jv-muted) !important; }
.video-view-all-wrap { text-align: center; margin-top: clamp(16px, 3vw, 32px) !important; }

/* ---- gallery.php: responsive image grid ---------------------------------- */
.jp-3d-gallery { background: var(--jv-bg-soft) !important; padding: var(--jv-section) 0 !important; }
.jp-3d-gallery-title { font-family: var(--jv-font-head); font-size: var(--jv-fs-h2) !important; line-height: 1.2; font-weight: 700 !important; color: var(--jv-navy) !important; margin-bottom: clamp(24px, 4vw, 40px) !important; }
.jp-3d-gallery-main { overflow: visible !important; padding-bottom: 0 !important; }
.jp-3d-gallery-track { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px) !important; padding: 0 !important; transform: none !important; }
.jp-3d-gallery-card, .jp-3d-gallery-card:hover { flex: none !important; height: auto !important; transform: none !important; background: #fff !important; border: 1px solid var(--jv-line); border-radius: var(--jv-radius) !important; box-shadow: var(--jv-shadow) !important; display: flex; flex-direction: column; overflow: hidden; cursor: default; }
.jp-3d-gallery-card:hover { box-shadow: var(--jv-shadow-lg) !important; }
.jp-3d-gallery-card figure { position: relative !important; inset: auto !important; aspect-ratio: 4 / 3; overflow: hidden; background: var(--jv-bg-soft); }
.jp-3d-gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.jp-3d-gallery-card:hover img { transform: scale(1.04); }
.jp-3d-gallery-card figcaption { font-size: .75rem !important; padding: 6px 12px !important; color: #fff !important; background: linear-gradient(to top, rgba(13, 27, 74, .85), rgba(13, 27, 74, 0)) !important; }
.jp-3d-gallery-card header { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto; background: #fff !important; color: var(--jv-ink) !important; padding: 16px 18px 20px !important; flex: 1 1 auto; }
.jp-3d-gallery-card h2 { font-family: var(--jv-font-head); font-size: 1.05rem !important; line-height: 1.35; font-weight: 600; color: var(--jv-navy) !important; margin: 0 0 6px !important; }
.jp-3d-gallery-card em { font-size: .9rem !important; line-height: 1.5; color: var(--jv-muted) !important; }
@media (max-width: 1199.98px) { .jp-3d-gallery-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .jp-3d-gallery-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .jp-3d-gallery-track { grid-template-columns: 1fr; } }

/* ---- news-and-updates.php ------------------------------------------------- */
.jp-section-heading h3 { font-family: var(--jv-font-head); font-size: var(--jv-fs-h2); line-height: 1.2; color: var(--jv-navy) !important; }
.jp-section-heading p { font-size: 1rem !important; color: var(--jv-muted) !important; }
.jp-event-content p { font-size: var(--jv-fs-body); line-height: 1.7; }
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(10px, 1.6vw, 18px) !important; max-width: var(--jv-container) !important; padding: 0 var(--jv-gutter) !important; }
.gallery-grid .imgvideo { height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jv-radius-sm); box-shadow: var(--jv-shadow); background: var(--jv-bg-soft); }
.gallery-grid video.imgvideo { background: #000; object-fit: contain; }
@media (max-width: 1199.98px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 767.98px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 399.98px) { .gallery-grid { grid-template-columns: 1fr !important; } }
.jp-press-grid { max-width: 640px; padding: 0 var(--jv-gutter); }
.jp-press-grid img { height: auto; }

/* ---- contact.php ---------------------------------------------------------- */
/* form card */
.contact-form .jv-field { display: block; margin: 0 0 20px; }
.contact-form .jv-field__label { display: block; margin: 0 0 6px; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--jv-navy); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0 !important; min-height: 48px;
  font-family: var(--jv-font-body); font-size: 16px !important; line-height: 1.5; color: var(--jv-ink);
  background: #fff !important; border: 1.5px solid #8a93ab !important; border-radius: var(--jv-radius-sm) !important; padding: 11px 14px !important;
}
.contact-form textarea { min-height: 180px !important; resize: vertical; }
.contact-form .jv-field--grow textarea { min-height: 252px !important; }
.contact-form ::placeholder { color: #6b7280; opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--jv-green) !important; outline-offset: 1px; border-color: var(--jv-blue) !important; box-shadow: none !important; }
.contact-form [aria-invalid="true"] { border-color: #b00020 !important; }
.contact-form input[type="submit"] {
  background: var(--jv-blue) !important; color: #fff !important; border: 2px solid transparent !important; border-radius: 999px !important;
  min-height: 52px; padding: 12px 34px !important; font-family: var(--jv-font-head); font-size: 1rem !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: none !important; cursor: pointer;
}
.contact-form input[type="submit"]:hover { background: var(--jv-blue-700) !important; opacity: 1; }
.contact-form input[type="submit"]:focus-visible { outline: 3px solid var(--jv-green); outline-offset: 3px; }
.contact-form .font-size-16.opacity-07 { font-size: .9375rem !important; color: var(--jv-muted) !important; opacity: 1 !important; line-height: 1.5; margin: 0 0 16px; }
.contact-form .digitech-message { font-size: 1rem; line-height: 1.5; padding: 12px 16px; border-radius: var(--jv-radius-sm); background: var(--jv-bg-soft); border: 1px solid var(--jv-line); }
.contact-form .digitech-message a { color: var(--jv-blue); text-decoration: underline; }
@media (min-width: 992px) { .contact-form form > .row { align-items: stretch; } }
@media (max-width: 767.98px) {
  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { font-size: 16px !important; }
  .contact-form input[type="submit"] { width: 100%; }
}
.box-shadow-1.pull-up { border: 1px solid var(--jv-line); }
.box-shadow-1.pull-up .fancy-title h2 { font-family: var(--jv-font-head); font-size: var(--jv-fs-h2); line-height: 1.2; font-weight: 700; color: var(--jv-navy); margin: 0 0 .4em; }

/* clinic info + map */
section.vc_row.pt-90.pb-60 { background: var(--jv-bg-soft) !important; padding-top: var(--jv-section) !important; padding-bottom: var(--jv-section) !important; margin-top: 0 !important; }
section.vc_row.pt-90.pb-60 .row { display: flex; flex-wrap: wrap; align-items: stretch; }
@media (max-width: 991.98px) { section.vc_row.pt-90.pb-60 .row > .lqd-column { width: 100%; flex: 0 0 100%; max-width: 100%; } }
.jv-info-card { background: #fff; border: 1px solid var(--jv-line); border-radius: var(--jv-radius); box-shadow: var(--jv-shadow); padding: clamp(20px, 3vw, 32px); height: 100%; box-sizing: border-box; }
.jv-info-card h2 { font-family: var(--jv-font-head); font-size: var(--jv-fs-h3) !important; line-height: 1.3; font-weight: 600; color: var(--jv-navy); margin: 0 0 .6em; }
.jv-info-card p { font-size: var(--jv-fs-body) !important; line-height: 1.7; color: var(--jv-ink) !important; }
.jv-info-card a:not(.jv-btn) { color: var(--jv-blue); text-decoration: underline; overflow-wrap: anywhere; }
.jv-info-card .jv-btn-row { margin-top: 20px; }
.jv-info-card .jv-btn { color: #fff !important; }
section.vc_row.pt-90.pb-60 iframe { display: block; width: 100%; min-height: 360px; border-radius: var(--jv-radius) !important; border: 0; }
@media (max-width: 991.98px) { section.vc_row.pt-90.pb-60 .row > .lqd-column + .lqd-column { margin-top: 20px; } }

/* hero: clear the fixed header so the H1 is not tucked under it */
.vc_row.fullheight { padding-top: 10.5rem !important; padding-bottom: 4.5rem !important; }
@media (max-width: 767.98px) { .vc_row.fullheight { padding-top: 9rem !important; padding-bottom: 3.5rem !important; } }
/* heroes with inline padding-top:2rem !important (contact, gallery): inline wins, so pad the container instead */
.vc_row.fullheight[style*="padding-top"] > .container { padding-top: 8rem; }
@media (max-width: 767.98px) { .vc_row.fullheight[style*="padding-top"] > .container { padding-top: 6.5rem; } }
/* contact: no white gap above hero on tablet/mobile; keep the form card off the screen edge */
main#content > section.vc_row.fullheight:first-child { margin-top: 0 !important; }
@media (max-width: 991.98px) {
  .box-shadow-1.pull-up { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; max-width: calc(100% - 32px); box-sizing: border-box; }
  .contact-form .row { margin-left: 0; margin-right: 0; }
  .contact-form .lqd-column { padding-left: 0; padding-right: 0; }
  section.vc_row.pt-90.pb-60 .row { margin-left: 0; margin-right: 0; }
}