/* ==========================================================================
   layout.css — core layout helpers + global page surfaces
   ========================================================================== */

/* --------------------------------------------------------------------------
   Legacy / current container (keep as-is for non-migrated pages)
   -------------------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* MAIN / SECTION SURFACES */
main{
  position: relative;
  background: transparent;
  padding-top: 0; /* keep seams predictable */
}

:root{
  --hero-max: 1320px;   /* match your hero card width exactly */
}

/* Hero-width container */
.container--hero{
  max-width: var(--hero-max);
}

main{
  padding-bottom: var(--main-pad-bottom, 0px);
}

/* ==========================================================================
   MIGRATION-SAFE STANDARD CONTAINERS (NEW, UNIQUE NAMES)
   - Use these on updated pages only (ex: Recommendations)
   - No conflicts with legacy pages because names are mg- prefixed
   ========================================================================== */