/* ==========================================================================
   Shared form layout system
   --------------------------------------------------------------------------
   LAYOUT ONLY. This file decides how fields are arranged, sized and spaced.
   It never decides which fields exist, what they mean, whether they are
   required, or how they validate — that stays in the markup and PHP that
   own the form.

   It is additive: it styles the layout wrappers around .pcsr-field and
   leaves .pcsr-field's own label/input rules (assets/space-reservation/
   wizard.css) alone, so existing forms keep working and simply gain the
   grid when their markup opts in.

   ---- Structure -----------------------------------------------------------

   <form class="pcsr-form">
     <section class="pcsr-form-section">
       <div class="pcsr-form-section__head">
         <h2 class="pcsr-form-section__title">…</h2>
         <p  class="pcsr-form-section__hint">…</p>
       </div>
       <div class="pcsr-form-grid">
         <div class="pcsr-field pcsr-f-sm">…</div>
         <div class="pcsr-field pcsr-f-md">…</div>
         <div class="pcsr-field pcsr-f-full">…</div>
       </div>
     </section>
     <div class="pcsr-form-actions">…</div>
   </form>

   ---- Sizing ---------------------------------------------------------------

   A field declares what KIND of value it holds, not a column count. The
   grid translates that into spans per breakpoint, so one class stays
   correct on a phone and on a 4K monitor.

     .pcsr-f-xs    counts, times, quantities, on/off       (very compact)
     .pcsr-f-sm    dates, city, status, short numbers      (compact)
     .pcsr-f-md    names, phone, email — the default       (medium)
     .pcsr-f-lg    address, long titles                    (wide)
     .pcsr-f-full  textareas, notes, anything full-row     (whole row)

   Spans on the 12-column grid:

     class    phone   tablet   laptop   desktop   wide
     xs        12       4        3        2        2
     sm        12       6        4        3        3
     md        12       6        6        4        4
     lg        12      12        8        6        6
     full      12      12       12       12       12

   Breakpoints: phone <640, tablet 640–1023, laptop 1024–1279,
   desktop 1280–1679, wide ≥1680. Mobile-first — the base rules are the
   phone layout and each query adds capability.
   ========================================================================== */

.pcsr-form {
  /* Spacing scale. Every gap in a form comes from one of these four, which
     is what makes the vertical rhythm consistent across different forms. */
  --pcsr-form-gap-x: 20px;      /* between columns */
  --pcsr-form-gap-y: 18px;      /* between rows */
  --pcsr-form-section-gap: 34px;/* between sections */
  --pcsr-form-label-gap: 6px;   /* label to its control */

  /* Caps the whole form. Without this, a form on a 27" monitor stretches
     to the full content width and every input goes with it — the single
     most common way an otherwise fine form starts looking amateurish. */
  --pcsr-form-max: 1120px;

  max-width: var(--pcsr-form-max);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Sections ---------------------------------------------------------- */

.pcsr-form-section + .pcsr-form-section {
  margin-top: var(--pcsr-form-section-gap);
}

.pcsr-form-section__head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pcsr-form-section__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--logo-ink, #5c0a02);
}

.pcsr-form-section__hint {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.58);
}

/* ---- The grid ---------------------------------------------------------- */

.pcsr-form-grid {
  display: grid;
  grid-template-columns: 1fr; /* phone: one column */
  column-gap: var(--pcsr-form-gap-x);
  row-gap: var(--pcsr-form-gap-y);
  /* Bottom-aligned so controls line up across a row even when one label
     wraps to two lines. Aligning to the top would stagger the inputs. */
  align-items: end;
}

/* .pcsr-field carries its own bottom margin for stacked (non-grid) forms;
   inside the grid, row-gap owns the spacing instead. */
.pcsr-form-grid > .pcsr-field {
  margin-bottom: 0;
  min-width: 0; /* lets long values shrink instead of blowing out the column */
}

/* Force a new row without an empty filler element. */
.pcsr-form-grid > .pcsr-row-break {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
}

/* ---- Control sizing ----------------------------------------------------
   The column span sets how much room a field gets; these caps stop the
   control itself from filling that room when it makes no sense — a year or
   a time never needs 300px, whatever the grid allows. ---- */

.pcsr-field label {
  margin-bottom: var(--pcsr-form-label-gap);
}

.pcsr-form-grid .pcsr-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  /* A floor, not a height — the element's own rows attribute decides how
     tall it actually is, so a two-line address and a long description can
     differ without needing separate classes. */
  min-height: 72px;
  resize: vertical;
}

.pcsr-f-xs :is(input, select) { max-width: 150px; }
.pcsr-f-sm :is(input, select) { max-width: 230px; }
.pcsr-f-md :is(input, select) { max-width: 340px; }
.pcsr-f-lg :is(input, select) { max-width: 520px; }

/* ---- Actions ----------------------------------------------------------- */

.pcsr-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--pcsr-form-section-gap);
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Pushes a button to the far end of the row (e.g. a cancel link opposite
   the submit button). */
.pcsr-form-actions .pcsr-form-actions__spacer {
  margin-inline-start: auto;
}

/* ---- Breakpoints ------------------------------------------------------- */

/* Tablet */
@media (min-width: 640px) {
  .pcsr-form-grid { grid-template-columns: repeat(12, 1fr); }

  .pcsr-f-xs { grid-column: span 4; }
  .pcsr-f-sm { grid-column: span 6; }
  .pcsr-f-md { grid-column: span 6; }
  .pcsr-f-lg { grid-column: span 12; }
  .pcsr-f-full { grid-column: 1 / -1; }
}

/* Laptop */
@media (min-width: 1024px) {
  .pcsr-form { --pcsr-form-gap-x: 24px; }

  .pcsr-f-xs { grid-column: span 3; }
  .pcsr-f-sm { grid-column: span 4; }
  .pcsr-f-md { grid-column: span 6; }
  .pcsr-f-lg { grid-column: span 8; }
}

/* Desktop */
@media (min-width: 1280px) {
  .pcsr-f-xs { grid-column: span 2; }
  .pcsr-f-sm { grid-column: span 3; }
  .pcsr-f-md { grid-column: span 4; }
  .pcsr-f-lg { grid-column: span 6; }
}

/* Wide — spans stop growing here on purpose. Past this width the form
   itself is already capped by --pcsr-form-max, so the extra space becomes
   margin rather than even wider inputs. */
@media (min-width: 1680px) {
  .pcsr-form { --pcsr-form-gap-x: 28px; --pcsr-form-gap-y: 20px; }
}