/* sections/hero-v2.css (single-source) */

/* Generic hero (inner pages) */
.c-hero {
  position: relative;
  padding: var(--space-64) 0;
}

/* Home/Programmes hero split (Figma style) */
.c-hero--home {
  padding: 0;
}

.c-hero--home .c-hero__split {
  display: grid;
  grid-template-columns: 1fr;
}

.c-hero--home .c-hero__photo,
.c-hero--home .c-hero__panel {
  min-height: 520px;
}

.c-hero--home .c-hero__photo {
  overflow: hidden;
}

.c-hero--home .c-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  /* transform: scale(1.8); */
  transform-origin: left bottom;
}

.c-hero--home .c-hero__panel {
  position: relative;
  background: var(--color-blue);
  color: #fff;
  padding: var(--space-32) var(--space-16);
  overflow: hidden;
}

.c-hero--home .c-hero__panel .c-title-h1 {
  color: #fff;
  max-width: 18ch;
  font-size: clamp(52px, 5vw, 78px);
  line-height: 70px;
}

/* Orange pill (must NOT stretch full width) */
.c-hero__subtitle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  background: var(--color-orange);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  padding: 3px 17px;
  border-radius: 0 !important;
  margin-top: var(--space-12);
  white-space: nowrap;
}

.c-hero__summary {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.1;
  color: #fff;
  max-width: 48ch;
}

/* Form styles apply only inside .c-hero (hero.php), not in programme hero */
.c-hero .c-hero__form-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-700);
  font-size: var(--fs-18);
  margin: var(--space-24) 0 var(--space-12);
}

.c-hero .c-hero__form {
  display: grid;
  gap: var(--space-12);
  max-width: 560px;
}

.c-hero__inputs {
  display: grid;
  gap: var(--space-12);
}

.c-hero__inputs .c-input {
  height: 32px;
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.c-hero__inputs .c-input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.c-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  width: 188px;
  background: var(--color-orange);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: var(--fw-700);
  font-size: 14px;
  border: 0;
  cursor: pointer;
}

.c-hero__disclaimer {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 13px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 0;
}

.c-hero__grafism {
  position: absolute;
  right: -60px;
  bottom: -30px;
  width: 260px;
  height: auto;
  pointer-events: none;
  opacity: 0.95;
}

/* Ninja Forms (Request Information) inside .c-hero only (hero.php) */
.c-hero .c-hero__form .nf-form-cont,
.c-hero .c-hero__form .nf-form-wrap,
.c-hero .c-hero__form form,
.c-hero .c-hero__form .nf-form-layout,
.c-hero .c-hero__form .nf-form-content,
.c-hero .c-hero__form nf-fields-wrap {
  margin: 0;
  padding: 0;
}

.c-hero .c-hero__form .nf-form-fields-required,
.c-hero .c-hero__form .nf-debug-msg {
  display: none !important;
}

.c-hero .c-hero__form .nf-form-content nf-fields-wrap {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}

.c-hero .c-hero__form .nf-form-content nf-fields-wrap > nf-field {
  display: contents;
}

.c-hero .c-hero__form .nf-field-container {
  margin: 0 !important;
}

.c-hero .c-hero__form .hidden-container {
  display: none !important;
}

/* Hidden/tracking fields must not consume layout space */
.c-hero .c-hero__form .nf-field-container.hidden-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-browser-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-browser-version-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-ip-address-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-os-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-referer-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-utm-campaign-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-utm-medium-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-utm-source-container,
.c-hero .c-hero__form .nf-field-container.user-analytics-utm-term-container,
.c-hero .c-hero__form .nf-field-container.unknown-container {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Generic: if the container has a hidden input, remove it from layout */
.c-hero .c-hero__form .nf-field-container:has(input[type="hidden"]) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ninja Forms sometimes outputs HTML fields for tracking pixels */
.c-hero .c-hero__form .nf-field-container.html-container:has(.nf-field-element > img) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide labels for text/select fields (but keep checkbox label visible) */
.c-hero .c-hero__form .nf-field-container:not(.checkbox-container) .nf-field-label {
  display: none !important;
}

/* Inputs/selects should look like mockup fields */
.c-hero .c-hero__form .nf-field-element .ninja-forms-field.nf-element:not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
  height: 32px;
  border-radius: 0 !important;
  border: 0 !important;
  background: #fff !important;
  color: var(--color-black) !important;
  padding: 0 12px;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
}

/* .nf-error .nf-error-msg {
  font-family: var(--font-sans) !important;
  color: #000 !important;
} */

.c-hero .c-hero__form .nf-field-element .ninja-forms-field.nf-element::placeholder {
  color: var(--color-black) !important;
}

