/* ---------------------------------------------------------------------------
 * Services — single, archive and category templates.
 *
 * Loaded only on Services pages (see inc/services-helpers.php).
 * Colours match vastrologist.com: dark hero bands, gold #c9a25c buttons
 * that turn brown #a75706 on hover, cream #faf3e8 sections, Poppins headings.
 * ------------------------------------------------------------------------ */

/* .vs-sc is the [vs_services] shortcode / widget wrapper, which can sit on
   any page, so it carries the same tokens as the Services templates. */
.vs-services,
.vs-sc {
  --vs-dark: #0a1420;
  --vs-dark-2: #1a202c;
  --vs-gold: #c9a25c;
  --vs-gold-soft: #c79a73;
  --vs-gold-light: #d4a853;
  --vs-brown: #a75706;
  --vs-cream: #faf3e8;
  --vs-cream-2: #fdfaf5;
  --vs-border: #ddd5c9;
  --vs-text: #1a202c;
  --vs-muted: #4a5568;
  --vs-radius: 15px;
  --vs-heading-font: 'Poppins', sans-serif;
  --vs-cols: 3;
  --vs-gap: 30px;

  color: var(--vs-text);
}

.vs-services {
  margin: 0;
  background: var(--vs-cream-2);
}

.vs-sc {
  width: 100%;
}

.vs-services .vs-container {
  width: 100%;
  max-width: var(--global-content-width, 1290px);
  margin: 0 auto;
  padding-left: var(--global-content-edge-padding, 1.5rem);
  padding-right: var(--global-content-edge-padding, 1.5rem);
  box-sizing: border-box;
}

.vs-services h1,
.vs-services h2,
.vs-services h3 {
  font-family: var(--vs-heading-font);
}

.vs-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--vs-heading-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-gold);
}

/* ---- Buttons ------------------------------------------------------------ */

.vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--vs-gold);
  border-radius: var(--vs-radius);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.vs-btn--primary {
  background: var(--vs-gold);
  color: #fff;
}

.vs-btn--primary:hover,
.vs-btn--primary:focus-visible {
  background: var(--vs-brown);
  border-color: var(--vs-brown);
  color: #fff;
  transform: translateY(-2px);
}

.vs-btn--outline {
  background: transparent;
  color: #fff;
}

.vs-btn--outline:hover,
.vs-btn--outline:focus-visible {
  border-color: var(--vs-brown);
  color: var(--vs-gold);
}

.vs-btn--block {
  width: 100%;
}

/* ---- Hero ---------------------------------------------------------------- */

.vs-services-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201, 162, 92, 0.22), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(167, 87, 6, 0.25), transparent 55%),
    linear-gradient(180deg, #000 0%, var(--vs-dark) 100%);
}

/* Subtle star field, drawn in CSS so there is no image to load. */
.vs-services-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(212, 168, 83, 0.9), transparent),
    radial-gradient(1px 1px at 63% 52%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 88% 74%, rgba(212, 168, 83, 0.8), transparent),
    radial-gradient(1px 1px at 6% 84%, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

.vs-services-hero .vs-container {
  position: relative;
  max-width: 900px;
}

.vs-services-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.vs-services-hero__desc,
.vs-services-hero__desc p {
  margin: 0 auto;
  max-width: 680px;
  font-size: 18px;
  line-height: 1.7;
  color: #b8b8b8;
}

.vs-services-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

/* ---- Breadcrumbs --------------------------------------------------------- */

.vs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #b8b8b8;
}

.vs-breadcrumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--vs-gold);
}

.vs-breadcrumbs a {
  color: #b8b8b8;
  text-decoration: none;
}

.vs-breadcrumbs a:hover {
  color: var(--vs-gold-light);
}

.vs-breadcrumbs [aria-current] {
  color: #fff;
}

/* ---- Tags (single hero) -------------------------------------------------- */

