/*
  Pages built with the page builder. Loaded only on those pages.

  Everything here reads the site style's --kit-* variables where a site has
  one, and falls back to the theme's own values where it does not, so a built
  page looks like the rest of the site without being told twice.
*/

.builder-section {
  position: relative;
  padding-block: var(--kit-section-spacing, 96px);
}

.builder-section:first-child {
  padding-block-start: calc(var(--kit-section-spacing, 96px) * 1.2);
}

.builder-full {
  width: 100%;
}

.builder-section--wide > .container {
  max-width: min(1440px, calc(100% - 48px));
}

.builder-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--builder-gap, 32px);
  align-items: start;
}

.builder-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
  A free container: the element a version 2 document is made of. It stacks
  its children down and takes the full width it is given, which is what a
  box with nothing said about it should do. Everything else — direction,
  spacing, alignment, colour — arrives as a rule of its own, written from
  the element's settings, so nothing here needs a variant class.
*/
.builder-container {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* One column per row on phones, whatever the widths say. */
@media (max-width: 720px) {
  .builder-column {
    grid-column: 1 / -1 !important;
  }
}

.widget > :first-child { margin-block-start: 0; }
.widget > :last-child { margin-block-end: 0; }

.widget-heading h1,
.widget-heading h2,
.widget-heading h3,
.widget-heading h4,
.widget-heading h5,
.widget-heading h6 {
  font-family: var(--kit-font-heading, var(--font-heading));
  font-weight: var(--kit-heading-weight, 700);
  letter-spacing: var(--kit-heading-spacing, -0.02em);
  margin: 0;
}

.widget-heading h1 { font-size: var(--kit-h1, 3.2rem); }
.widget-heading h2 { font-size: var(--kit-h2, 2.4rem); }
.widget-heading h3 { font-size: var(--kit-h3, 1.75rem); }
.widget-heading h4 { font-size: var(--kit-h4, 1.35rem); }
.widget-heading h5 { font-size: var(--kit-h5, 1.15rem); }
.widget-heading h6 { font-size: var(--kit-h6, 1rem); }

.widget-text { color: var(--kit-text, var(--text)); }
.widget-text p { margin-block: 0 1em; }
.widget-text > :last-child { margin-block-end: 0; }

.widget-list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: 8px; }
.widget-list--check { list-style: none; padding-inline-start: 0; }
.widget-list--check li { padding-inline-start: 1.6em; position: relative; }
.widget-list--check li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--kit-accent, var(--green, currentColor));
}

.widget-button { margin: 0; }
.widget-button .button--quiet {
  background: transparent;
  border: 1px solid var(--kit-border, var(--line));
  color: inherit;
}

.widget-image { margin: 0; }
.widget-image img { display: block; width: 100%; height: auto; }
.widget-image--wide { margin-inline: calc(-1 * var(--builder-gap, 32px)); }
.widget-image figcaption {
  margin-block-start: 8px;
  font-size: 0.875rem;
  color: var(--kit-muted, var(--muted));
}

.widget-divider {
  border: 0;
  border-block-start: 1px solid var(--kit-border, var(--line));
  margin: 0;
  width: 100%;
}

.widget-entries__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--widget-columns, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
  .widget-entries__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.widget-entries__card {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--kit-border, var(--line));
  border-radius: var(--kit-radius, var(--radius-md, 12px));
  background: var(--kit-surface, var(--surface));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.widget-entries__card:hover {
  border-color: var(--kit-primary, var(--blue));
  transform: translateY(-2px);
}

.widget-entries__title {
  font-family: var(--kit-font-heading, var(--font-heading));
  font-weight: 600;
  color: var(--kit-heading, var(--heading));
}