/* Select: remove native arrow + add custom chevron */
.c-hero .c-hero__form .nf-field-element select.ninja-forms-field.nf-element {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20fill%3D%27%23111111%27%20fill-opacity%3D%270.65%27%20d%3D%27M2.2%2C4.4%20a1%2C1%200%200%2C1%201.4%2C0%20L6%2C6.8%20l2.4-2.4%20a1%2C1%200%200%2C1%201.4%2C1.4%20l-3.1%2C3.1%20a1%2C1%200%200%2C1-1.4%2C0%20L2.2%2C5.8%20a1%2C1%200%200%2C1%200-1.4z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* Ensure dropdown options render dark text on light bg */
.c-hero .c-hero__form .nf-field-element select.ninja-forms-field.nf-element option {
  color: var(--color-black);
}

.c-hero .c-hero__form .nf-field-element > div[for] {
  height: 32px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.c-hero .c-hero__form .nf-field-element .ninja-forms-field.nf-element:not([type="submit"]):not([type="checkbox"]):focus {
  outline: 3px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* Submit button: match mock CTA */
.c-hero .c-hero__form input[type="submit"].ninja-forms-field.nf-element {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  /* width: 188px; */
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--color-orange) !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-700) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0 15px;
}

.nf-error.field-wrap .nf-field-element::after {
  height: 30px !important;
  width: 30px !important;
  line-height: 32px !important;
}

.c-hero .c-hero__form input[type="submit"].ninja-forms-field.nf-element:hover {
  filter: brightness(0.98);
}

/* Put submit/checkbox/disclaimer on full width row */
.c-hero .c-hero__form .submit-container,
.c-hero .c-hero__form .checkbox-container,
.c-hero .c-hero__form .html-container {
  grid-column: 1 / -1;
}

/* Checkbox row alignment */
.c-hero .c-hero__form .checkbox-container .field-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.c-hero .c-hero__form .checkbox-container .nf-field-element {
  order: 1;
  margin-top: 2px;
}

.c-hero .c-hero__form .checkbox-container .nf-field-label {
  order: 2;
  display: block !important;
}

.c-hero .c-hero__form .checkbox-container input[type="checkbox"].ninja-forms-field {
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 0;
  accent-color: var(--color-orange);
}

.c-hero .c-hero__form .checkbox-container .nf-field-label label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
}

/* Disclaimer HTML: enforce hero disclaimer typography (override inline styles) */
.c-hero .c-hero__form .html-container .nf-field-element,
.c-hero .c-hero__form .html-container p,
.c-hero .c-hero__form .html-container span {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  line-height: 13px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.c-hero .c-hero__form .html-container p {
  margin: 0 !important;
}

.c-hero .c-hero__form .html-container a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-hero .c-hero__form .html-container img {
  display: none !important;
}

/* Errors */
.c-hero .c-hero__form .nf-error-wrap.nf-error {
  margin-top: 6px;
  font-size: 12px;
  color: #ffd800;
}

/* Programmes hero: green dates bar */
.c-hero--with-dates .c-hero__panel {
  padding-bottom: 88px;
}

.c-hero--with-dates .c-hero__dates {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: var(--color-green);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 22px;
}

.c-hero--with-dates .c-hero__datesItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  font-family: var(--font-sans);
}

.c-hero--with-dates .c-hero__datesLabel {
  font-size: 12px;
  font-weight: var(--fw-600);
}

.c-hero--with-dates .c-hero__datesValue {
  font-size: 16px;
  font-weight: var(--fw-900);
}

.c-hero--with-dates .c-hero__datesDivider {
  width: 2px;
  height: 28px;
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  .c-hero--with-dates .c-hero__dates {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    padding: 14px 18px;
  }

  .c-hero--with-dates .c-hero__datesDivider {
    display: none;
  }
}

@media (min-width: 1024px) {
  .c-hero--home .c-hero__split {
    grid-template-columns: 1fr 1fr;
  }

  .c-hero--home .c-hero__photo,
  .c-hero--home .c-hero__panel {
    min-height: 830px;
  }

  .c-hero--home .c-hero__panel {
    padding: 70px 70px 70px 70px;
  }

  .c-hero--with-dates .c-hero__panel {
    padding-bottom: 72px;
  }

  .c-hero__inputs {
    grid-template-columns: repeat(2, 266px);
    align-items: start;
  }

  .c-hero .c-hero__form .nf-form-content nf-fields-wrap {
    grid-template-columns: repeat(2, 266px);
  }

  .c-hero--home .c-hero__photo img {
    /* transform: scale(1.8); */
  }
}