/* VedaSurya Services & Therapies listing pages
   Designed to sit alongside the existing styles.css and footer.css. */
:root {
  --vs-cream: #fbf6ec;
  --vs-cream-deep: #f2e7d3;
  --vs-gold: #b99146;
  --vs-gold-dark: #906b2e;
  --vs-ink: #2e271e;
  --vs-muted: #756a5b;
  --vs-border: rgba(122, 91, 43, .18);
}

.vs-listing-page {
  color: var(--vs-ink);
  background: #fcf8f0;
  font-family: "Manrope", Arial, sans-serif;
}
.vs-listing-page *, .vs-listing-page *::before, .vs-listing-page *::after { box-sizing: border-box; }
.vs-listing-page img { max-width: 100%; }
.vs-listing-page a { text-decoration: none; }
.vs-listing-page .header { z-index: 100; }
.vs-listing-page .nav-links > .dropdown > a[aria-current="page"] { color: var(--vs-gold); }

.vs-listing-intro {
  min-height: 330px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(54px, 7vw, 94px) 22px clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(173, 137, 70, .2);
  background:
    radial-gradient(ellipse at 86% 18%, rgba(190, 151, 77, .12), transparent 27%),
    repeating-linear-gradient(135deg, #fcf8ef 0, #fcf8ef 18px, #f7f0e3 18px, #f7f0e3 36px);
}
.vs-listing-intro::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 390px;
  height: 390px;
  right: -115px;
  bottom: -225px;
  border: 1px solid rgba(185, 145, 70, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(185, 145, 70, .035), 0 0 0 58px rgba(185, 145, 70, .025);
}
.vs-listing-intro-inner { width: min(100%, 920px); margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.vs-eyebrow {
  margin: 0 0 14px;
  color: var(--vs-gold-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .21em;
  line-height: 1.5;
  text-transform: uppercase;
}
.vs-listing-intro h1,
.vs-section-heading h2,
.vs-listing-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--vs-ink);
  font-weight: 600;
  letter-spacing: -.025em;
}
.vs-listing-intro h1 { max-width: 900px; margin: 0 auto; font-size: clamp(38px, 5vw, 63px); line-height: .99; }
.vs-listing-intro h1 span { display: block; }
.vs-gold-rule { width: 64px; height: 1px; background: var(--vs-gold); margin: 25px auto 21px; }
.vs-intro-copy { max-width: 680px; margin: 0 auto; color: #655b4e; font-size: 17px; line-height: 1.9; }
.vs-text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: #735421; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.vs-text-link span { font-size: 17px; transition: transform .2s ease; }
.vs-text-link:hover span { transform: translateX(4px); }
.vs-intro-ornament { position: absolute; right: clamp(22px, 7vw, 100px); top: 50%; transform: translateY(-50%); color: rgba(166, 125, 49, .13); font-family: Georgia, serif; font-size: clamp(100px, 16vw, 210px); pointer-events: none; }
.vs-therapy-intro { min-height: 315px; }

.vs-listing-section { width: min(100% - 44px, 1220px); margin: 0 auto; padding: clamp(52px, 6vw, 82px) 0 clamp(60px, 7vw, 90px); }
.vs-section-heading { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.vs-section-heading .vs-eyebrow { margin-bottom: 10px; }
.vs-section-heading h2 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 45px); line-height: 1.06; }
.vs-section-heading > p:last-child { max-width: 640px; margin: 0 auto; color: var(--vs-muted); font-size: 16px; line-height: 1.85; }

.vs-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vs-service-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 253, 248, .97);
  border: 1px solid var(--vs-border);
  color: inherit;
  box-shadow: 0 8px 22px rgba(74, 51, 20, .035);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.vs-service-card:hover, .vs-service-card:focus-visible { transform: translateY(-5px); border-color: rgba(185, 145, 70, .58); box-shadow: 0 18px 36px rgba(74, 51, 20, .11); outline: none; }
