/* ==========================================================================
   Layout — the two-column shell
   Depends on: tokens.css

   Design: 1920×1584 canvas.
     80px page padding · 425px sidebar · 20px gap · 1315px card · 80px padding

   Breakpoints (min-width):
     md   768px   tablet portrait  — sidebar collapses above the card
     lg  1024px   tablet landscape — two columns appear
     xl  1280px   desktop
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--page-pad-y) var(--page-pad-x);
}

.shell {
  display: grid;
  gap: var(--shell-gap);
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
}

/* Single column below lg: job details first, then the form. */
@media (min-width: 1024px) {
  .shell {
    /* Sidebar holds its design width; the card takes the remainder up to
       1315px, which is exactly the design ratio at 1920. */
    grid-template-columns: minmax(320px, var(--sidebar-w)) minmax(0, 1fr);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Stack / cluster helpers
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp, 1rem);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp, 0.75rem);
}

.cluster--end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Visibility
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) { .u-hide-below-lg { display: none !important; } }
@media (min-width: 1024px)    { .u-hide-from-lg  { display: none !important; } }