/* Bedford and Milton Keynes enquiry page. Loaded after theme.css and
   visual-direction.css so form controls stay readable on the paper surface. */
.trainer-page { margin: 0; }
.trainer-page .skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 5;
  transform: translateY(-200%);
  background: #b73520;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
}
.trainer-page .skip-link:focus { transform: none; }

.trainer-page .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0.75rem 1.25rem;
}
.trainer-page .nav-logo { font-size: 1.35rem; text-decoration: none; letter-spacing: 0.02em; }
.trainer-page .nav-note { font-size: 0.85rem; text-decoration: none; }

.trainer-page main { padding: 1.25rem 1.25rem 3rem; }
.trainer-page .wrap { max-width: 68rem; margin: 0 auto; }

.trainer-page h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 0.95; margin: 0 0 1rem; }
.trainer-page h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; margin: 2.5rem 0 0.8rem; }

.trainer-page .intro-grid { display: grid; gap: 1.25rem; align-items: start; }
.trainer-page .intro-grid > h1 { margin-bottom: 0; }
.trainer-page .intro-figure,
.trainer-page .scene { margin: 0; }
.trainer-page .intro-figure img,
.trainer-page .scene img {
  display: block;
  width: 100%;
  height: auto;
  background: #e6e0d8;
}
.trainer-page figcaption { margin-top: 0.45rem; font-size: 0.85rem; color: #615e57; max-width: 68ch; }

.trainer-page .points,
.trainer-page .steps { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.trainer-page .points li,
.trainer-page .steps li {
  margin: 0;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, #f3f0e9 92%, #e6e0d8);
  border: 1px solid color-mix(in srgb, #202121 22%, transparent);
}
.trainer-page .points strong,
.trainer-page .steps strong { display: block; color: #202121; }

.trainer-page .scenes { display: grid; gap: 1rem; margin-top: 1rem; }

.trainer-page form { display: grid; gap: 1rem; margin-top: 1rem; }
.trainer-page label,
.trainer-page legend { color: #202121; font-weight: 600; }
.trainer-page legend { padding: 0; }
.trainer-page fieldset {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid #202121;
  display: grid;
  gap: 0.35rem;
}
.trainer-page .field { display: grid; gap: 0.35rem; }
.trainer-page input[type="text"],
.trainer-page input[type="email"],
.trainer-page input[type="tel"],
.trainer-page input[type="date"],
.trainer-page select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font: 400 1rem/1.4 "DM Sans", "Hanken Grotesk", sans-serif;
  color: #202121;
  background: #fffdfa;
  border: 1px solid #202121;
  border-radius: 0;
}
.trainer-page .choice { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; }
.trainer-page input[type="checkbox"],
.trainer-page input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #b73520;
  flex: 0 0 auto;
}
.trainer-page .field-hint { margin: 0; font-size: 0.9rem; }
.trainer-page .field-error { margin: 0; color: #8f1d2c !important; font-weight: 600; }
.trainer-page [hidden] { display: none !important; }
.trainer-page .error-summary {
  padding: 0.85rem 1rem;
  border: 2px solid #8f1d2c;
  background: #f8e8e6;
}
.trainer-page .error-summary p,
.trainer-page .error-summary a { color: #8f1d2c !important; max-width: none; }
.trainer-page .error-summary ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.trainer-page button[type="submit"] {
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font: 600 1rem/1.2 "DM Sans", sans-serif;
  cursor: pointer;
  width: 100%;
}
.trainer-page button:disabled { cursor: wait; opacity: 0.7; }
.trainer-page .consent { align-items: flex-start; }
.trainer-page .consent label { font-weight: 500; }
.trainer-page .thanks { padding: 1rem 0 2rem; }
.trainer-page .thanks h2 { margin-top: 0; }
.trainer-page .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.trainer-page .shop-note { margin-top: 2.5rem; }
.trainer-page footer { padding: 1.5rem 1.25rem 2rem; text-align: center; }
.trainer-page footer p { margin-left: auto; margin-right: auto; }

@media (min-width: 800px) {
  .trainer-page main { padding: 2rem 2rem 4rem; }
  .trainer-page .intro-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "title photo" "copy photo";
  }
  .trainer-page .intro-grid > h1 { grid-area: title; }
  .trainer-page .intro-figure { grid-area: photo; }
  .trainer-page .intro-copy { grid-area: copy; }
  .trainer-page .points { grid-template-columns: 1fr 1fr; }
  .trainer-page .scenes { grid-template-columns: repeat(3, 1fr); }
  .trainer-page button[type="submit"] { width: auto; }
}