/* ============================================================
   Statera — Planning page styles
   Loaded after css/style.css
   ============================================================ */

/* ---------- Elementor container reset ---------- */
/* The Planning sections are Elementor widgets inside one container. Elementor's
   default flex container adds a 20px gap and 10px padding, which would show up
   as extra space between every section; the sections carry their own padding,
   so the container is reduced to a plain block. */
.elementor .elementor-element.plan-root {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --content-width: 100%;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --gap: 0px;
}

.elementor .elementor-element[class*="elementor-widget-statera-planning-"]:not(:last-child) {
  margin-block-end: 0;
}

/* Shared page-level bits */
.plan-eyebrow-faded {
  opacity: .5;
  padding-bottom: 10px;
}

/* The design sets these two eyebrows in capitals ("WHY WE REVISIT",
   "WHAT TO EXPECT", nodes 39:2586 and 39:2639) while the hero's
   "Financial Planning" (39:2567) stays in title case, so the transform is
   scoped to the two sections rather than to the shared class. */
.plan-why .plan-eyebrow-faded,
.plan-expect .plan-eyebrow-faded {
  text-transform: uppercase;
}

body.wp-theme-statera .plan-eyebrow-grey {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #686E76;
  white-space: nowrap;
}

.plan-framework h2,
.plan-disciplines h2,
.plan-why h2,
.plan-expect h2 {
  color: #2B2B29;
}

/* Blue arrow disc variant of .btn-primary (hero + CTA buttons) */
.btn-primary .btn-disc--blue { background: var(--signal-blue);
    border-radius: 0 999px 999px 0;
    transition: background .2s ease; }
/* Hover-only decorative fade — guarded so a tap doesn't leave the green
   disc stuck on until the user taps elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover .btn-disc--blue {
      background: var(--green-accent);
  }
}
  .btn-primary:active .btn-disc--blue {
      background: var(--green-accent);
  }

/* the design mirrors the left-arrow glyph (rotate-180 + scale-y-100) so it points right */
.btn-primary .btn-disc--blue img { transform: scaleX(-1); }

/* ---------- Hero ---------- */
.plan-hero { padding: 82px 0 112px; }
.plan-hero-row {
  display: flex;
  align-items: center;
  gap: 27px;
}
.plan-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  width: 598px;
  flex: none;
}
.plan-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}
.plan-hero-sub {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
  opacity: .7;
  max-width: 506px;
}
.plan-hero-media {
  position: relative;
  flex: 1;
  height: 655px;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Prefixed to outrank Elementor's `.elementor img { height: auto }`. */
body.wp-theme-statera .plan-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Why we revisit ---------- */
.plan-why { padding: 100px 0; }
/* The design makes this row 462 tall. Left to itself the photo sizes the row
   from its own aspect ratio and the card's copy sets its own height under the
   substituted typeface, so the row has to be pinned or everything below it
   shifts down. */
.plan-why-row {
  display: flex;
  align-items: stretch;
  height: 462px;
  gap: 30px;
}
.plan-why-media {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plan-why-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-why-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  padding: 30px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
}
.plan-why-sub {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.6px;
  opacity: .7;
}
/* Pinned to the design's 564; see .plan-framework-row. */
.plan-why-lower {
  display: flex;
  align-items: flex-start;
  height: 564px;
  gap: 54px;
  padding: 60px 0;
}
.plan-why-lead {
  flex: 1;
  min-width: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #2B2B29;
}
.plan-why-list {
  flex: 1;
  min-width: 0;
}
.plan-why-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 20px;
  border-top: 1px solid var(--charcoal);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  white-space: nowrap;
}
.plan-why-list li:last-child { border-bottom: 1px solid var(--charcoal); }
.plan-why-list li img { width: 10px; height: 10px; flex: none; }

/* ---------- Framework ---------- */
/* Pinned to the design's 547: the card's copy runs to a different number of
   lines under the substituted typeface, and would otherwise set the height. */
.plan-framework-row {
  display: flex;
  align-items: stretch;
  height: 547px;
  gap: 30px;
}
.plan-framework-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 30px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
}
/* The Elementor kit's p { margin-block-end: 1.5em } leaks into this card
   (the Elementor page body carries no .plan-root class, so style.css's
   paragraph zeroing never matches). Every gap here is a flex gap by design,
   so the card's paragraphs carry no margins of their own. */
