/* ============================================================
   SOUL WAVES: Subpage Styles
   Shared across all service detail pages
   ============================================================ */

/* ---- Page hero — Option B: diagonal image bleed ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--sw-dark);
  color: var(--sw-cream);
  min-height: 100vh;
  padding-top: 180px;
  padding-bottom: 60px;
}

/* Diagonal gold shimmer — identical to about/contact sections */
.page-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 35%, rgba(191, 149, 63, 0.15) 50%, transparent 65%);
  filter: blur(50px);
}

/* Image: diagonal bleed from right */
.page-hero__img-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 1;
}

.page-hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.88);
}

/* Copper overlay on image — same weight as homepage hero */
.page-hero__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(197, 120, 60, 0.14);
  pointer-events: none;
}

/* Horizontal dark→image gradient blend + bottom fade to match seam start */
.page-hero__blend {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 55%, var(--sw-dark) 100%),
    linear-gradient(to right, var(--sw-dark) 40%, rgba(26, 10, 10, 0.88) 50%, rgba(26, 10, 10, 0.3) 65%, transparent 78%);
  z-index: 2;
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 4;
}

/* Text + CTA constrained to left half */
.page-hero__label,
.page-hero__h1,
.page-hero__lead,
.page-hero .btn-primary {
  max-width: 500px;
}

.page-hero .btn-primary {
  margin-top: 0;
}

.page-hero__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper);
  margin-bottom: 1.25rem;
  opacity: 0.8;
}

.page-hero__h1 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  color: var(--sw-cream);
  line-height: 1.25;
  margin-bottom: 2rem;
}

.page-hero__lead {
  font-size: 1.05rem;
  color: rgba(255, 248, 236, 0.82);
  line-height: 1.75;
  margin: 0;
  text-shadow: 0 1px 8px rgba(26, 10, 10, 0.5);
}

@media (max-width: 768px) {
  .page-hero {
    padding-top: 100px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-hero .container {
    padding-top: 0;
    padding-bottom: 0;
  }

  .page-hero__img-wrap {
    width: 100%;
    clip-path: none;
    opacity: 0.55;
  }

  .page-hero__img-wrap img {
    object-position: center 30%;
  }

  .page-hero__blend {
    background:
      linear-gradient(to bottom, transparent 60%, var(--sw-dark) 100%),
      linear-gradient(
        148deg,
        rgba(26, 10, 10, 0.84) 0%,
        rgba(26, 10, 10, 0.76) 28%,
        rgba(26, 10, 10, 0.48) 58%,
        rgba(26, 10, 10, 0.18) 100%
      );
  }

  .page-hero__label {
    margin-bottom: 1rem;
  }

  .page-hero__h1 {
    font-size: 2.4rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
  }

  .page-hero__label,
  .page-hero__h1,
  .page-hero__lead,
  .page-hero .btn-primary {
    max-width: 100%;
  }
}

/* ---- Page content — light section ---- */
.page-content {
  background-color: var(--sw-cream);
  color: var(--sw-brown);
  padding-top: 60px;
  padding-bottom: 40px;
}

.page-content .container {
  max-width: 860px;
}

.page-content__section {
  margin-bottom: 3rem;
}

.page-content__section-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper);
  margin-bottom: 0.75rem;
}

.page-content p {
  font-size: 1rem;
  color: var(--sw-brown);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  opacity: 0.82;
}

.page-content p:last-child {
  margin-bottom: 0;
}

.page-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.page-content ul li {
  font-size: 0.95rem;
  color: var(--sw-brown);
  padding: 0.35rem 0 0.35rem 1.3rem;
  position: relative;
  line-height: 1.6;
  opacity: 0.82;
}

.page-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sw-copper);
  opacity: 0.65;
}

/* ---- Pricing block ---- */
.pricing-block {
  background: rgba(197, 120, 60, 0.06);
  border: 1px solid rgba(197, 120, 60, 0.18);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
}

.pricing-block__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sw-copper);
  margin-bottom: 1rem;
}

.pricing-block__rows {
  display: flex;
  flex-direction: column;
}

.pricing-block__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(197, 120, 60, 0.1);
  gap: 2rem;
}

.pricing-block__row:last-child {
  border-bottom: none;
}

.pricing-block__row-label {
  font-size: 0.9rem;
  color: var(--sw-brown);
  opacity: 0.78;
  line-height: 1.5;
}