.vs-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.vs-tags a {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(201, 162, 92, 0.5);
  border-radius: 999px;
  font-size: 13px;
  color: var(--vs-gold-light);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vs-tags a:hover {
  background: var(--vs-gold);
  color: #fff;
}

/* ---- Category filter (archive) ------------------------------------------- */

.vs-services-listing {
  padding: 70px 0 90px;
}

.vs-service-filter ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.vs-service-filter a {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid var(--vs-border);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: var(--vs-text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vs-service-filter a:hover {
  border-color: var(--vs-gold);
  color: var(--vs-brown);
}

.vs-service-filter a.is-active {
  border-color: var(--vs-gold);
  background: var(--vs-gold);
  color: #fff;
}

/* ---- Card grid ----------------------------------------------------------- */

/* Flex rather than grid so an incomplete last row (1 or 2 cards in a
   3-column layout) is centred. --vs-cols sets cards per row; the shortcode
   passes its "columns" value through it. */
.vs-service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vs-gap);
}

.vs-service-grid > .vs-service-card {
  flex: 0 1 calc((100% - (var(--vs-cols) - 1) * var(--vs-gap)) / var(--vs-cols));
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.vs-service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #efe6d8;
  border-radius: var(--vs-radius);
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(28, 20, 10, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vs-service-card:hover,
.vs-service-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--vs-gold-soft);
  box-shadow: 0 18px 40px -12px rgba(28, 20, 10, 0.22);
}

/* Same idea as the single page: the icon sits contained on a cream panel
   rather than being cropped to fill the card. */
.vs-service-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 28px;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 162, 92, 0.2) 0%, rgba(201, 162, 92, 0) 65%),
    var(--vs-cream);
}

.vs-service-card__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.vs-service-card:hover .vs-service-card__media img {
  transform: scale(1.06);
}

.vs-service-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vs-gold);
}

.vs-service-card__placeholder svg {
  width: 48px;
  height: 48px;
}

.vs-service-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.vs-service-card__cat {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-brown);
}

.vs-service-card__title {
  margin: 0 0 10px;
  font-family: var(--vs-heading-font);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.vs-service-card__title a {
  color: var(--vs-text);
  text-decoration: none;
}

.vs-service-card__title a:hover {
  color: var(--vs-brown);
}

.vs-service-card__excerpt {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--vs-muted);
}

.vs-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 600;
  color: var(--vs-gold);
  text-decoration: none;
}

.vs-service-card__link svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.vs-service-card__link:hover {
  color: var(--vs-brown);
}

.vs-service-card__link:hover svg {
  transform: translateX(4px);
}

/* ---- Pagination ---------------------------------------------------------- */

.vs-pagination {
  margin-top: 56px;
}

.vs-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.vs-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--vs-border);
  border-radius: 12px;
  background: #fff;
  color: var(--vs-text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vs-pagination a.page-numbers:hover {
  border-color: var(--vs-gold);
  color: var(--vs-brown);
}

.vs-pagination .page-numbers.current {
  border-color: var(--vs-gold);
  background: var(--vs-gold);
  color: #fff;
}

.vs-services-empty {
  padding: 60px 24px;
  border: 1px dashed var(--vs-border);
  border-radius: var(--vs-radius);
  background: #fff;
  text-align: center;
}

.vs-services-empty h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.vs-services-empty p {
  margin: 0;
  color: var(--vs-muted);
}

/* ---- Bottom CTA band ----------------------------------------------------- */

.vs-services-cta {
  padding: 0 0 90px;
}

.vs-services-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.vs-services-cta .vs-services-cta__inner {
  padding-top: 44px;
  padding-bottom: 44px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 162, 92, 0.25), transparent 60%),
    linear-gradient(135deg, #000 0%, var(--vs-dark) 100%);
  /* Stays inside the page gutter instead of running edge to edge. */
  max-width: calc(var(--global-content-width, 1290px) - 2 * var(--global-content-edge-padding, 1.5rem));
  width: calc(100% - 2 * var(--global-content-edge-padding, 1.5rem));
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
}

.vs-services-cta h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: #fff;
}

.vs-services-cta p {
  margin: 0;
  color: #b8b8b8;
}

/* ---- Single: content + sidebar ------------------------------------------- */

.vs-service-main {
  padding: 70px 0 80px;
}

.vs-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.vs-service-content {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #efe6d8;
  border-radius: var(--vs-radius);
  background: #fff;
}

/* Featured images on this site are square icons (transparent PNGs), so the
   image sits at a fixed size, centred on a branded panel, instead of
   stretching to the full content width. Photos are contained the same way
   and never cropped. */