.plan-framework-card p { margin-block: 0; }
.plan-framework-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan-framework-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.plan-framework-intro {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.plan-framework-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan-qa-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #F7F7F5;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md);
}
.plan-qa-badge {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: var(--radius-sm);
  background: var(--footer-ink);
  flex: none;
}
.plan-qa-badge img { width: 26px; height: 26px; }
.plan-qa-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

body.wp-theme-statera .plan-qa-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #1A1A1A;
}
.plan-qa-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #666666;
}
.plan-framework-media {
  width: 428px;
  flex: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.plan-framework-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Four disciplines ---------- */
.plan-disciplines { padding: 100px 0; }
.plan-disciplines-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 70px;
}
.plan-disciplines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.plan-discipline-card {
  position: relative;
  background: var(--text-grey);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plan-discipline-media {
  position: relative;
  height: 344px;
  overflow: hidden;
}
/* The photograph shows at rest — default state equals the hover state, so
   there is no reveal on pointer. The media box keeps its height either way
   so the grid does not reflow. */
.plan-discipline-media img:not(.plan-discipline-point) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .3s ease;
}

/* :hover split out from :focus-within below — a tap would otherwise leave the
   photo revealed until the user taps elsewhere on touch devices. */
.plan-discipline-card:focus-within .plan-discipline-media img:not(.plan-discipline-point) {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .plan-discipline-card:hover .plan-discipline-media img:not(.plan-discipline-point) {
    opacity: 1;
  }
}
  .plan-discipline-card:active .plan-discipline-media img:not(.plan-discipline-point) {
    opacity: 1;
  }

/* The gradients show at rest too, same as the hover state. */
.plan-discipline-media::before,
.plan-discipline-media::after {
  opacity: 1;
  transition: opacity .3s ease;
}

/* Same :hover / :focus-within split as the image reveal above. */
.plan-discipline-card:focus-within .plan-discipline-media::before,
.plan-discipline-card:focus-within .plan-discipline-media::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .plan-discipline-card:hover .plan-discipline-media::before,
  .plan-discipline-card:hover .plan-discipline-media::after {
    opacity: 1;
  }
}
  .plan-discipline-card:active .plan-discipline-media::before,
  .plan-discipline-card:active .plan-discipline-media::after {
    opacity: 1;
  }

/* Someone who prefers less motion still gets the reveal, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .plan-discipline-media img:not(.plan-discipline-point),
  .plan-discipline-media::before,
  .plan-discipline-media::after {
    transition: none;
  }
}
.plan-discipline-media:not(.plan-discipline-media--empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(64, 64, 64, 0) 0%, rgba(64, 64, 64, .3) 100%);
}
.plan-discipline-media:not(.plan-discipline-media--empty)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 142px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(64, 64, 64, 0), #404040);
}
.plan-discipline-text {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  color: var(--white);
}

body.wp-theme-statera .plan-discipline-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.plan-discipline-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  opacity: .8;
}

/* ---------- What to expect ---------- */
/* "What to expect": static two-column layout — the section head on the
   left (450px) and the four stages as a 2x2 grid of photo + text cards
   on the right (Figma 2049:1683). The full-viewport grey band comes from
   the Elementor wrapper (overrides.css bleeds it); the section simply
   fills it. The 100px block padding is the wrapper's (section-spacing
   model). */
.plan-expect {
  background: #E8E8E8;
}

.plan-expect-row {
  display: flex;
  align-items: flex-start;
  gap: 90px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.plan-expect-copy {
  width: 450px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}
.plan-expect-sub {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
  opacity: .7;
}
.plan-expect-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 60px;
}
.plan-expect-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.plan-expect-media {
  position: relative;
  width: 100%;
  aspect-ratio: 466 / 331;
  border-radius: 15px;
  overflow: hidden;
}
.plan-expect-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plan-expect-item-text {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

body.wp-theme-statera .plan-expect-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.plan-expect-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  opacity: .8;
}

