/* ==========================================================================
   Sai Speciality Center - Visual Enhancement Layer
   File: public/css/ssc-enhance.css          Version 1.0 (2026-11-11)

   Loaded last, from resources/views/ssc2026/partials/head.blade.php, so that
   it wins the cascade against ssc-2026-home.css. Several rules below override
   that sheet at EQUAL specificity (.s26-doc-photo img especially), where
   source order is the only tie-breaker. If this link is ever moved earlier,
   the doctor-photo fix silently stops working.

   Additive only. Removing the one <link> reverts every change here.
   ========================================================================== */

/* ---------- tokens: extends the existing --s26-* palette ---------- */
:root {
  --ssc-sh-1: 0 1px 2px rgba(47,74,102,.05), 0 1px 3px rgba(47,74,102,.06);
  --ssc-sh-2: 0 2px 4px rgba(47,74,102,.04), 0 6px 16px -4px rgba(47,74,102,.10);
  --ssc-sh-3: 0 4px 8px rgba(47,74,102,.05), 0 16px 32px -8px rgba(47,74,102,.14);
  --ssc-sh-brand: 0 6px 20px -6px rgba(196,81,63,.45);
  --ssc-r-sm: 10px; --ssc-r-md: 14px; --ssc-r-lg: 18px; --ssc-r-pill: 999px;
  --ssc-ease: cubic-bezier(.4,0,.2,1);
  --ssc-fast: .18s var(--ssc-ease);
  --ssc-line-soft: rgba(47,74,102,.09);
}

/* ---------- typography: body was inheriting Tailwind's --font-sans ---------- */
html body, body.s26-body, .s26, .s26 p, .s26 li, .s26 span, .s26 a,
.s26 button, .s26 input, .s26 select, .s26 textarea,
.ssc-form-section, .ssc-form-section input, .ssc-form-section select,
.ssc-form-section textarea { font-family: var(--s26-font); }

.s26 p, .s26 li { letter-spacing: -.003em; }
.s26-lead { font-size: clamp(15.5px,1.05vw,17px); line-height: 1.68; color: var(--s26-body); max-width: 68ch; }
.s26 h1, .s26-hl, .s26-sec-title { letter-spacing: -.021em; text-wrap: balance; }
.s26-sec-title { font-size: clamp(25px,2.4vw,34px); line-height: 1.22; }
.s26-hl { line-height: 1.12; }

/* ---------- section eyebrows ---------- */
.s26-tag { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .13em; font-weight: 700; font-size: 11.5px; }
.s26-tag::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; flex: none; }
.s26-hero .s26-tag::before, .s26-tag-gold::before { display: none; }

/* ---------- cards ---------- */
.s26-card, .s26-why-card, .s26-spec, .s26-fac-card, .s26-ec-card,
.s26-cred, .s26-side-box, .s26-touch-box, .s26-post {
  border-radius: var(--ssc-r-md); border: 1px solid var(--ssc-line-soft);
  box-shadow: var(--ssc-sh-1); background: var(--s26-white);
  transition: transform var(--ssc-fast), box-shadow var(--ssc-fast), border-color var(--ssc-fast);
}
/* lift only what is actually clickable */
.s26-spec:hover, .s26-ec-card:hover, .s26-post:hover, .s26-fac-card:hover {
  transform: translateY(-3px); box-shadow: var(--ssc-sh-3); border-color: rgba(74,123,167,.28);
}
.s26-why-card { position: relative; overflow: hidden; padding-left: 22px; }
.s26-why-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--s26-blue), var(--s26-mint)); opacity: .85; }
.s26-why-card:nth-child(2)::before { background: linear-gradient(180deg, var(--s26-mint), var(--s26-gold)); }
.s26-why-card:nth-child(3)::before { background: linear-gradient(180deg, var(--s26-gold), var(--s26-coral)); }
.s26-why-card:nth-child(4)::before { background: linear-gradient(180deg, var(--s26-coral), var(--s26-blue)); }

/* ---------- stats ---------- */
.s26-stats { gap: 18px; }
.s26-stat { border-radius: var(--ssc-r-md); box-shadow: var(--ssc-sh-2);
  border: 1px solid var(--ssc-line-soft);
  background: linear-gradient(180deg, #fff 0%, var(--s26-blue-xl) 100%);
  transition: transform var(--ssc-fast), box-shadow var(--ssc-fast); }
.s26-stat:hover { transform: translateY(-2px); box-shadow: var(--ssc-sh-3); }
.s26-stat b { font-size: clamp(30px,3.2vw,42px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700;
  background: linear-gradient(135deg, var(--s26-blue-d), var(--s26-mint));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.s26-stat span { font-weight: 600; color: var(--s26-ink); letter-spacing: -.005em; }
.s26-stat em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--s26-body); opacity: .82; }

/* ---------- doctor photo: see audit P1 ----------
   dr-kavitha-avatar.webp is a 192x192 source carrying width=420 height=460.
   With width:100%;height:auto in a ~960px column the browser resolved
   object-fit:fill and painted it 961x961 - a 5x upscale AND a stretch.
   Capping the box and forcing the declared ratio crops instead of stretching.
   The real fix is a higher-resolution asset; this is the guard rail. */
.s26-doc-photo { max-width: 420px; }
.s26-doc-photo img {
  width: 100%; height: auto;
  aspect-ratio: 420 / 460;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--ssc-r-lg); box-shadow: var(--ssc-sh-3); background: var(--s26-blue-l);
}
.s26-doc-badge { border-radius: var(--ssc-r-sm); box-shadow: var(--ssc-sh-2); border: 1px solid var(--ssc-line-soft); }
.s26-cred b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.s26-cred span { text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; font-weight: 700; opacity: .72; }