.vs-service-content__image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 36px;
  padding: clamp(28px, 5vw, 48px);
  overflow: hidden;
  border: 1px solid #efe6d8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 162, 92, 0.22) 0%, rgba(201, 162, 92, 0) 62%),
    var(--vs-cream);
}

.vs-service-content__image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(160px, 24vw, 240px);
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(167, 87, 6, 0.18));
}

.vs-service-content .entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--vs-muted);
}

.vs-service-content .entry-content > :first-child {
  margin-top: 0;
}

.vs-service-content .entry-content h2,
.vs-service-content .entry-content h3,
.vs-service-content .entry-content h4 {
  margin: 1.8em 0 0.6em;
  color: var(--vs-text);
}

.vs-service-content .entry-content h2 {
  position: relative;
  padding-bottom: 12px;
  font-size: 28px;
}

.vs-service-content .entry-content h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--vs-gold);
}

.vs-service-content .entry-content a {
  color: var(--vs-brown);
}

.vs-service-content .entry-content ul {
  padding-left: 0;
  list-style: none;
}

.vs-service-content .entry-content ul li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 28px;
}

.vs-service-content .entry-content ul li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vs-gold);
}

.vs-service-content .entry-content blockquote {
  margin: 2em 0;
  padding: 20px 28px;
  border-left: 4px solid var(--vs-gold);
  border-radius: 0 12px 12px 0;
  background: var(--vs-cream);
  font-style: italic;
  color: var(--vs-text);
}

/* Sidebar */

.vs-service-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vs-booking-card {
  padding: 34px 30px;
  border-radius: var(--vs-radius);
  text-align: center;
  color: #b8b8b8;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 92, 0.28), transparent 65%),
    linear-gradient(160deg, #000 0%, var(--vs-dark) 100%);
}

.vs-booking-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border: 1px solid rgba(201, 162, 92, 0.5);
  border-radius: 50%;
  color: var(--vs-gold-light);
}

.vs-booking-card__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.vs-booking-card p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
}

.vs-side-card {
  padding: 28px;
  border: 1px solid #efe6d8;
  border-radius: var(--vs-radius);
  background: #fff;
}

.vs-side-card__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.vs-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-side-list li + li {
  border-top: 1px solid #f0e9de;
}

.vs-side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: var(--vs-text);
  text-decoration: none;
  transition: color 0.2s ease, padding 0.2s ease;
}

.vs-side-list a:hover,
.vs-side-list .is-active a {
  padding-left: 6px;
  color: var(--vs-brown);
}

.vs-side-list__count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vs-cream);
  font-size: 12px;
  text-align: center;
  color: var(--vs-brown);
}

/* Related services */

.vs-related-services {
  padding: 80px 0 90px;
  background: var(--vs-cream);
}

.vs-section-head {
  margin-bottom: 44px;
  text-align: center;
}

.vs-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .vs-services .vs-service-grid,
  .vs-sc .vs-service-grid {
    --vs-cols: 2;
    --vs-gap: 24px;
  }

  /* A 1-column shortcode (e.g. in a sidebar) stays at 1. */
  .vs-sc--cols-1 .vs-service-grid {
    --vs-cols: 1;
  }

  .vs-service-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vs-service-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .vs-services-hero {
    padding: 90px 0 64px;
  }

  .vs-services-hero__desc,
  .vs-services-hero__desc p {
    font-size: 16px;
  }

  .vs-services .vs-service-grid,
  .vs-sc .vs-service-grid {
    --vs-cols: 1;
    --vs-gap: 20px;
  }

  .vs-service-card__body {
    padding: 22px 22px 24px;
  }

  .vs-services-listing,
  .vs-service-main {
    padding: 48px 0 60px;
  }

  .vs-service-filter ul {
    margin-bottom: 32px;
  }

  .vs-services-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .vs-services-cta .vs-btn {
    width: 100%;
  }

  .vs-services-hero__actions .vs-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-services *,
  .vs-services *::before,
  .vs-services *::after,
  .vs-sc *,
  .vs-sc *::before,
  .vs-sc *::after {
    transition: none !important;
  }

  .vs-service-card:hover,
  .vs-service-card:focus-within,
  .vs-btn--primary:hover,
  .vs-service-card:hover .vs-service-card__media img {
    transform: none;
  }
}