/* ==========================================================================
   Cardinal Star Healing — page-specific styles (public content pages)
   --------------------------------------------------------------------------
   Only what the individual pages need on top of assets/css/site.css. Every
   color, radius and font comes from the theme variables, never hard-coded.
   Loaded after site.css and before the theme <style>, so :root is never
   redefined here.

   Contents: 1 shared bits (service cards, newsletter block)  2 home  3 about
             4 services  5 learn  6 reviews  7 contact  8 policies  9 unsubscribe
   ========================================================================== */

/* 1. Shared: service cards, newsletter block
   -------------------------------------------------------------------------- */
.service-card { gap: .9rem; }
.service-card .service-head { display: flex; flex-direction: column; gap: .25rem; }
.service-card .card-title { margin: 0; }
.service-card .card-tagline { margin: 0; }
.service-link { color: inherit; text-decoration: none; }
.service-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-link:hover { color: var(--primary-strong); }
.service-card .card-foot .btn, .service-card .meta a { position: relative; z-index: 1; }
.service-card .meta { font-size: .92rem; }
.service-card .meta .icon { color: var(--primary); }
.service-card .card-foot { border-top: 1px solid var(--line); padding-top: 1rem; }
.service-card .price { color: var(--ink); }
.service-kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.service-kicker .card-dot { width: .6rem; height: .6rem; }
.service-desc-short { color: var(--muted); font-size: .97rem; }
.service-desc { font-size: .97rem; color: var(--muted); }
.service-desc p { margin: 0 0 .75em; }
.service-desc p:last-child { margin-bottom: 0; }
.service-desc .list-stars { margin: 0 0 .75em; }
.service-desc .list-stars li { margin-bottom: .35rem; }
.service-desc .list-stars:last-child { margin-bottom: 0; }
.service-note { display: flex; gap: .45rem; align-items: flex-start; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); color: var(--muted); }
.service-note .icon { flex: none; margin-top: .2rem; color: var(--secondary-strong); }

/* The newsletter block: portrait cut-out beside the heading and the sign-up form.
   The portrait PNG ends in a straight cut at the torso, so it is pulled down through the band's
   bottom padding and sits on the band's edge, which hides the cut (as on the live site); the band
   clips the overhang. Below 900px it stacks last, under the form, flush with the same edge. */
.newsletter { overflow: hidden; }
.newsletter-in { display: grid; gap: 2rem; align-items: center; text-align: center; }
.newsletter-portrait { display: flex; justify-content: center; align-items: flex-end; order: 2; margin-bottom: calc(-1 * var(--section-y)); }
.newsletter-portrait .cutout { max-height: 18rem; }
.newsletter-portrait .img-fallback { width: 12rem; min-height: 15rem; border-radius: 50% 50% var(--radius-card) var(--radius-card); }
.newsletter-body .lead { margin: 0 auto 1.5rem; max-width: 32rem; }
.newsletter-body .eyebrow { margin-bottom: .75rem; }
.newsletter-body h2, .newsletter-body .newsletter-title { margin-bottom: .4em; }
.newsletter-form { max-width: 32rem; margin: 0 auto; }
.newsletter-form .input-group { gap: .6rem; }
.newsletter-form .form-note { text-align: left; }
.newsletter-dark .newsletter-portrait .cutout { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45)); }
.newsletter-dark .lead { color: var(--on-dark-muted); }
.newsletter-tint .newsletter-portrait .cutout { filter: drop-shadow(0 18px 30px rgba(var(--dark-rgb), .28)); }
.newsletter-tint .lead { color: var(--on-tint); opacity: .8; }
.newsletter-tint .form-note.is-ok { color: var(--success); }
.newsletter .input-group .btn { white-space: nowrap; }

@media (min-width: 900px) {
  .newsletter-in { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); text-align: left; }
  .newsletter-portrait { order: 0; align-self: end; }
  .newsletter-portrait .cutout { max-height: 22rem; }
  .newsletter-body .lead { margin-left: 0; }
  .newsletter-form { margin-left: 0; }
  .newsletter-body .eyebrow { justify-content: flex-start; }
}

/* 2. Home
   -------------------------------------------------------------------------- */
.home-intro-text h2 { margin-bottom: .5em; }
.home-lockup { display: flex; justify-content: center; align-items: center; order: -1; }
.home-lockup .lockup { max-width: min(100%, 15rem); }
.home-lockup .img-fallback { width: 15rem; min-height: 15rem; border-radius: 50%; }
.home-tiles .tile { aspect-ratio: 3 / 2; }
.home-services .section-head .lead { max-width: 36rem; margin-left: auto; margin-right: auto; }
.home-review .quote-lg { padding-left: 0; }
.home-review .quote-lg .eyebrow { margin-bottom: 1.25rem; }
.home-review .quote-mark { color: var(--accent); opacity: .5; }
.home-review .quote-text { color: var(--on-dark); }
.home-review .quote-cite { color: var(--on-dark-muted); }