/* ---------- condition links -> chips (28 internal links to money pages) ---------- */
.s26-cond-grid { gap: 26px 30px; }
.s26-cond-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--s26-ink); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--s26-blue-l); }
.s26-cond-col ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.s26-cond-col li { margin: 0; }
.s26-cond-col li a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  border-radius: var(--ssc-r-pill); background: var(--s26-white); border: 1px solid var(--ssc-line-soft);
  box-shadow: var(--ssc-sh-1); font-size: 14px; font-weight: 500; line-height: 1.25;
  color: var(--s26-ink); text-decoration: none; transition: all var(--ssc-fast); }
.s26-cond-col li a:hover, .s26-cond-col li a:focus-visible {
  background: var(--s26-blue-d); border-color: var(--s26-blue-d); color: #fff;
  transform: translateY(-1px); box-shadow: var(--ssc-sh-2); }

/* ---------- buttons: radius was 8/10/14 in three places ---------- */
.s26-btn, .ssc-form-btn, .s26-mb-call, .s26-mb-book {
  border-radius: var(--ssc-r-sm); font-weight: 650; letter-spacing: -.005em;
  transition: transform var(--ssc-fast), box-shadow var(--ssc-fast), background-color var(--ssc-fast), filter var(--ssc-fast); }
.s26-btn-coral, .ssc-form-btn { box-shadow: var(--ssc-sh-brand); }
.s26-btn:hover, .ssc-form-btn:hover { transform: translateY(-2px); filter: saturate(107%); }
.s26-btn-coral:hover, .ssc-form-btn:hover { box-shadow: 0 10px 26px -8px rgba(196,81,63,.55); }
.s26-btn:active, .ssc-form-btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
.s26-btn-line { border-width: 1.5px; }
.s26-btn-line:hover { background: var(--s26-blue-l); }

/* ---------- article cards ---------- */
.s26-post { overflow: hidden; }
.s26-post-img { border-radius: var(--ssc-r-md) var(--ssc-r-md) 0 0; }
.s26-post-title { letter-spacing: -.012em; line-height: 1.34; text-wrap: pretty; }
.s26-post:hover .s26-post-title { color: var(--s26-blue-d); }
.s26-post-date { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; opacity: .7; }
.s26-post-more { font-weight: 650; }
.s26-post-more::after { content: " \2192"; display: inline-block; transition: transform var(--ssc-fast); }
.s26-post:hover .s26-post-more::after { transform: translateX(4px); }

/* ---------- forms (the conversion point) ---------- */
.ssc-form-input, .ssc-form-select, .ssc-form-textarea {
  border-radius: var(--ssc-r-sm); border: 1.5px solid #D7DEE6; background: #fff;
  transition: border-color var(--ssc-fast), box-shadow var(--ssc-fast); font-size: 15.5px; }
.ssc-form-input:hover, .ssc-form-select:hover, .ssc-form-textarea:hover { border-color: #B9C6D4; }
.ssc-form-input:focus, .ssc-form-select:focus, .ssc-form-textarea:focus {
  outline: none; border-color: var(--s26-blue); box-shadow: 0 0 0 4px rgba(74,123,167,.16); }
.ssc-form-label { font-weight: 650; font-size: 13.5px; color: var(--s26-ink); letter-spacing: -.005em; }
.ssc-req { color: var(--s26-coral); }
.ssc-form-btn { width: 100%; border-radius: var(--ssc-r-sm); }
@media (min-width: 721px) { .ssc-form-btn { width: auto; } }

/* ---------- accessibility: no focus ring existed anywhere (WCAG 2.4.7) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--s26-blue); outline-offset: 3px; border-radius: 6px; }
.s26-btn-coral:focus-visible, .ssc-form-btn:focus-visible { outline-color: var(--s26-coral-d); }
.s26-skip:focus-visible { position: fixed; top: 12px; left: 12px; z-index: 9999; background: #fff;
  padding: 12px 18px; border-radius: var(--ssc-r-sm); box-shadow: var(--ssc-sh-3); }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .s26-cond-col li a { min-height: 40px; }      /* thumb-friendly tap target */
  .s26-doc-photo { max-width: 320px; margin-inline: auto; }
}
/* ssc-2026.css already clears the Call/Book bar with
   body.s26-has-mbar{padding-bottom:64px} at this breakpoint, so no padding
   rule is added here - the audit was wrong to call the footer overlapped. */
@media (max-width: 560px) {
  .s26-mbar { box-shadow: 0 -4px 20px -6px rgba(47,74,102,.22); }
  .s26-mb-call, .s26-mb-book { min-height: 50px; font-weight: 700; letter-spacing: -.005em; }
  .s26-stat b { font-size: 30px; }
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print { .s26-mbar, .s26-sticky, .s26-topbar { display: none !important; } }