/* ============================================================
   fun-run.co.uk — Sponsored event calculator page
   Scoped to body.fr-public-calculator. Reuses the home section
   chrome from public-home.css. The reusable atoms (stepper,
   disclosure, FAQ accordion, mobile sticky bar) live in
   components.css.
   ============================================================ */

/* ------------------------------------------------------------
   Mobile layout — sections use the full viewport with small
   gutters rather than the centred desktop container.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  body.fr-public-calculator > main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* Every section (plain, --cream, --soft) gets the same
     full-width treatment with 16-20px gutters. */
  body.fr-public-calculator .fr-home-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.fr-public-calculator .fr-final-cta {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Tight hero — about a third of the homepage hero's height */
body.fr-public-calculator .fr-calc-hero {
  text-align: center;
  padding-top: var(--fr-space-6);
  padding-bottom: var(--fr-space-7);
}
@media (max-width: 640px) {
  body.fr-public-calculator .fr-calc-hero {
    padding-top: var(--fr-space-4);
    padding-bottom: var(--fr-space-6);
  }
}
body.fr-public-calculator .fr-calc-hero .fr-home-section__title {
  /* Let the title use the full container width on desktop so it fits on one line;
     inherited text-wrap: balance from public-home.css handles smaller viewports. */
  max-width: none;
  margin-inline: auto;
}
body.fr-public-calculator .fr-calc-hero .fr-home-section__lede {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Calculator layout
   ------------------------------------------------------------ */

body.fr-public-calculator .fr-calc-section {
  padding-top: var(--fr-space-9);
  padding-bottom: var(--fr-space-10);
}

body.fr-public-calculator .fr-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--fr-space-6);
  align-items: start;
}
@media (max-width: 899px) {
  body.fr-public-calculator .fr-calc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fr-space-7);
  }
}

body.fr-public-calculator .fr-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-6);
}

/* Keep the steppers compact so the number input doesn't sprawl into
   dead space when the inputs column is wide. */
body.fr-public-calculator .fr-calc-inputs .fr-stepper {
  max-width: 22rem;
}

/* ------------------------------------------------------------
   Results card
   ------------------------------------------------------------ */

body.fr-public-calculator .fr-calc-results {
  position: sticky;
  top: var(--fr-space-6);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-xl);
  padding: var(--fr-space-7) var(--fr-space-7) var(--fr-space-6);
  box-shadow: var(--fr-shadow-md);
}
@media (max-width: 899px) {
  body.fr-public-calculator .fr-calc-results {
    position: static;
    padding: var(--fr-space-6);
  }
}

/* Functional label for the results figure. Lighter and quieter than the
   editorial eyebrow style so the headline number does the talking. */
body.fr-public-calculator .fr-calc-results__eyebrow {
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-regular);
  color: var(--fr-color-ink-muted);
  margin: 0 0 var(--fr-space-2);
}

body.fr-public-calculator .fr-calc-results__headline {
  font-family: var(--fr-font-serif);
  font-size: clamp(2.75rem, 5vw + 0.5rem, 4rem);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fr-color-heading);
  margin: 0 0 var(--fr-space-6);
  font-variant-numeric: tabular-nums;
}

body.fr-public-calculator .fr-calc-results__breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.fr-public-calculator .fr-calc-results__breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fr-space-4);
  padding: var(--fr-space-3) 0;
  border-top: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-md);
  color: var(--fr-color-ink);
}
body.fr-public-calculator .fr-calc-results__breakdown li:first-child {
  border-top: 0;
  padding-top: 0;
}
/* display:flex above overrides the browser's default [hidden]{display:none};
   restore it so the JS can hide the optional rows. */
body.fr-public-calculator .fr-calc-results__breakdown li[hidden] {
  display: none;
}
body.fr-public-calculator .fr-calc-results__breakdown li > span:first-child {
  color: var(--fr-color-ink-muted);
}
body.fr-public-calculator .fr-calc-results__breakdown li > span:last-child {
  font-weight: var(--fr-weight-semibold);
  font-variant-numeric: tabular-nums;
}

body.fr-public-calculator .fr-calc-results__rule {
  border: 0;
  border-top: 1px solid var(--fr-color-border);
  margin: var(--fr-space-5) 0 var(--fr-space-4);
}

body.fr-public-calculator .fr-calc-results__footnote {
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink-muted);
  margin: 0;
}
body.fr-public-calculator .fr-calc-results__footnote a {
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-semibold);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Editorial prose under the calculator
   ------------------------------------------------------------ */

body.fr-public-calculator .fr-calc-prose {
  /* Full-width single column matching the rest of the page. */
  max-width: none;
  margin: 0;
}
body.fr-public-calculator .fr-calc-prose p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-5);
}
body.fr-public-calculator .fr-calc-prose p:last-of-type {
  margin-bottom: 0;
}
body.fr-public-calculator .fr-calc-prose p strong {
  color: var(--fr-color-ink);
}

/* Centre the "Read the case for…" text-button below the prose */
body.fr-public-calculator .fr-home-section__after-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--fr-space-7);
}

/* Pull the FAQ heading closer to the first row. */
body.fr-public-calculator .fr-home-section--cream .fr-home-section__title {
  margin-bottom: var(--fr-space-2);
}

/* Left-align the FAQ block and let it use the full section width
   so the answers run the same width as the rest of the page. */
body.fr-public-calculator .fr-faq {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
body.fr-public-calculator .fr-faq__answer p {
  max-width: none;
}

/* ------------------------------------------------------------
   Secondary link under the primary CTA in the final navy panel
   ------------------------------------------------------------ */

body.fr-public-calculator .fr-calc-final-cta__secondary {
  margin: var(--fr-space-5) 0 0;
  text-align: center;
}
body.fr-public-calculator .fr-calc-final-cta__secondary a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  text-decoration: none;
}
body.fr-public-calculator .fr-calc-final-cta__secondary a:hover {
  color: #fff;
  text-decoration: underline;
}