.pricing-block__row-price {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--sw-copper);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Add-on block ---- */
.addon-block {
  background: rgba(197, 120, 60, 0.04);
  border: 1px solid rgba(197, 120, 60, 0.14);
  border-left: 3px solid rgba(197, 120, 60, 0.4);
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.75rem;
  margin-bottom: 2rem;
}

.addon-block__title {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sw-copper);
  margin-bottom: 0.4rem;
}

.addon-block p {
  font-size: 0.875rem;
  color: var(--sw-brown);
  opacity: 0.72;
  line-height: 1.65;
  margin: 0;
}

/* ---- Note block (terms, exclusions) ---- */
.note-block {
  font-size: 0.875rem;
  color: var(--sw-brown);
  opacity: 0.55;
  line-height: 1.7;
  padding: 1rem 0;
  border-top: 1px solid rgba(197, 120, 60, 0.1);
  margin-top: 1rem;
}

/* ---- Page CTA section — dark strip ---- */
.page-cta-section {
  position: relative;
  overflow: hidden;
  background-color: var(--sw-dark);
  color: var(--sw-cream);
  text-align: center;
  padding: 80px 0;
}

.page-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 35%, rgba(191, 149, 63, 0.12) 50%, transparent 65%);
  filter: blur(50px);
}

.page-cta-section .container {
  position: relative;
  z-index: 2;
}

.page-cta__display {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  color: var(--sw-copper);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.page-cta__sub {
  font-size: 0.95rem;
  color: rgba(255, 248, 236, 0.62);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 2.5rem;
}

/* ---- Platform tags ---- */
.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.platform-tag {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sw-brown);
  background: rgba(197, 120, 60, 0.08);
  border: 1px solid rgba(197, 120, 60, 0.2);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .platform-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
  }
}

/* ---- Retainer cards layout on subpage ---- */
.retainer-cards--full {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(5, auto); /* tier, desc, price, hours, list */
  column-gap: 1rem;
  row-gap: 0;
  max-width: 100%;
  margin-bottom: 2rem;
}

/* Subgrid: each card participates in the parent's row tracks so the
   price row aligns at exactly the same height across all three cards */
.retainer-cards--full .retainer-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  padding: 1.5rem;
}

/* On desktop the accordion body must be transparent to the subgrid so its
   children (desc, price, hours, list) become direct grid items and align
   across all three cards. The mobile media query below restores block display
   so the overflow/max-height accordion animation still works. */
.retainer-cards--full .retainer-card__body {
  display: contents;
}

/* Desktop-only tier heading — occupies the first subgrid row in each card */
.retainer-card__tier-desktop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.2;
  display: inline-block;
  margin-bottom: 0.25rem;
  background: linear-gradient(105deg, #8C1C13 40%, #C5783C 50%, #8C1C13 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 8s ease-in-out infinite;
}

@media (max-width: 768px) {
  .retainer-card__tier-desktop {
    display: none;
  }
}

@media (max-width: 600px) {
  .retainer-cards--full .retainer-card__tier {
    text-transform: none;
    font-size: 1.8rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .retainer-cards--full .retainer-card__trigger {
    min-height: 0;
    padding: 0.1rem 0;
  }
}

/* Visual shelf between description zone and price zone */
.retainer-cards--full .retainer-card__price {
  border-top: 1px solid var(--sw-sand);
  padding-top: 1.25rem;
  align-self: end;
}

.retainer-cta-center {
  text-align: center;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .retainer-cards--full {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1.5rem;
  }

  .retainer-cards--full .retainer-card {
    display: block;
    grid-row: auto;
  }

  /* Restore block so accordion overflow/max-height animation works */
  .retainer-cards--full .retainer-card__body {
    display: block;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-top: 140px;
    padding-bottom: 60px;
  }

  .pricing-block {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .page-content .container,
  .page-cta-section .container { padding: 0 1rem; }
  .page-content__section { margin-bottom: 1.5rem; }
  .page-hero { padding-top: 120px; padding-bottom: 2.5rem; }
}


/* ---- Parallax rise: dark CTA section on subpages ---- */
.page-cta-section.will-rise > .container {
  opacity: 0;
  transform: translateY(80px);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

.page-cta-section.is-risen > .container {
  opacity: 1;
  transform: translateY(0);
}