/*
 * Form-page bespoke layout — MSEED Education
 *
 * Covers page-form.php and page-contact.php.
 * Form-panel component styles live in _form-panel.css.
 * This file: page-level section wrapper + container centering.
 *
 * All values via var(--*). Breakpoints use raw px.
 */

/* ══════════════════════════════════════════════════════════════════════
   FORM PAGE SECTION
═══════════════════════════════════════════════════════════════════════ */

.form-page {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

@media (max-width: 768px) {
  .form-page {
    padding-block: var(--sp-7);
  }
}

/* Constrain form to readable width, centred */
.form-page__container {
  max-width: 44rem;
}

/* ══════════════════════════════════════════════════════════════════════
   FORM HERO — apply/brochure photo-hero-card layout
═══════════════════════════════════════════════════════════════════════ */

.form-hero {
  position: relative;
  min-height: 35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: var(--sp-9);
}

.form-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7, 36, 63, 0.55) 0%,
    rgba(7, 36, 63, 0.75) 100%
  );
}

.form-hero .container {
  position: relative;
  display: flex;
  justify-content: center;
}

.form-hero__card {
  width: 100%;
  max-width: 34rem;
  background-color: var(--c-white);
  border-radius: var(--r-lg, var(--r-md));
  box-shadow: var(--sh-pop);
  padding: var(--sp-7);
}

.form-hero__card .form-panel__title {
  text-align: center;
  text-transform: uppercase;
  font-size: var(--fs-h2);
}

@media (max-width: 480px) {
  .form-hero__card {
    padding: var(--sp-5);
  }
}