/* ---------- CTA ---------- */
.plan-cta-wrap { padding: 90px 0 54px; }
.plan-cta {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px 30px 30px 50px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plan-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 542px;
  flex: none;
}
.plan-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.plan-cta-text h2 { color: var(--black); }
.plan-cta-sub {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.plan-cta-media {
  flex: 1;
  min-width: 0;
  height: 530px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.plan-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .plan-hero-copy { width: 46%; }
  .plan-expect-row { gap: 50px; }
}

@media (max-width: 900px) {
  .plan-hero { padding: 48px 0 60px; }
  .plan-hero-row { flex-direction: column; align-items: stretch; }
  .plan-hero-copy { width: 100%; }
  .plan-hero-sub { max-width: none; }
  /* flex: 1's basis: 0 becomes a main-axis size of 0 once the row stacks,
     zeroing the panel no matter what height is set — release it. */
  .plan-hero-media { flex: none; height: 380px; }

  .plan-why { padding: 48px 0; }
  .plan-why-row { flex-direction: column; height: auto; }
  .plan-why-media { height: 320px; }
  /* The desktop lower row is pinned to the design's 564px (see the base
     rule); stacked, the lead + list need ~730px, and the pin pushed the
     last list rows under the Framework card. Height follows content. */
  .plan-why-lower { flex-direction: column; gap: 32px; padding: 40px 0; height: auto; }
  .plan-why-lead { font-size: 24px; }
  /* align-items: flex-start (desktop) shrink-wraps the list to its longest
     row once the lower row stacks — stretch it back to the column width. */
  .plan-why-list { width: 100%; }
  .plan-why-list li { white-space: normal; }

  .plan-framework { padding-bottom: 40px; }
  .plan-framework-row { flex-direction: column; height: auto; }
  .plan-framework-media { width: 100%; height: 320px; }
  /* Q&A cards stack on mobile: icon, then question, then description. */
  .plan-qa-card { flex-direction: column; }

  /* Four disciplines, mobile (Figma 40:5175 — 390 wide frame of this exact
     section). Section padding (py-[100px]) and the head-to-cards gap
     (gap-[70px], node 40:5176) already match the desktop rules above, so
     neither is overridden here. */
  .plan-disciplines-grid { grid-template-columns: 1fr; }
  /* Node 40:5179: 34px/semibold, -1.02px tracking, centred and pinned to the
     296.336px measured width so "Four Disciplines," / "One Structure" breaks
     the same way it does in the design under the substituted typeface. The
     body.wp-theme-statera prefix matches style.css's h2 rules (up to 0,0,1,2
     at this width) so this still wins. */
  body.wp-theme-statera .plan-disciplines h2 {
    letter-spacing: -1.02px;
    max-width: 297px;
    margin: 0 auto;
  }
  /* Node 40:5182: 20px corners on mobile vs. the desktop card's --radius-lg. */
  .plan-discipline-card { border-radius: var(--radius-md); }
  /* Node 40:5183: 272px image block (vs. 344px on desktop). */
  .plan-discipline-media { height: 272px; }
  /* Touch has no hover, so the reveal-on-hover treatment above never fires —
     node 40:5175 shows every card's photo and its bottom gradient at full
     opacity with no interaction. Shown outright here; the radial vignette
     (::before) isn't part of the mobile frame, and nothing here promotes it
     off its default opacity: 0, so it stays hidden. */
  .plan-discipline-media img:not(.plan-discipline-point) { opacity: 1; }
  /* Node 40:5185: the bottom gradient is 88.216px tall on mobile vs. 142px
     on desktop. */
  .plan-discipline-media:not(.plan-discipline-media--empty)::after {
    height: 88px;
    opacity: 1;
  }
  /* Node 40:5186/40:5187/40:5188: 20px inner padding and title/copy gap (vs.
     30px on desktop), title down to 24px/-0.48px, copy down to 15px. */
  .plan-discipline-text { padding: 20px; gap: 20px; }
  body.wp-theme-statera .plan-discipline-title { letter-spacing: -0.48px; }
  .plan-discipline-sub { font-size: 15px; }
    .plan-expect-row { flex-direction: column; gap: 48px; padding: 0 20px; }
  .plan-expect-copy { width: 100%; }
  .plan-expect-grid { grid-template-columns: 1fr; row-gap: 48px; width: 100%; }

  .plan-cta-wrap { padding: 48px 0 40px; }
  .plan-cta { flex-direction: column; align-items: stretch; padding: 30px; }
  .plan-cta-copy { width: 100%; }
  .plan-cta-media { height: 300px; }
}