@media (min-width: 900px) {
  .home-lockup { order: 0; }
  .home-lockup .lockup { max-width: min(100%, 22rem); }
  .home-tiles .tile { aspect-ratio: 4 / 5; }
}

/* 3. About
   -------------------------------------------------------------------------- */
.about-plate {
  position: relative; overflow: hidden; margin: 0 0 2rem;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
  background: var(--tint); color: var(--on-tint); border-radius: var(--radius-card);
}
.about-plate-decor { position: absolute; inset: 0; pointer-events: none; display: none; }
.about-plate-decor .star { position: absolute; color: var(--accent); opacity: .35; }
.about-plate-decor .star:nth-child(1) { right: 1.25rem; top: 1rem; width: 1.3rem; height: 1.3rem; }
.about-plate-decor .star:nth-child(2) { right: 3rem; top: 2.6rem; width: .6rem; height: .6rem; }
[data-decor="stars"] .about-plate-decor { display: block; }
.about-heading { margin: 0; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); line-height: 1.15; position: relative; }
.about-body p { margin-bottom: 1.2em; }
.about-body p.first-big::first-letter { font-family: var(--font-display); font-size: 2.6em; line-height: .8; float: left; padding: .12em .12em 0 0; color: var(--primary-strong); }
.about-media { max-width: 30rem; margin: 0 auto; width: 100%; }
.about-portrait .img-portrait { aspect-ratio: 4 / 5; }
.about-portrait .img-fallback { aspect-ratio: 4 / 5; min-height: 0; }
.about-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.about-photo .img-fallback { aspect-ratio: 4 / 3; min-height: 0; }
.about-cta .lead { margin-left: auto; margin-right: auto; max-width: 34rem; }

@media (min-width: 900px) {
  .about-cols { align-items: start; }
  .about-media { margin: 0 0 0 auto; }
  .about-text { padding-top: .25rem; }
}

/* 4. Services
   -------------------------------------------------------------------------- */
.service-jump { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.service-jump .pill { text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.service-jump .pill:hover { border-color: var(--primary); color: var(--primary-strong); transform: translateY(-1px); }
.service-jump .pill .muted { font-weight: 400; }
.service-group { scroll-margin-top: calc(var(--head-h) + 1rem); }
.service-group .section-head { max-width: 40rem; }
/* Exactly four services (the readings) sit two by two, so no card is left alone on a second row. */
.service-grid-4 > .card { min-height: 100%; }
/* A group with a single service: one wide card, the details on the left and the price + button
   as a side panel, instead of a lone half-width card in an otherwise empty two-column grid. */
.service-grid-1 { display: grid; }
@media (min-width: 640px) {
  .service-grid-1 > .service-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .service-grid-1 > .service-card > .service-head, .service-grid-1 > .service-card > .meta, .service-grid-1 > .service-card > .card-body { grid-column: 1; }
  .service-grid-1 > .service-card > .card-foot {
    grid-column: 2; grid-row: 1 / 4; align-self: stretch; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1rem;
    margin: 0; padding: 0 0 0 clamp(1.5rem, 4vw, 3rem); border-top: 0; border-left: 1px solid var(--line);
  }
  .service-grid-1 > .service-card > .card-foot .price { font-size: 1.9rem; }
}
.service-policy .divider { margin-top: 0; }
.service-policy .accordion-body p { margin-bottom: 1em; }

/* 5. Learn
   -------------------------------------------------------------------------- */
.learn-hero .hero-eyebrow { gap: .6rem; }
.learn-hero .hero-eyebrow span { display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: .74rem; letter-spacing: .12em; }
.learn-hero .hero-eyebrow .star { display: none; }
.learn-point-list { counter-reset: learn; }
.learn-point {
  display: flex; gap: 1rem; align-items: flex-start; margin: 0;
  padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.learn-point:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary-soft); }
.learn-point p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.learn-point-n { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; flex: none; min-width: 2.2rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--primary-strong); line-height: 1; margin-top: .05rem; }
.learn-point-n .star { width: 1rem; height: 1rem; }
.learn-option-grid { max-width: 56rem; margin-left: auto; margin-right: auto; }
.learn-faq .accordion-group { box-shadow: var(--shadow-card); }
.learn-cta .lead { color: var(--on-dark-muted); max-width: 34rem; margin-left: auto; margin-right: auto; }

/* 6. Reviews
   -------------------------------------------------------------------------- */