.vs-card-image { height: 220px; position: relative; overflow: hidden; background: linear-gradient(135deg, #e8d9be, #f8f0e0 50%, #d8c093); }
.vs-card-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(36, 26, 15, .17), transparent 42%); }
.vs-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.vs-service-card:hover .vs-card-image img { transform: scale(1.045); }
.vs-card-body { padding: 22px 23px 24px; min-height: 225px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.vs-card-number { display: inline-block; margin-bottom: 9px; color: var(--vs-gold-dark); font-size: 9px; letter-spacing: .15em; font-weight: 700; }
.vs-card-body h3, .vs-therapy-card h3 { margin: 0 0 9px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; line-height: 1.06; font-weight: 600; letter-spacing: -.01em; }
.vs-card-body p, .vs-therapy-card p { margin: 0; color: var(--vs-muted); font-size: 12px; line-height: 1.85; }
.vs-card-link { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 20px; color: #88652b; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vs-card-link b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(185, 145, 70, .42); border-radius: 50%; font-size: 14px; font-weight: 500; transition: color .2s, background .2s, transform .2s; }
.vs-service-card:hover .vs-card-link b, .vs-therapy-card:hover .vs-card-link b { background: var(--vs-gold); color: white; transform: translate(2px, -2px); }

.vs-therapy-section { padding-top: clamp(48px, 5.5vw, 72px); }
.vs-therapy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vs-therapy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 315px;
  padding: 27px 27px 22px;
  overflow: hidden;
  color: var(--vs-ink);
  background: linear-gradient(150deg, rgba(255, 253, 248, .98), rgba(249, 241, 226, .85));
  border: 1px solid var(--vs-border);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vs-therapy-card::after { content: ""; position: absolute; right: -38px; top: -35px; width: 120px; height: 120px; border: 1px solid rgba(185, 145, 70, .15); border-radius: 50%; box-shadow: 0 0 0 16px rgba(185, 145, 70, .035); pointer-events: none; }
.vs-therapy-card:hover, .vs-therapy-card:focus-visible { transform: translateY(-4px); border-color: rgba(185, 145, 70, .58); box-shadow: 0 15px 32px rgba(74, 51, 20, .08); outline: none; }
.vs-therapy-symbol { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(185, 145, 70, .48); border-radius: 50%; color: var(--vs-gold-dark); font-size: 25px; font-family: Georgia, serif; }
.vs-therapy-card .vs-card-number { margin-bottom: 10px; }
.vs-therapy-card h3 { font-size: 29px; }
.vs-therapy-card .vs-card-link { margin-top: auto; }
.vs-therapy-note { max-width: 850px; margin: 30px auto 0; text-align: center; color: #837765; font-size: 11px; line-height: 1.8; }

.vs-listing-cta { padding: clamp(44px, 6vw, 75px) 22px; text-align: center; border-top: 1px solid rgba(173, 137, 70, .2); background: repeating-linear-gradient(135deg, #f5ecdc 0, #f5ecdc 18px, #f9f3e8 18px, #f9f3e8 36px); }
.vs-listing-cta .vs-eyebrow { margin-bottom: 9px; }
.vs-listing-cta h2 { margin: 0 0 9px; font-size: clamp(33px, 4vw, 46px); line-height: 1.05; }
.vs-listing-cta > p:not(.vs-eyebrow) { max-width: 610px; margin: 0 auto 22px; color: var(--vs-muted); font-size: 13px; line-height: 1.8; }
.vs-listing-cta .btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 46px; padding: 13px 24px; }

.vs-floating-actions { position: fixed; right: 22px; bottom: 22px; z-index: 99; display: flex; flex-direction: column; gap: 12px; }
.vs-float-btn { width: 54px; height: 54px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; box-shadow: 0 7px 22px rgba(48, 36, 19, .18); cursor: pointer; color: #3d321e; font: 700 23px/1 Arial, sans-serif; }
.vs-whatsapp { color: #fff; background: #168d60; font-size: 17px; }
.vs-call, .vs-top { background: #d0b16f; }
.vs-top { font-size: 25px; }
.vs-float-btn svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.vs-top svg { width: 23px; height: 23px; }
.vs-float-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

/* Preserve the existing site's navigation behaviour on small screens. */
@media (max-width: 900px) {
  .vs-listing-page .nav-links.active { display: flex; }
  .vs-listing-page .nav-links { gap: 10px; }
  .vs-listing-intro { min-height: 290px; }
  .vs-card-image { height: 200px; }
  .vs-service-grid, .vs-therapy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 600px) {
  .vs-listing-intro { min-height: unset; padding: 50px 22px 48px; }
  .vs-listing-intro h1 { font-size: clamp(35px, 10vw, 48px); line-height: 1.02; }
  .vs-intro-copy { font-size: 12px; line-height: 1.85; }
  .vs-intro-ornament { right: 0; opacity: .6; font-size: 105px; }
  .vs-listing-section { width: min(100% - 32px, 500px); padding: 48px 0 56px; }
  .vs-section-heading { margin-bottom: 25px; }
  .vs-section-heading h2 { font-size: 34px; }
  .vs-service-grid, .vs-therapy-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vs-card-image { height: 230px; }
  .vs-card-body { min-height: unset; padding: 20px; }
  .vs-therapy-card { min-height: 265px; padding: 23px; }
  .vs-listing-cta { padding: 46px 22px; }
  .vs-floating-actions { right: 12px; bottom: 13px; gap: 9px; }
  .vs-float-btn { width: 46px; height: 46px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-listing-page *, .vs-listing-page *::before, .vs-listing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}



/* Discuss a Therapy(in therapies page) AND Begin Your Wellness Journey→ (IN Services page ) - CTA Button */
.vs-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 28px;
    background: var(--gold);
    border-color: var(--gold);
    color: black;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Arrow Styling */
.vs-text-link span {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Hover Effect */
.vs-text-link:hover {
    background: #FBF6EC;
    color: var(--gold2);
    transform: translateY(-2px);
}

.vs-text-link:hover span {
    transform: translateX(5px);
}

/* Keyboard Accessibility */
.vs-text-link:focus-visible {
    outline: 2px solid var(--gold2);
    outline-offset: 4px;
}