/* Ann Therapy - homepage Services Preview "card catalog" stack.
   Vanilla port of nextjs-app/src/components/services-carousel.tsx.
   Scoped entirely under .ann-scs-* so it can never leak onto any other
   element. Colors/tokens match the site's active design
   (ann-therapy-warm-notebook-collage): cream #f6efdf, surface #fffdf6,
   ink #33302a, terracotta accent #d9694a, forest accentSupport #3c7a3f. */

.ann-scs-root {
  position: relative;
}

.ann-scs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ann-scs-layout {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 1024px) {
  .ann-scs-layout { grid-template-columns: 1.3fr 0.7fr; gap: 48px; }
}
/* The draggable card stack + tab list are desktop-only now; the accordion
   below takes over on mobile (see .ann-scs-accordion near the end of this
   file). Both are always built in JS - this is purely a display toggle. */
@media (max-width: 1023px) {
  .ann-scs-layout { display: none; }
}

.ann-scs-stack {
  position: relative;
  /* Next.js uses 360/400/430px here, sized for its own short, hand-tuned
     dictionary copy. This card now carries real production copy (tagline +
     summary + 3 bullets, sourced from each service's live page), which is
     honestly longer - at the original heights the worst-case card (longest
     title/tagline) overflowed the fixed height by 50-110px and clipped the
     "Learn more" CTA entirely under `overflow: hidden`. These values give
     every card (measured across all 6 services, both languages) enough
     room with a small safety margin, rather than matching Next.js's numbers
     at the cost of clipping real content. */
  height: 410px;
}
@media (min-width: 640px) { .ann-scs-stack { height: 515px; } }
@media (min-width: 1024px) { .ann-scs-stack { height: 495px; } }

.ann-scs-card-wrap {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  touch-action: pan-y;
}
.ann-scs-card-wrap.is-dragging { transition: none; }

.ann-scs-clip {
  pointer-events: none;
  position: absolute;
  top: -12px;
  left: 28px;
  z-index: 10;
  width: 28px;
  height: 28px;
  color: rgba(51, 48, 42, 0.6);
  transform: rotate(-18deg);
}
@media (min-width: 640px) { .ann-scs-clip { width: 32px; height: 32px; } }
.ann-scs-clip svg { width: 100%; height: 100%; }

.ann-scs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Matches Next.js's NoteCard base `rounded-[var(--component-card-radius)]`
     (--component-card-radius: 1rem in globals.css) - this still applies
     underneath the front card's clip-path (clip-path only removes what's
     outside its polygon; it doesn't un-round a corner that border-radius
     already pulled inward). Without this, front cards had zero rounding
     at all on their bottom two corners. */
  border-radius: 16px;
  background-color: #fffdf6;
  border: 1.5px solid rgba(51, 48, 42, 0.15);
  padding: 20px;
  padding-top: 28px;
  box-shadow: 0 1px 0 rgba(51,48,42,0.06), 0 12px 24px -14px rgba(51,48,42,0.4);
  text-decoration: none !important;
  color: inherit;
}
.ann-scs-card, .ann-scs-card * {
  text-decoration-line: none !important;
}
@media (min-width: 640px) { .ann-scs-card { padding: 24px; padding-top: 32px; } }
@media (min-width: 1024px) { .ann-scs-card { padding: 28px; padding-top: 36px; } }

.ann-scs-card.is-front {
  border-color: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 33px, rgba(51,48,42,0.13) 34px);
  transition: box-shadow 0.2s ease;
}
.ann-scs-card.is-front:hover {
  box-shadow: 3px 4px 0 rgba(51,48,42,0.78);
}
.ann-scs-card.is-back {
  background-color: #efe4cd;
  box-shadow: 0 1px 0 rgba(51,48,42,0.04), 0 4px 10px -8px rgba(51,48,42,0.18);
}