.widget-entries__summary {
  font-size: 0.9375rem;
  color: var(--kit-muted, var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  .widget-entries__card { transition: none; }
  .widget-entries__card:hover { transform: none; }
}

/* Lead magnet form: the details someone gives in exchange for a file. */
.widget-lead-magnet {
  background: var(--kit-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--kit-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--kit-radius, 16px);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: 16px;
}
.lead-magnet__form { display: grid; gap: 14px; }
.lead-magnet__field { display: grid; gap: 6px; margin: 0; }
.lead-magnet__field label { font-size: 0.9rem; font-weight: 600; }
.lead-magnet__field input,
.lead-magnet__field select,
.lead-magnet__field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: calc(var(--kit-radius, 16px) / 2);
  border: 1px solid var(--kit-border, rgba(255, 255, 255, 0.16));
  background: var(--kit-input-bg, rgba(0, 0, 0, 0.16));
  color: inherit;
  font: inherit;
}
.lead-magnet__consent { display: grid; margin: 0; font-size: 0.9rem; }
.lead-magnet__consent label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.lead-magnet__note { font-size: 0.82rem; opacity: 0.75; margin: 0; }
.lead-magnet__error { color: var(--kit-danger, #ff9d9d); margin: 0; }
.lead-magnet__done { display: grid; gap: 12px; }
/* Off-screen rather than hidden: bots read the DOM, not the layout. */
.lead-magnet__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* A loop: one designed card per item, in a grid. */
.widget-loop__heading { margin-block-end: 1rem; }
.widget-loop__grid {
  display: grid;
  grid-template-columns: repeat(var(--widget-columns, 3), minmax(0, 1fr));
  gap: var(--widget-gap, 24px);
}
@media (max-width: 1024px) {
  .widget-loop__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 767px) {
  .widget-loop__grid { grid-template-columns: minmax(0, 1fr); }
}
.widget-loop__item { min-width: 0; }
.widget-loop__item > .builder-section { padding-block: 0; }
.widget-loop__pages {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-block-start: 1.5rem;
}
.widget-loop__count { color: var(--kit-muted, inherit); font-size: .875em; }

/* A loop as a carousel: a scroll-snap row, arrows added by loop.js. */
.widget-loop__carousel { position: relative; }
.widget-loop__track {
  display: flex; gap: var(--widget-gap, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.widget-loop__track > .widget-loop__item {
  flex: 0 0 calc((100% - (var(--widget-columns, 3) - 1) * var(--widget-gap, 24px)) / var(--widget-columns, 3));
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .widget-loop__track > .widget-loop__item { flex-basis: calc((100% - var(--widget-gap, 24px)) / 2); }
}
@media (max-width: 767px) {
  .widget-loop__track > .widget-loop__item { flex-basis: 85%; }
}
.widget-loop__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid currentColor;
  background: var(--kit-surface, Canvas); color: inherit; cursor: pointer;
}
.widget-loop__arrow--prev { inset-inline-start: -.5rem; }
.widget-loop__arrow--next { inset-inline-end: -.5rem; }
.widget-loop__arrow[hidden] { display: none; }

/* A loop's filter: a row of links. */
.widget-loop__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.25rem; }
.widget-loop__filter a {
  padding: .35rem .85rem; border: 1px solid currentColor; border-radius: 999px;
  text-decoration: none; opacity: .75; font-size: .875em;
}
.widget-loop__filter a[aria-current="true"] { opacity: 1; font-weight: 600; }

/* Accordion: the browser's own disclosure element. */
.widget-accordion { display: grid; gap: .5rem; }
.widget-accordion__item { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: var(--kit-radius, 12px); }
.widget-accordion__title { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style-position: inside; }
.widget-accordion__body { padding: 0 1.1rem 1rem; }

/* Tabs: every panel under its heading until interactive.js takes over. */
.widget-tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent); margin-block-end: 1rem; }
.widget-tabs--center .widget-tabs__list { justify-content: center; }
.widget-tabs--stretch .widget-tabs__list > [role="tab"] { flex: 1; }
.widget-tabs__list > [role="tab"] { background: none; border: 0; border-block-end: 2px solid transparent; padding: .6rem 1rem; color: inherit; cursor: pointer; font: inherit; opacity: .7; }
.widget-tabs__list > [role="tab"][aria-selected="true"] { border-block-end-color: currentColor; opacity: 1; font-weight: 600; }
.widget-tabs__panel + .widget-tabs__panel { margin-block-start: 1.25rem; }
.widget-tabs.is-ready .widget-tabs__heading { display: none; }
.widget-tabs.is-ready .widget-tabs__panel + .widget-tabs__panel { margin-block-start: 0; }

/* Countdown. */
.widget-countdown__clock { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.widget-countdown__part { display: grid; justify-items: center; }
.widget-countdown__value { font-size: 2.25em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.widget-countdown__label { font-size: .8em; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }

/* Form. */
.widget-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-end: 1rem; }
.widget-form__field { display: grid; gap: .35rem; grid-column: span 2; }
.widget-form__field--half { grid-column: span 1; }
@media (max-width: 767px) { .widget-form__field--half { grid-column: span 2; } }
.widget-form__field input:not([type="checkbox"]), .widget-form__field select, .widget-form__field textarea { width: 100%; font: inherit; }
.widget-form__check { display: flex; gap: .5rem; align-items: flex-start; }
.widget-form__trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.widget-form__error { color: var(--kit-danger, #b42318); }

/* A container shown as a carousel: its children are the slides. */
.mq-carousel { position: relative; }
.builder-container.mq-carousel__track {
  flex-direction: row !important; flex-wrap: nowrap !important;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.mq-carousel__track > * {
  flex: 0 0 calc((100% - (var(--mq-per-view, 1) - 1) * var(--mq-carousel-gap, 0px)) / var(--mq-per-view, 1));
  scroll-snap-align: start; min-width: 0;
}
.mq-carousel__track > .mq-pick { display: block; }
@media (max-width: 767px) { .mq-carousel__track > * { flex-basis: 88%; } }

/* Animated heading. */
.widget-animated-heading__words { display: inline-block; color: var(--kit-accent, currentColor); }
.widget-animated-heading__word { display: inline-block; transition: opacity .25s ease, transform .25s ease; }
.widget-animated-heading__words--fade .widget-animated-heading__word.is-leaving { opacity: 0; }
.widget-animated-heading__words--slide .widget-animated-heading__word.is-leaving { opacity: 0; transform: translateY(-.4em); }
.widget-animated-heading__words--type .widget-animated-heading__word::after { content: ""; border-inline-end: .08em solid currentColor; margin-inline-start: .05em; animation: mq-caret 1s steps(1) infinite; }
@keyframes mq-caret { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .widget-animated-heading__word { transition: none; } .widget-animated-heading__word::after { animation: none; } }

/* GrapesJS content loop (mq-loop): a grid of cards, as many columns as the loop asks for. */
.mq-loop { display: grid; grid-template-columns: repeat(var(--mq-loop-columns, 3), minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 900px) { .mq-loop { grid-template-columns: repeat(min(2, var(--mq-loop-columns, 3)), minmax(0, 1fr)); } }
@media (max-width: 600px) { .mq-loop { grid-template-columns: 1fr; } }