/*
 * Murphy – Prana Cycles landing styles.
 * Namespace: .mpc-*  ·  Consumes host --hv- and --cf-font-family- tokens (Core Framework / Builderius),
 * each with a safe fallback so the shortcode still reads correctly standalone.
 * Mobile-first: base rules target small screens; the single breakpoint below widens the showcase grid.
 */

.mpc-root {
  display: grid;
  gap: var(--hv-space-2xl, 3rem);
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--cf-font-family--mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--hv-text-m, 1rem);
  line-height: 1.65;
  color: var(--hv-text-primary, hsla(193, 9%, 19%, 1));
}

.mpc-root *,
.mpc-root *::before,
.mpc-root *::after {
  box-sizing: border-box;
}

.mpc-root h1,
.mpc-root h2,
.mpc-root h3 {
  font-family: var(--cf-font-family--lora, 'Lora', Georgia, 'Times New Roman', serif);
  color: var(--hv-text-heading, hsla(221, 47%, 21%, 1));
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

.mpc-hero {
  display: grid;
  gap: var(--hv-space-m, 1rem);
  justify-items: center;
  padding: var(--hv-space-2xl, 3rem) var(--hv-space-l, 1.5rem);
  border-radius: var(--hv-radius-l, 16px);
  background: var(--hv-navy, hsla(221, 47%, 20%, 1));
  color: var(--hv-text-inverse, #F5F2ED);
  text-align: center;
}

.mpc-hero-title {
  margin: 0;
  color: var(--hv-text-inverse, #F5F2ED);
}

.mpc-hero-lede {
  max-width: 56rem;
  margin: 0;
  font-size: var(--hv-text-l, 1.125rem);
  line-height: 1.6;
}

.mpc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--hv-space-2xs, .5rem) var(--hv-space-l, 1.5rem);
  border-radius: var(--hv-radius-s, 8px);
  background: var(--hv-gold, hsla(39, 46%, 61%, 1));
  color: var(--hv-text-inverse, #F5F2ED);
  font-family: var(--cf-font-family--mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}
/* Higher specificity so the theme's link color can't override the CTA text. */
.mpc-root a.mpc-cta,
.mpc-root a.mpc-cta:link,
.mpc-root a.mpc-cta:visited,
.mpc-root a.mpc-cta:hover,
.mpc-root a.mpc-cta:focus {
  color: var(--hv-text-inverse, #F5F2ED);
}

.mpc-cta:hover {
  background: var(--hv-amber, hsla(31, 53%, 64%, 1));
  transform: translateY(-2px);
}

.mpc-cta:active {
  transform: translateY(1px);
}

.mpc-cta:focus-visible {
  outline: 2px solid var(--hv-border-focus, hsla(185, 23%, 46%, 1));
  outline-offset: 3px;
}

/* ---------- Sections ---------- */

.mpc-section {
  display: grid;
  gap: var(--hv-space-s, .75rem);
}

.mpc-section-title {
  margin: 0;
}

.mpc-section p {
  margin: 0;
  line-height: 1.65;
}

/* ---------- Steps ---------- */

.mpc-steps {
  display: grid;
  gap: var(--hv-space-s, .75rem);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: mpc;
}

.mpc-step {
  position: relative;
  counter-increment: mpc;
  padding-inline-start: 4.75rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.mpc-step::before {
  content: counter(mpc);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: var(--hv-radius-full, 999rem);
  background: var(--hv-olive, hsla(106, 23%, 33%, 1));
  color: var(--hv-text-inverse, #F5F2ED);
  font-family: var(--cf-font-family--lora, Georgia, serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--hv-shadow-s, 0 2px 8px hsla(221, 40%, 15%, .18));
}

/* ---------- Screenshot showcase ---------- */

.mpc-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hv-space-m, 1rem);
}

.mpc-shot {
  margin: 0;
}

.mpc-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--hv-border-secondary, hsla(106, 10%, 50%, 0.08));
  border-radius: var(--hv-radius-m, 12px);
  background: var(--hv-bg-sand, #E8E0D4);
  box-shadow: var(--hv-shadow-s, 0 2px 8px hsla(221, 40%, 15%, 0.12));
}

/* ---------- Gate ---------- */

.mpc-gate {
  margin-block-start: var(--hv-space-xl, 2.5rem);
  scroll-margin-block-start: var(--hv-space-l, 1.5rem);
}

/* ---------- FAQ ---------- */

.mpc-faq-item {
  padding-block: var(--hv-space-s, .75rem);
  border-block-end: 1px solid var(--hv-border-secondary, hsla(106, 10%, 50%, 0.08));
}

.mpc-faq-item:last-child {
  border-block-end: none;
}

.mpc-faq-q {
  margin: 0 0 var(--hv-space-3xs, .25rem);
  font-size: var(--hv-text-l, 1.125rem);
}

.mpc-faq-a {
  margin: 0;
  line-height: 1.65;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
  .mpc-shots {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .mpc-cta {
    transition: none;
  }

  .mpc-cta:hover,
  .mpc-cta:active {
    transform: none;
  }

  .mpc-shot-open::after {
    transition: none;
  }
}

/* ---- Screenshot showcase → click to enlarge (lightbox) ---- */
.mpc-shot-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--hv-radius-m, 12px);
  overflow: hidden;
}
.mpc-shot-open img { display: block; }
/* Subtle "click to enlarge" hint: magnifier over a faint tint, fades in on hover/focus. */
.mpc-shot-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F2ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='14.5' y1='14.5' x2='20' y2='20'/%3E%3C/svg%3E")
      center / 2.25rem no-repeat,
    hsla(221, 47%, 20%, .28);
}
.mpc-shot-open:hover::after,
.mpc-shot-open:focus-visible::after {
  opacity: 1;
}
.mpc-shot-open:focus-visible {
  outline: 2px solid var(--hv-border-focus, hsla(184, 25%, 46%, 1));
  outline-offset: 3px;
}

.mpc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: var(--hv-space-l, 1.5rem);
  background: var(--hv-bg-overlay, hsla(221, 47%, 15%, .9));
  place-items: center;
}
.mpc-lightbox[hidden] { display: none; }
.mpc-lightbox:not([hidden]) { display: grid; }
.mpc-lightbox-img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--hv-radius-m, 12px);
  box-shadow: var(--hv-shadow-xl, 0 24px 64px hsla(221, 40%, 10%, .5));
}
.mpc-lightbox-close {
  position: fixed;
  inset-block-start: var(--hv-space-s, .75rem);
  inset-inline-end: var(--hv-space-s, .75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--hv-radius-full, 999rem);
  background: var(--hv-bg-sand, #E8E0D4);
  color: var(--hv-text-heading, hsla(221, 47%, 21%, 1));
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.mpc-lightbox-close:focus-visible {
  outline: 2px solid var(--hv-border-focus, hsla(184, 25%, 46%, 1));
  outline-offset: 2px;
}