.reviews-hero .hero-title-1 { font-size: 1em; }
.reviews-hero .hero-title-1::first-letter { font-size: 1.35em; line-height: .8; }
.reviews-hero .hero-title-2 { font-size: .58em; letter-spacing: .02em; margin-top: .4em; font-weight: 400; }
.reviews-note-band { border-bottom: 1px solid var(--line); }
.reviews-note { margin: 0; padding: 1.1rem 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--muted); }
.reviews-grid { display: grid; gap: 1.5rem; max-width: 52rem; margin: 0 auto; }
.review-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.review-card.is-featured { border-top: 4px solid var(--accent); }
.review-card .quote-card { padding-left: 0; }
.review-card .quote-mark { color: var(--accent); opacity: .45; }
.review-card .quote-text { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); }
.review-card .quote-cite { margin-top: 1.25rem; }
.review-card .quote-cite .star { color: var(--accent); }
.reviews-share-intro .small { display: flex; gap: .4rem; align-items: flex-start; }
.reviews-share-intro .small .icon { flex: none; margin-top: .2rem; }
.review-form .form-grid-2 { gap: 0 1rem; }
.form-card .form-actions { margin-top: .25rem; }
.form-card .form-note { margin-top: 1rem; }
.form-card .form-note:empty { display: none; }

/* 7. Contact
   -------------------------------------------------------------------------- */
.contact-intro h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.25rem); }
.contact-email-label { margin: 1.75rem 0 .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.contact-email {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ink); text-decoration: none;
  padding-bottom: .15rem; border-bottom: 2px solid var(--primary-soft); transition: border-color .15s var(--ease), color .15s var(--ease);
}
.contact-email span { overflow-wrap: anywhere; }
.contact-email .icon { color: var(--primary); }
.contact-email:hover { color: var(--primary-strong); border-color: var(--primary); }
.social-contact { margin-top: 1.5rem; }
.social-contact a { border-color: var(--line-strong); }
.contact-form .form-grid-2 { gap: 0 1rem; }
.contact-form .form-actions { justify-content: space-between; }
.contact-details { display: grid; gap: 1.25rem; margin: 0; }
.contact-detail { display: grid; gap: .5rem; padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.contact-detail dt { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-detail dt .icon { color: var(--primary); }
.contact-detail dd { margin: 0; }
.contact-detail dd p { margin: 0 0 .4em; }
.contact-detail dd p:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail:nth-child(2) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .contact-details { grid-template-columns: 1fr; }
  .contact-detail:nth-child(2) { grid-column: auto; }
}
@media (min-width: 1200px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail:nth-child(2) { grid-column: 1 / -1; }
}

/* 8. Policies
   -------------------------------------------------------------------------- */
.policies-hero .hero-in { text-align: left; }
.policies-hero .hero-eyebrow { justify-content: flex-start; }
.policies-hero .hero-lead { margin-left: 0; }
.policies-hero .hero-decor .star { color: var(--accent); }
/* This hero is left-aligned and only as tall as its text, so the stars keep to the padding bands
   above and below the copy (fixed offsets) instead of the percentage spots, which land on the eyebrow. */
.policies-hero .hero-decor .star:nth-child(1) { left: 7%; top: 1.1rem; }
.policies-hero .hero-decor .star:nth-child(2) { right: 8%; top: 1.5rem; }
.policies-hero .hero-decor .star:nth-child(3) { left: 14%; top: auto; bottom: 1rem; }
@media (min-width: 900px) {
  .policies-hero .hero-decor .star:nth-child(1) { left: 10%; top: 1.9rem; }
  .policies-hero .hero-decor .star:nth-child(2) { right: 12%; top: 2.5rem; }
  .policies-hero .hero-decor .star:nth-child(3) { left: 18%; bottom: 1.75rem; }
}
.policies-toc { margin: 0 0 2.5rem; }
.policies-toc .pill { text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), color .15s var(--ease); }
.policies-toc .pill:hover { border-color: var(--primary); color: var(--primary-strong); }
.policy-section { scroll-margin-top: calc(var(--head-h) + 1rem); max-width: none; }
.policy-section h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); }
.policy-section p { font-size: 1.05rem; }
.policy-section .small { display: flex; gap: .4rem; align-items: flex-start; font-size: .92rem; }
.policy-section .small .icon { flex: none; margin-top: .2rem; }
.policy-term { font-family: var(--font-display); font-weight: 600; }
.policies .divider { margin: 2.75rem 0; }
.policies-foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* 9. Unsubscribe (api/unsubscribe.php)
   -------------------------------------------------------------------------- */
.unsubscribe .lead { max-width: 34rem; margin-left: auto; margin-right: auto; }
.unsubscribe .form-actions { justify-content: center; }

/* Reduced motion: nothing here animates on its own; hover lifts are harmless. */
@media (prefers-reduced-motion: reduce) {
  .learn-point:hover, .service-jump .pill:hover { transform: none; }
}