.ann-scs-dogear {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-color: #e6d8ba;
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.ann-scs-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
@media (min-width: 640px) { .ann-scs-icon { width: 48px; height: 48px; } }
.ann-scs-icon svg { display: block; width: 20px; height: 20px; }
@media (min-width: 640px) { .ann-scs-icon svg { width: 24px; height: 24px; } }

.ann-scs-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.ann-scs-topline .ann-scs-arrow {
  /* Next.js: text-muted-foreground/50 (--muted-foreground: #6d6450) */
  color: rgba(109, 100, 80, 0.5);
  line-height: 0;
}
.ann-scs-topline .ann-scs-arrow svg { width: 20px; height: 20px; }

.ann-scs-title {
  margin: 10px 0 0;
  /* Matches the site's own Fraunces fallback chain (sans-serif) - the rest
     of the homepage never falls back to Georgia. */
  font-family: Fraunces, sans-serif !important;
  font-weight: 500 !important;
  /* 18px matches the site's other card-level h3 titles (therapist cards,
     therapy-process step cards) - previously 20/24px, sized to match the
     Next.js reference's larger hero-card treatment, which read as bigger
     than every other card on the page. */
  font-size: 18px !important;
  line-height: 1.2 !important;
  /* Next.js: text-foreground (--foreground: #2f2b23, distinct from --ink) */
  color: #2f2b23;
  /* Single line, matching the assumption Next.js's short dictionary titles
     made. Real WP titles run longer (e.g. "Employee Assistance Program
     (EAP)") and wrapping to 2 lines was a major contributor to the fixed
     card height being inflated - which in turn showed up as a large empty
     gap on every shorter card. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) { .ann-scs-title { margin-top: 14px; } }

.ann-scs-tagline {
  margin: 16px 0 0;
  font-family: Fraunces, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #d9694a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) { .ann-scs-tagline { font-size: 16px; } }

/* No flex:1 here (unlike the Next.js reference) - real WP content varies
   more in length than Next.js's tuned dictionary copy, and giving all
   leftover space to this wrapper concentrated a large, odd-looking gap
   between the summary and the bullets on shorter cards. Pinning the CTA
   to the bottom instead (see .ann-scs-cta) collects any leftover space in
   one place at the very bottom, which reads as an intentional, consistent
   CTA position rather than a mid-card gap. */
.ann-scs-summary-wrap { margin-top: 8px; }
@media (min-width: 640px) { .ann-scs-summary-wrap { margin-top: 15px; } }
.ann-scs-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  /* Next.js: text-muted-foreground, solid (--muted-foreground: #6d6450) */
  color: #6d6450;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Matches Next.js `line-clamp-2 sm:line-clamp-3` exactly. The card's
     fixed height only has room for this content budget (title + tagline +
     summary + bullets + CTA) at these line counts - a larger clamp here
     previously pushed the CTA past the card's `overflow: hidden` bottom
     edge on mobile, making "Learn more" disappear. */
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 640px) { .ann-scs-summary { -webkit-line-clamp: 3; } }

.ann-scs-bullets {
  list-style: none;
  margin: 12px 0 0 !important;
  padding: 8px 0 0 !important;
  font-size: 14px;
  /* Next.js: text-foreground/75 (--foreground: #2f2b23) */
  color: rgba(47, 43, 35, 0.75);
}
.ann-scs-bullets li { display: flex; gap: 8px; }
.ann-scs-bullets li + li { margin-top: 4px; }
.ann-scs-bullet-dot {
  margin-top: 8px;
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #3c7a3f;
}
.ann-scs-bullet-text {
  /* Explicit ratio instead of inheriting the site's 27.2px (tuned for
     16px body copy) - at 14px that inherited value was a loose ~1.9
     ratio, inconsistent with the summary's own 1.4 a few lines above it. */
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .ann-scs-bullets { margin-top: 8px !important; padding-top: 12px !important; }
}

.ann-scs-cta {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #3c7a3f;
}
@media (min-width: 640px) { .ann-scs-cta { padding-top: 3px; margin-bottom: 25px; } }
.ann-scs-cta svg { width: 14px; height: 14px; }

.ann-scs-tablist { display: none; }
@media (min-width: 1024px) {
  .ann-scs-tablist { display: flex; flex-direction: column; gap: 6px; }
  .ann-scs-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 12px;
    /* Elementor's own button reset still leaks a faint box-shadow onto
       plain buttons at higher specificity than a single class - same leak
       class as the Astra fixes elsewhere in this file, just a different
       source. Declaring it explicitly here (matches .is-active below,
       which already had its own real shadow) keeps inactive tabs flat. */
    box-shadow: none;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    /* Next.js: text-muted-foreground, solid (--muted-foreground: #6d6450) */
    color: #6d6450;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  /* Same Astra button:hover leak as .ann-scs-nav-btn above.
     Next.js hover color: text-foreground (--foreground: #2f2b23). */
  .ann-scs-tab:hover { color: #2f2b23; background: none; border-color: transparent; }
  .ann-scs-tab.is-active {
    border-color: rgba(51, 48, 42, 0.15);
    background-color: #efe4cd;
    color: #3c7a3f;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(51,48,42,0.06), 0 12px 24px -14px rgba(51,48,42,0.4);
    transform: translateX(-6px);
  }
  /* Tab list icons are plain and state-colored (grey / forest on active),
     never the tone-tinted circle used on the front card. */
  .ann-scs-tab svg {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: inherit;
  }
}

/* ============================================================
   Mobile accordion (<1024px) - replaces the swipe carousel.
   Compact by design: tight paddings/gaps, one paper-styled card
   open at a time, plain rows otherwise. No text truncation here -
   unlike the stack's card, nothing here uses text-overflow:ellipsis;
   everything wraps naturally instead.
   ============================================================ */
.ann-scs-accordion {
  display: block;
}
@media (min-width: 1024px) {
  .ann-scs-accordion { display: none; }
}

.ann-scs-acc-item {
  margin-bottom: 8px;
}
.ann-scs-acc-item:last-child {
  margin-bottom: 0;
}

.ann-scs-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Each row is its own rounded "chip" - the aged-paper tone already used
     for the stack's back cards / active tab (#efe4cd). */
  background-color: #efe4cd;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  /* Astra's theme CSS carries several global `button { border-radius:
     2-4px; background: #e6e6e6; box-shadow: ...; }` rules - declaring
     every one of these properties ourselves (even background, which we
     now DO want, just a different color) keeps Astra's values from ever
     winning on any of them. appearance:none also strips native browser
     button chrome (most visible on iOS Safari). */
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 12px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ann-scs-acc-header:hover { background-color: #e6d8ba; }
/* The open row gets a light forest tint instead of the plain paper tone,
   so it reads as "active" against the other collapsed chips. */
.ann-scs-acc-header[aria-expanded="true"] {
  background-color: rgba(60, 122, 63, 0.12);
}
.ann-scs-acc-header[aria-expanded="true"]:hover {
  background-color: rgba(60, 122, 63, 0.18);
}

.ann-scs-acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
}
.ann-scs-acc-icon svg { display: block; width: 16px; height: 16px; }

.ann-scs-acc-title {
  flex: 1;
  min-width: 0;
  font-family: Fraunces, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  /* Next.js: text-foreground (--foreground: #2f2b23) */
  color: #2f2b23;
  /* Wraps instead of truncating - long titles just take a second line. */
  white-space: normal;
}

.ann-scs-acc-number {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  /* Dimmer than before so the title stays the visual focus of each row -
     the number is just a scan aid, not a competing element. */
  color: rgba(109, 100, 80, 0.225);
}
.ann-scs-acc-header[aria-expanded="true"] .ann-scs-acc-number {
  display: none;
}

.ann-scs-acc-chevron {
  display: flex;
  flex-shrink: 0;
  color: rgba(109, 100, 80, 0.6);
  line-height: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.ann-scs-acc-chevron svg { display: block; width: 16px; height: 16px; }
.ann-scs-acc-header[aria-expanded="true"] .ann-scs-acc-chevron {
  transform: rotate(180deg);
  color: #3c7a3f;
}

.ann-scs-acc-panel {
  position: relative;
  padding: 0 0 4px;
}

/* Absolutely positioned children ignore the parent's padding and sit
   relative to its padding-box origin (i.e. top:0 is the panel's own top
   edge, not "after" whatever padding the panel has) - the earlier version
   accounted for padding twice and only ended up with ~4px of real overlap. */
.ann-scs-acc-clip {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 16px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: rgba(51, 48, 42, 0.6);
  transform: rotate(-18deg);
}
.ann-scs-acc-clip svg { display: block; width: 100%; height: 100%; }

.ann-scs-acc-card {
  position: relative;
  /* Clip spans 0-20px from panel top; card starting at 8px means the top
     12px of the clip (60%) overlaps the card and 8px pokes above it -
     matches the stack's own clip/card overlap ratio. */
  margin-top: 8px;
  background-color: #fffdf6;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 24px, rgba(51,48,42,0.13) 25px);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(51,48,42,0.06), 0 8px 16px -10px rgba(51,48,42,0.35);
  padding: 10px 14px 14px;
}

.ann-scs-acc-tagline {
  /* !important: Astra's `.entry-content p { margin-bottom: 1.6em; }` is a
     compound selector (0,1,1) that out-specifies this plain class (0,1,0)
     on margin-bottom specifically - everything else here was already
     winning, which is why only the bottom gap looked wrong. */
  margin: 15px 0 0 !important;
  font-family: Fraunces, sans-serif;
  font-style: italic;
  font-size: 13px;
  /* Explicit ratio instead of inheriting the site's 27.2px line-height
     (tuned for 16px body copy) - loose at 13px otherwise. */
  line-height: 1.3;
  color: #d9694a;
}

/* VI copy runs longer than EN and its first line can run under the
   absolutely-positioned paperclip (.ann-scs-acc-clip, right:16px width:20px)
   in the panel's top-right corner - the clip doesn't push text away since
   it's out of normal flow. Scoped to :lang(vi) only (confirmed via
   document.documentElement.lang - VI pages render lang="vi", EN renders
   lang="en-GB") since EN copy doesn't reach that far right. */
:lang(vi) .ann-scs-acc-tagline {
  padding-right: 34px;
}

.ann-scs-acc-divider {
  display: none;
  width: 32px;
  height: 2px;
  margin: 5px 0 1px;
  border-radius: 999px;
  background-color: #3c7a3f;
}

.ann-scs-acc-summary {
  /* Same Astra `.entry-content p` margin-bottom leak as the tagline. */
  margin: 8px 0 0 !important;
  font-size: 13px;
  line-height: 1.45;
  /* Next.js: text-muted-foreground (--muted-foreground: #6d6450) */
  color: #6d6450;
}

.ann-scs-acc-bullets {
  list-style: none;
  margin: 16px 0 0 !important;
  padding: 8px 0 0 !important;
  font-size: 13px;
  /* Next.js: text-foreground/75 (--foreground: #2f2b23) */
  color: rgba(47, 43, 35, 0.75);
}
.ann-scs-acc-bullets li { display: flex; gap: 8px; }
.ann-scs-acc-bullets li + li { margin-top: 4px; }
.ann-scs-acc-bullet-text { line-height: 1.4; }

.ann-scs-acc-cta {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #3c7a3f;
  text-decoration: none !important;
}
.ann-scs-acc-cta svg { display: block; width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .ann-scs-card-wrap { transition: none !important; }
  .ann-scs-acc-chevron { transition: none !important; }
}